I'm using jqueryUI for a datepicker to pick birthdays. Turns out in IE if the person tries to type in the box instead of using the picker, and hits the backspace, they get kicked off the form and to a previous page. Can anyone explain or propose a fix? Also not sure why the red asterisk is showing up inside the box when it shows outside in firefox and when all the others display correctly.
Looking at the eighth field:
http://www.craftonhills.edu/Degrees_and_Certs/Divs_and_Depts/Career_Education_and_Human_Development/Public_Safety_and_Services/Fire_Technology/Firefighter_Academy/Firefighter_Academy_Info/Application
Backspace key in the browser defaults to triggering the Back button. You can try to intercept the keystroke (See here: Intercepting all key presses with jQuery before they are processed) to stop it from firing, but a better solution might be to add a "Clear" button to the jQuery UI Element to remove the field so the back button still works as intended.
Try the following:
$(document)
.on('keypress keydown keyup', '.datepicker', function(e) {
if ( e.keyCode == 8 ) e.stopPropagation();
});
Replace .datepicker with whatever selector you are using.
This should allow the backspace to work as expected in the text block but still prevent the backspace (from bubbling up the DOM) from triggering the browser back action.
Related
I'm using a jQueryUI modal dialog widget to simulate an "alert" box. It all works as expected, with keyboard input being blocked while the dialog is open, except that if I close the dialog with the RETURN or ESCAPE key then I get a stray "keyup" event hitting my application. Why is this happening, when a modal dialog is supposed to block all input?
Here's a JSfiddle demonstrating the problem - https://jsfiddle.net/kmbro/x7w6hLtg/ - and here's some code to make StackOverflow happy about the JSfiddle link :-)
$("<div/>").dialog({ modal: true, ... });
While dialog() appears to be the culprit for allowing the ESCAPE "keyup" event to leak, I don't think it's responsible for RETURN. This seems to centre on how button "click" events are generated by the RETURN key, because they fire on "keydown" whereas using the spacebar to press the button triggers the "click" on "keyup", so the dialog has closed before the "keyup" event occurs. You can see this by pressing the Click Me! button by tabbing onto it and pressing RETURN - the dialog opens on "keydown". If you press the button using SPACE instead then the dialog doesn't open until the "keyup" when you release the key.
The question is, what's so special about RETURN that is triggers a "click" event on "keydown" and not "keyup"?
It seems that the RETURN key triggering "keydown" - "click" - "keyup" is simply the way browsers work - see https://bugs.jqueryui.com/ticket/15194 - so I'll just have to learn to live with it.
Working on my first jQuery Mobile app. There is a localStorage value that must have a value throughout the application, so I tapped into the pageshow event to check this value:
$(function () {
$("div[data-role='page']").on("pageshow", function (event, ui) {
if (getValue() == null) {
// show the dialog
$.mobile.changePage("#dialog");
}
});
});
This works when navigating through the various pages, but never gets called when the first page loads. I tried to copy the above If statement again below the part where I add the pageshow listener, but it has the effect of showing the dialog, hiding it, then showing it again.
On that first page, it seems like opening the dialog is triggering pageshow (which is strange, considering my selector), which in turn triggers another dialog. Does anyone have advice on how to get around this, or a better way to go about the whole thing?
UPDATE #1: I tried
$.mobile.changePage( "#mypage", { allowSamePageTransition: true, transition: "none" } );
but it had the same effect as my original problem where it launches the dialog, then hides it, then shows it again. It seems like somehow launching the dialog is firing the pageshow event, even though I tried to filter that out in my selector. Note that if you remove the transition: "none" option, the dialog does not appear at all.
UPDATE #2: I also tried to create a blank initial page, then do a simple page transition
$.mobile.changePage("#mypage");
but it still does not have the correct behavior. In this scenario, it does take me to the next page, but the pageshow event does not fire, because my dialog does not appear. I know it is not firing because I can select another page from my navigation menu and the dialog does appear.
UPDATE #3: I changed my selector where I attach the pageshow listener. Instead of selecting where data-role="page", I am selecting the specific pages by their id. Then I re-tried both of the approaches I described in my previous two updates, but it still works incorrectly. First, when I try to refresh the initial page using allowSamePageTransition, it seems that pageshow fires twice, because the dialog launches twice. Then, when I try using a blank initial page, and then do a redirect immediately after I attach the pageshow listener, nothing happens and the dialog never appears. If I navigate to any other page, the dialog works as expected. I don't understand why this first page is so troublesome.
Set a time interval to show the dialog, rather than call it once the page is shown.
$(document).on('pageshow', '#myPage' ,function () {
if (getValue() == null) {
setTimeout(function () {
$.mobile.changePage('#dialog');
}, 100); // delay above zero
}
});
This way, the dialog will popup on pageshow event and only once.
update
I found this interesting jQueryMobile events diagram on this blog. It explains why a dialog or a popup is fired twice on the first page and not on the rest of the pages in case of multi-pages structure. It seems it fires once the page is ready into DOM and again when on pageshow. Setting a timeout prevents the dialog from firing on pageinit, and therefore skips that event until pageshow is triggered.
Image / diagram source: http://bradbroulik.blogspot.co.nz/2011/12/jquery-mobile-events-diagram.html
Most probably is that on first page, that event is already fired when your piece of code is executed. Which explains why you get nothing only on the first page.
About your second point, it's normal since, changePage will "change" the page to the dialog, and once you close the dialog, it will return to your previous page. Thus, the if is executed 2 times.
My suggestion is that for the first time you enter the first page, you can re-transition to the same page just after you register the callback for the pageshow event.
I used "pagecreate" and that seems to solve my problem (so far...)
$(document).on('pagecreate', "#page-formyID", function () {
//whatever
});
I am using jQuery UI buttonset for an on/off pair of buttons, mainly because of the nice styling you get with it. I want to handle clicks so that when you click one of the two buttons you get a dialog where you can make some more choices, and after that the page reloads with the buttons in their new state (if the state was changed, which may not be the case).
The problem is that the button that you click gets styled as selected before any click handlers are called, it seems. I don't want the selection to change, I want to do that manually.
It seems that the click event is bound to the label that jQuery UI creates, and I'm struggling a bit with unbinding it. I guess I'm also asking if there is some other way to get the style without the function... since buttonset doesn't offer any event handlers I need to catch the click events myself anyway.
The solution I'm thinking of right now is simply copying the html that buttonset generates into my code, keep the css and remove the buttonset call. I thought it might worth it to check on StackOverflow before giving up though. :)
Since jQuery UI doesn't trigger any events that run before for the actual selection is made the workarounds to accomplish this are going to be relatively hacky. The best idea I could come up with is to programmatically remember the previously selected option and then attach a click handler that determines whether you should revert jQuery UI's selection of the new button or not.
$('#parent_container').buttonset();
var selectedButton = $('#parent_container :checked');
$('.ui-button').on('click', function() {
setTimeout(function() {
//Insert your actual check here.
if (true) {
selectedButton.attr('checked', true);
$('#radio').buttonset('refresh');
} else {
selectedButton = $('#parent_container :checked');
}
}, 1);
});
The setTimeout is necessary to ensure that this runs after jQuery UI's click handler. Since you're showing a dialog you might need to alter this to instantly revert the selection, but remember what the user attempted to select for future use.
I have an example of always refusing the user's selection here - http://jsfiddle.net/tj_vantoll/s6XTu/14/
Obviously this is not an ideal approach but it does work. jQuery UI should really add support for selection events; I'll try to get around to filing a ticket for this. The button plugin is due for some updates in 1.11 - http://wiki.jqueryui.com/w/page/12138038/Roadmap.
I'm using iOS 5.0.1, and Sencha Touch 2-rc1. I have a search input field where the focus event is getting triggered, as well as the submit event when I press 'Search' on the on-screen keyboard. The blur event doesn't get triggered when I expect it to, which would be when the 'Done' key is pressed, or the viewable area is tapped.
Note that the blur event IS getting triggered on my laptop in Chrome.
Not every element is focusable. At least <div> is not.
onblur is not firing because when a user taps on a div element, the focus doesn't go to the <div>.
Based on this post:
http://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex
tabindex on the correct div element can make a div focusable.
This is likely to be related to the event not "bubbling" up through the DOM. Or perhaps the code you've used includes an event.preventDefault(), but that would have killed more than just blur. I've also had this issue with clicking away from items which appear via javascript.
http://www.quirksmode.org/dom/events/blurfocus.html
Using jQuery Mobile (jquery.mobile-1.0b3.min.js). If i apply a click event to a form, the back button seems to get the click event binding as well. It does this no matter how specifically targeted to an element the selector is. For example:
Using this to set the back button:
Copy code
<div id="pagename-page" data-role="page" data-add-back-btn="true" data-back-btn-theme="b">
And this in a script file:
Copy code
$('#awards-details-page').live('pagecreate', function(event){
$('#awards-details-page input[name=submit]').bind('vclick', function() {
console.log('I'm going to be hijacked by the back button.');
});
});
Clicking on the back button will produce the message in the console when tested in a browser.
Every time you visit the page with the script, it will add another duplicate binding. Attempts to unbind the click event on the pagehide event worked with the targeted element, but back button's bindings persisted.
Can anyone shed some light on this?
Thank you in advance.
dont use vclick you will ge ghost, they have improved CLICK so just use that
also live is not bind... bind is to an element that exist, live is for all elements that have that shared property, before after and during. you past pages exist so you have a set of binded items now not just one for the page you are on. i would scrap the whole back button element and have your own clickable item, for this you can do your own back code and add attributes like data-backto = "#page1", you can then control better what happens when a back button is clicked, especially as android phones have there own back button too.