I have a string of multiple lines, seperated by linebreaks, that's parsed into an <ul> hierarchy on the client side with javascript. Jeditable is used to edit the list and the user sees the original text with line breaks (sent from the loadurl param) not the parsed HTML. e.g.
Original text/string and what user is presented with if editing:
line1
line2
line3
line4
Parsed into the following on page load and after editing. What user sees when viewing (not editing):
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
All works well here using the following jeditable settings:
$('.editable').editable(function(value, settings) {
var data = jeditableSubmitChange(value);
return(data);
}, {
type : 'textarea',
loadurl : '/util/fetchsource.php',
cancel : 'Cancel',
submit : 'Change',
loadtext : 'Loading...',
indicator : 'Saving...',
tooltip : 'Click to edit...',
cssclass : 'liveeditform',
cancelcssclass : 'button button__under',
submitcssclass : 'button button__under',
submitdata : {foo: "bar"},
onreset : jeditableCancel
});
When the user submits edits, they pass through to the jeditableSubmitChange function fine and, most importantly, I can modify the content that's sent back to the containing element and provide similar parsing to when the page was loaded. This also works great.
The problem is when the user cancels the edit. Jeditable returns the string without html parsing and I can't find a way to modify/parse it after its loaded. I just get the original, unmodified string.
Research had led me to believe that the onreset parameter was what I needed. From my trials and errors (and researching, such as this answer) it looks like it's called before the original content is loaded back into the containing element, meaning I can't call it to modify what's just been loaded back into the containing element (it will just tell me it's a form - which it is before the content has been returned). I also can't see a way to modify what's being returned. I'm provided with a parameter of what it is (original) but returning or not returning data seems to have no effect:
function jeditableCancel(settings, original) {
console.log("jeditable form just cancelled. Function called and confirmed");
// return "Does this data appear?"; // Didn't appear
// leaving out return has no effect. The parent container is still populated with the original content.
}
Is there a way to intercept the actual data being populated back into the parent container and modify it before its populated (like I can do with submitting, where I'm in control of what data is returned), or is there a callback that I can parse the data on the page the moment its completed its loading (when cancelled)? The docs don't seem to suggest either. I've left out the parsing functions from the question as they don't feel relevant. They work fine and the problem is not how I'm parsing, it's being able to modify data at all in the circumstances mentioned.
It turns out that this is not possible with the existing version and likely will never be, as it's too niche a use.
The source is available but it was less work to create my own take on this from scratch with jquery (though too long here for here and not relevant to answering the question) than try and adjust what jeditable provides. I didn't have a strong reliance on some of jeditables other features and it's less involved than you may think to recreate the core functions.