Hello StackOverflow community!
I'm currently working on my own jQuery plugin for inline-editing as those that already exist don't fit my needs.
Anyway, I'd like
to give the user the following (boolean) options concerning the way editing is supposed
to work:
submit_button
reset_on_blur
Let's say the user would like
to have a submit button (submit_button = true) and wants the inline input element
to be removed as soon as it loses focus (reset_on_blur = true).
This leads
to an onClick handler being registered for the button and an onBlur handler being registered for the input element.
Every time the user clicks the button, however, the onBlur handler is also triggered and results in the edit mode being left, i.e. before the onClick event occurs. This makes submitting impossible.
FYI, the HTML in edit mode looks like this:
<td><input type="text" class="ie-input" value="Current value" /><div class="ie-content-backup" style="display: none;">Backup Value</div><input type="submit" class="ie-button-submit" value="Save" /></td>
So, is there any way I could check in the onBlur handler if the focus was lost while activating the submit button, so that edit mode isn't left before the submit button's onClick event is triggered?
I've also tried
to register a $('body').click() handler
to simulate blur and
to be able
to trace back which element has been clicked, but that didn't work either and resulted in rather strange bugs:
$('html').click(function(e) { // body doesn't span over full page height, use html instead
// Don't reset if the submit button, the input element itself or the element
to be edited inline was clicked.
if(!$(e.target).hasClass('ie-button-submit') && !$(e.target).hasClass('ie-input') && $(e.target).get(0) != element.get(0)) {
cancel(element);
}
});
jEditable uses the following piece of code. I don't like this approach, though, because of the delay. Let alone I don't even understand why this works. ;)
input.blur(function(e) {
/* prevent canceling if submit was clicked */
t = setTimeout(function() {
reset.apply(form, [settings, self]);
}, 500);
});
Thanks in advance!
