XF 2.3 Tutorials for Xenforo 2.3 Javascript without JQuery (inline editing tutorial)

tenants

Well-known member
This isn't a question, I just thought it might be helpful for anyone also hitting this issue

I searched the forms, couldn't find much on
this.inserter.onLoad(data);


I've just hit kiers Video Tutorial:
implementing-inline-editing-with-the-xf-javascript-framework-building-with-xenforo-2-part-11

The Javascipt in this example uses JQuery, but xf 2.3 does not use JQuery, so for anyone stuck, I've found this works:

In the tutorials, instead of this jquery method:


Code:
!function($, window, document, _undefined)
{
    "use strict";
   
    //allow use to specify a class on an element
    XF.NoteEdit = XF.Element.newHandler({
        options: {
            href: true,
            replace: null
        },
       
        init: function()
        {
            // we need this to listen for te ajax submit event (and add the additional field that only the js version will have)
            // we also need this to listen for the response event (to update the note) (this.$target the target from the data-xf-init="note-edit" )
            this.$target.on('ajax-submit:before', XF.proxy(this, 'beforeSubmit'));
            this.$target.on('ajax-submit:respone', XF.proxy(this, 'handleResponse'));
            this.inserter = new XF.Inserter(this.$target, this.options);
        },

        beforeSubmit: function(e, config)
        {
            // add the hidden field to the form
            let $ctrl =  $('<input type="hidden" name="NotEdit" value="1" />');
            this.$target.find('js-controls').append($ctrl);      
        },

        handleResponse: function(e, data)
        {
            if(data.errors || data.exception){
                return;
            }
            // we are going to be getting back a template, so we want to insert that into the note
           
            this.inserter.onLoad(data);

        }

    });
   
    XF.Element.register('note-edit', 'XF.NoteEdit');


}
(jQuery, window, document);




You can use this:
JavaScript:
(function(window, document, undefined) {
    "use strict";

    // Define the NoteEdit handler
    class NoteEdit {
        constructor(target, options = {}) {

            if (!(target instanceof HTMLElement)) {
                console.error("Invalid target passed to NoteEdit:", target);
                return;
            }

            this.target = target;
            this.options = Object.assign({
                href: true,
                replace: null   // date replace gets replaced by  data-replace="#{$id} with #{$id}"  (old id with id in response)
            }, options);

           

            this.init();
        }

        init() {
            // Add event listeners for AJAX events
 

            XF.on(this.target, 'ajax-submit:before', this.beforeSubmit.bind(this))
            XF.on(this.target, 'ajax-submit:response', this.handleResponse.bind(this))

            // Initialize the inserter
            this.inserter = new XF.Inserter(this.target, this.options);
        }

        beforeSubmit(e) {
            // Add the hidden field to the form
            let ctrl =  XF.createElementFromString('<input type="hidden" name="NoteEdit" value="1" />');

            let controls = this.target.querySelector('.js-controls');
            if (controls) {
                controls.appendChild(ctrl); // this successfully appends the hidden field to the form
            }

        }

        handleResponse(e) {

            const { data } = e  
            if (!data) {
                console.error("No valid data received in response:", data);
                console.error("e:", e);
                return;
            }

            // const data = e.data;
            if (data.errors || data.exception) {
                console.error("Error in response data:", data);
                return;
            }

            if (!this.inserter || typeof this.inserter.onLoad !== 'function') {
                console.error("Inserter is not defined or invalid:", this.inserter);
                return;
            }

            //console.log("Calling onLoad with data:", data);
            // Insert response data into the note
            this.inserter.onLoad(data);
 
           
            //console.log("inserter job done");
        }
    }

    // Register the handler in XF
    XF.Element.register('note-edit', NoteEdit);

})(window, document);
 
I've attached the demo pad that I got working for xenforo 2.3

I'm not supporting this addon, so I'm not adding it to releases. Someone asked for help related to this, if you find the changes you need to make (and the part you got stuck on), I think it's good to add your issue, even if you've already answered it (it can save someone else hours of debugging)

Should you get stuck while going through the video tutorial, you should be able to dig through this code and look at the changes I've made so that it works without jquery

FYI: @Itworx4me coincidentally, these changes did indeed work for me to get the tutorial going, I hope they worked for you
 

Attachments

Hmm, I interesting, I've done a lot more on significantly large plugins for xf2.3 now.

It should be noted, if you want to manipulate dom elements, you should probably use

Code:
document.addEventListener('DOMContentLoaded', function() {
// your code here 
});

However, for immediately available local scope functions/variables, you can use:

Code:
(function(window, document, undefined) {
// your code here
});

I do a lot of dom watching, so most of the js I use is now inside DOMContentLoaded
 
There also are js events fired by XenForo itself upon end of page load, you might as well look into them.
 
Back
Top Bottom