I'm having a hard time figuring out how to explain my issue.
I have a form which have a couple of input-fields that are validated on blur. For example, I have a address field which has a max value of 45 chars. If I write more than 45 chars in the input box and then move to the next field a dialog is shown proclaiming that I’ve been a silly person for writing so many chars*. When I click on the OK button in the dialog the dialog is closed and I can try again. BUT if I write 46 chars in the field and then use Back the dialog is shown but then immediately closes and moving me back to the form. That’s the symptom of my trouble.
The wierd part was that when I added breakpoints in Chrome it worked fine. When moving through the jQM and jQ code I spotted the problem. Code:
// click routing - direct to HTTP or Ajax, accordingly
$(document).bind("click", function (event) {
if (!$.mobile.linkBindingEnabled) {
return;
}
var link = findClosestLink(event.target), $link = $(link), httpCleanup;
// If there is no link associated with the click or its not a left
// click we want to ignore the click
// TODO teach $.mobile.hijackable to operate on raw dom elements so the link wrapping
// can be avoided
if (!link || event.which > 1 || !$link.jqmHijackable().length) {
return;
}
//remove active link class if external (then it won't be there if you come back)
httpCleanup = function () {
window.setTimeout(function () { removeActiveLinkClass(true); }, 200);
};
//if there's a data-rel=back attr, go back in history
if ($link.is(":jqmData(rel='back')")) {
$.mobile.back();
return false;
}
This is not the whole function but if you search for the final if statement you will find the code. Anywho, If I didn’t have the breakpoint the $link had the ”jqmData(rel=’back’)” but if I added a breakpoint earlier in the code the $link pointed to my dialog. Is there an async problem here?
I have a github project that explains the issue:
http://jsfiddle.net/LarsCJensen/PDwWf/22/Do the following in Chrome:
Test 1:
1. 1. Write something in the address input.
2. Put marker in Note text area.
3. Dialog with message is shown properly.
Test 2:
1. Write something in the address input.
2. Press the JQM-Back-button
3. The dialog is shown but immediately closes.
Test 3:
1. Open the console in Chrome.
2. Set breakpoint on row 37 (if (isValidMessage != "") {).
3. Write something in the address input.
4. Press the JQM-Back-button
5. Dialog with message is shown properly.
So, is this a bug or feature by design?
* I don’t want to add the max value in the HTML-code which I could do to prevent the user from writing to many chars. I’m validating against a database in local storage.