I want to open a jQuery UI dialog when a user presses enter or space on a given element. It appears that the enter/space keys are being processed by the dialog, however, causing the default element (the cancel button) to be pressed. The dialog is closed almost as soon as it opens.
Here is a simplified demonstration:
<script type="text/javascript">
function Go() {
$("#dialog").text("Are you sure?").dialog({
modal: true,
buttons: {
Cancel: function() {
$("#dialog").dialog("destroy");
},
OK: function() {
$("#dialog").dialog("destroy");
}
}
}); // end .dialog
}
</script>
<input type="button" value="Test" onkeydown="Go()" />
<div title="Dialog" style="display: none;" id="dialog"></div>
If the button is given focus and then the user presses space the dialog opens and then immediately closes. If the user presses enter, the dialog closes so quickly it doesn't even flash (at least that was my experience with Firefox 3.5.3)
How do I prevent the dialog from processing the key from the onkeydown event which caused the dialog to open?
Try onkeyup if there is one. If it works, I'll give you the explanation(Busy).
Edit Explantion:
It's mainly because the onkeydown event does not get called once, it gets called continually while it's pressed down, and since computers opperate so fast(1 second is eternity to them) it get's called many times during one push down. The solution is not to call it when it's pushed down, but call it on the up part(when you let go).
Happens all the time in electronics with switches and logic gates etc. I forgot the technical terms.
Related
I'm developing jQuery Mobile (jQm) app.
I wanna utilize taphold event to some crucial elements, such as remove button, to assure, that this element is secured from unwanted trigger.
I created Remove button on jQm popup and aded some JS to it, but I cannot force default action to quit, not with event.preventDefault() and event.stopImmediatePropagation(), nor with return false.
I prepared jsFiddle as duplicate of my code. The popup there contains simple progress bar as indicator of holded tap. You can try it here: jsFiddle (note: HTML5 data tag taphold="true" is not jQm default)
As a workaround, I'm currently replacing <a href="#" data-role="button"...></a> with <div>styled like button. This works well, since it doesn't have any default action, but I'm curious why the "proper" solution doesn't work?
$("a:jqmData(taphold='true')").bind("vmousedown vmouseup", function(event) {
event.preventDefault();
event.stopImmediatePropagation();
The event.preventDefault(); and event.stopImmediatePropagation(); used in the above piece of code, refer to the vmousedown and vmouseup events and not to every event which is bound to the selected element(s).
This means that the default behaviour for the click event still exists. So when you click the remove button, the click event is triggered and that's why the pop up closes immediately.
I hope this helps.
In my jQM - Backbone app I add a dialog programmatically if a certain condition is true, like this
$('body').append('<div data-role="dialog" id="interlink" data-theme="b" data-close-btn="none" data-url="insignificant"></div> ');
// remove dialog from DOM on pagehide
$("#interlink").on('pagehide', function () {
$(this).remove();
// remove this views popup-containers
$('#interlink-video-popup-popup').remove();
});
Beside other content in the dialog there is a button to open a popup widget to play a video clip and a close button to close the dialog. The code for closing the dialog looks like this:
backBtnHandler: function(e) {
e.preventDefault();
$('#interlink').dialog('close');
$(this).remove(); // all DOM listeners get removed as well by jQuery
}
This works all well if the video clip is watched in full length, the popup widget closes on ended and the user clicks the dialog close button to close it.
A requirement is when the video clip is playing and the user scans another NFC tag the video should stop, trigger an ended event and close the popup. This is also working, however the dialog should also close. Here is a simplified code snippet with a timeout to simulate a NFC scan:
INTERPRETOUR.interlinkVideoPlayer = $('#interlink-video-player')[0];
// bind onended event to close the popup
$(INTERPRETOUR.interlinkVideoPlayer).on('ended', function() {
$('#interlink-video-popup').popup('close');
INTERPRETOUR.interlinkVideoPlayer = 'undefined';
$('#interlink-back-btn').trigger('click');
});
// play video
INTERPRETOUR.interlinkVideoPlayer.src = 'http://mydomain.ca' + this.model.get('video')[0].url;
INTERPRETOUR.interlinkVideoPlayer.play();
setTimeout(function() {
$.publish('item', '2479');
}, 5000);
The issue is that $('#interlink-back-btn').trigger('click'); invokes the backBtnHandler but pagehide is never triggered and so the dialog doesn't close.
Any help to resolve this issue would be much appreciated.
Instead of invoking a button using .trigger('click'), bind closing when popupafterclose event triggers.
Demo 1 / Demo 2
Static Popup
$('#popupID').on('popupafterclose', function () {
$('#dialogID').dialog('close');
});
Dynamically generated Popup
$(document).on('popupafterclose', '#popupID', function () {
$('#dialogID').dialog('close');
});
Using jquery mobile 1.2, I have a popup menu (OK/Cancel) which should be answered before changing to a new page. But the page changes (and the popup disappears) before it is clicked:
if (rider.time.valueOf() > 0) {
$('#popupMsg').text("Rider has already finished; update the time?");
$('#alreadyFinished').popup("open");
}
alert("rf");
// other code.......
$.mobile.changePage("#finishLine");
// other code.......
I put in the 'alert' just to prove that the popup does actually appear - there it is, behind the alert, but the popup closes (and the page changes) as soon as the alert is clicked. Also tried removing the 'other code' but still the same problem.
Here's the html:
<div data-role="popup" id="alreadyFinished" class="ui-content">
<p id="popupMsg"></p>
<a data-role="button" data-theme="b" id="OKBtn">OK</a>
Cancel
</div>
Even without the buttons in the popup, the popup doesn't persist. So what's wrong?
A jQuery Mobile popup is part of a page. Changing the page will close any current popup, so you should not directly call it following the opening of a popup. The following code would open your popup and not close it.
if (rider.time.valueOf() > 0) {
$('#popupMsg').text("Rider has already finished; update the time?");
$('#alreadyFinished').popup("open");
} else {
alert("rf");
// other code.......
$.mobile.changePage("#finishLine");
// other code.......
}
If you want your popup to be modal, the simplest way is to bind the execution of the rest of your code to the closing of the popup. For instance, if you want the restOfCode function to be run after the popup is closed:
$('#alreadyFinished').popup("open");
$( "#alreadyFinished" ).on({
popupafterclose: function(event, ui) {restOfCode()}
});
I am trying to display a confirm dialog when a user tries to close a window by click the 'X' in the top right corner. If the user goes for 'OK' option, I would like to continue closing the window but if the user presses the 'Cancel' button I would like to prevent the window from closing. Is there a way to do that?
For Razor:
#(Html.Telerik().Window()
.Name("Window")
.ClientEvents(events =>
.OnClose("preventClose")))
<script type="text/javascript">
function preventClose(e)
{
var shouldClose = confirm("Are you sure you want to close?");
if (!shouldClose)
{
e.preventDefault();
}
}
</script>
Tested and working. Note that this function is called when they click on the X or if you call $("#Window").data("tWindow").close(); so unless you have some validation check like I demonstrated you won't be able to close the window. I don't see a way to distinguish between clicking on the X and calling $(window).close() manually.
I was able to figure out the solution to my problem on my own:
If you do e.preventDefualt(); in the onClose event it would prevent the window from closing. There is a mention in the documentation that the onClose event is cancellable but nowhere does it say how to cancel the onclose event.
I have a jQuery UI dialog which hosts a number of buttons.
I would like to have keyboard control (tab-navigation) on these buttons, so on the open event handler for the dialog, I set the first button to focused.
I can visibly see this works, and also verify it using document.activeElement, but the focus is then stolen and something else gets focus.
By this time, I don't know how I'm supposed to see what has focus as I don't have any further hooks.
Has anyone else noticed a similar problem?
In case you're interested, my code is this (amended to add Focus as described below)
in doc.ready - note I've also added jQuery Buttons to it - but they don't seem to respond to keyboard events AT ALL - but that's a separate question.
$("#dialogSearchType").dialog
(
{
bgiframe: true,
height: 180,
width: 350,
modal: true,
autoOpen: false,
show: 'drop',
hide: 'fold',
buttons: { "Street": function() { HandleSearchStreetClick(); $(this).dialog("close"); },
"Property": function() { HandleSearchPropertyClick(); $(this).dialog("close"); }
},
focus: function(event, ui) { $("#btnSearchTypeProperty").focus(); }
}
);
<div id="dialogSearchType" class="searchDialog" style="width: 280px; display: none" title="Search For..." onkeyup="HandleSearchTypeDialogKeyUp(event)">
<span>What would you like to search for?</span>
<br />
<input type="button" tabindex="1" id="btnSearchTypeStreet" class="button" value="Street" onclick="HandleDialogSearchStreetClick()" />
<input type="button" tabindex="2" id="btnSearchTypeProperty" class="button" value="Property" />
</div>
As you can see I've tried adding event handlers along the way, but nothing happens!
Try using the focus event handler instead of the open event handler and see if that helps. I think it's probably more correct since, unless the dialog is modal, you probably want the default button to get focus each time the dialog gets focus anyway, not just when it opens. If that doesn't work, then I'd suggest you add the code to your question.
Okay, I see what the problem was.
The dialog is set as Modal.
jQuery will be intercepting the keyboard events at the document level, and cancelling them.
I think that sucks, so am trying a workaround to destroy this event handler and add my own.
PS If anyone knows how to do this off the top of their head, let me know!
Here you can find an interesting solution that worked for us
jQuery UI Focus Stealing