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:
You can use this:
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);