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!
