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
Related
I am trying to do something similar to what this page is doing.
The only difference is that the jQuery UI dialog I use is modal.
I tried editing the script in the page to make the jQuery UI dialog modal.
$("#dialog-modal").dialog(
{
modal: true, // added this line to make dialog modal
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
maxHeight: 300,
initCallback: function()
{
this.code.set('<p>Lorem...</p>');
}
});
}
});
I then clicked on the insert link button(the 3rd button from the right in the toolbar). This shows another jQuery UI modal dialog with a form.
I noticed that I cannot get the focus of the text fields. I cannot type anything into them.
The code works fine if I don't make the the first dialog modal.
Any idea how to circumvent this?
I ran into the same problem. This behavior is a result of jQuery UI handling focusin.dialog event on the document, and putting the focus back to the last jQuery UI dialog in the stack (using selector ".ui-dialog:visible:last"). I solved the problem by calling this code right after my modal dialog was created:
setTimeout(function() {
$(document).unbind("focusin.dialog");
}, 100);
I used setTimeout, because jQuery UI also uses setTimeout to bind this event. I was able to fix it thanks to this answer: jQuery UI Focus Stealing. I also tried upgrading to jQuery UI 1.11.4 but that does not solve the problem.
I have a jqm radio button that looks like this:
<div data-role="controlgroup" data-type="horizontal">
<h3>Type</h3>
<input type="radio" name="type" id="deposit_typeTotal" value="t" checked/>
<label for="deposit_typeTotal">Total</label>
<input type="radio" name="type" id="deposit_typeIndividual" value="i"/>
<label for="deposit_typeIndividual">Individual</label>
</div>
It's part of a phonegap application which I'm currently testing on an android galaxy s2, which is where I'm seeing the problem. I've never been able to get it to break in Google Chrome on the desktop.
I have an click event attached to this button which calls a function which does various things, but I've modified it to alter the title to the value of the button to aid my debugging.
var type = $("#deposit input[name=type]:checked").val(); // Gets the value of the checked button
app.count++;$(".depositOrPayment").html(app.count+"/"+type); // Sets the title of the page
So what I'm seeing is the number of times the function has been called / t or i depending on which button I click. However, sometimes (particularly if I click the buttons quickly) I get undefined as the button's value. Once this happens, it stays as undefined no matter how many clicks I do.
Anybody got any ideas?
Cheers
Graham
There is a difference between click and tap. A tap has about a 300ms delay (around that). Anyway, you can also bind to the tap & click event in JQM (virtual mouse events).
$('#element').on('tap', function() {
...
});
or
$('#element').on('click tap', function() {
...
});
Read this: http://phonegap-tips.com/articles/fast-touch-event-handling-eliminate-click-delay.html
So there is FastClick https://github.com/ftlabs/fastclick
Check this out What is the difference between the click and tap events?
And this http://phonegap-tips.com/articles/fast-touch-event-handling-eliminate-click-delay.html
EDIT: I made this a wiki in the hopes that someone can answer it better than me :)
I am trying to use the jQuery Tool tip function and from the examples I am having issues altering the code for the function I am after.
http://jqueryui.com/tooltip/#forms
I have several coulored Circle area maps that I want a tool tip to pop up from when one is clicked on.
The following function works but it also pops up a tool tip when mousing over the element. Then when you click on it another tool tip pops up.
So What I need, is to change the function to only pop up "on click" and then to fade away after a few seconds.
jQuery:
$(function() {
var tooltips = $( "[title]" ).tooltip();
$( "#01-001" ).click(function() {
tooltips.tooltip( "open" );
})
});
HTML:
<area id="01-001" shape="circle" coords="99,71,10" href="#" alt="01-001" data-maphilight='{"stroke":false,"fillColor":"FF0000","fillOpacity":1,"alwaysOn":true}' title="Tool Tip Messgae." />
Thanks Guys.
Samuel
The simplest solution would be to wait until the click event to instantiate the tooltip. You're getting them on hover because you instantiated them all at once.
There's a detailed answer by here.
I'm using the jQuery UI Datepicker for a project, but need the today button to enter the date into the textfield when a user clicks on it. By default it just selects the date but doesn't enter it into the field. I'm guessing this will just require a quick mod of my jQuery UI file, but what do I change? Thanks.
Edit: I tried this: http://dev.jqueryui.com/ticket/4045 but it doesn't work!
I found a solution that works here: http://forum.jquery.com/topic/jquery-ui-datepicker-today-button. Just use this snippet of jQuery (I just put it in with my datepicker init code):
$('button.ui-datepicker-current').live('click', function() {
$.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide');
});
The only problem I had was that focus would remain in the input box after clicking the "today" button, which means you cant click it again to select a different date. This can be fixed by suffixing blur():
$('button.ui-datepicker-current').live('click', function() {
$.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur();
});
I also didn't like the styling on the "today" button - maybe it was just my theme or something, but the today button was kind of greyed out compared to the "done" button. This can be fixed with the following CSS (may vary for different themes, i'm not sure):
/* This edit gives five levels of specificity, thus making it override other styles */
.ui-datepicker div.ui-datepicker-buttonpane button.ui-datepicker-current {
font-weight: bold;
opacity: 1;
filter:Alpha(Opacity=100);
}
I realize this is somewhat of a late reply, but I just ran in to this issue and the solution proved works like a charm.
However, the button-styling issue is caused by jQuery ui classes.
I added the following code to the click action of the date text-input:
$('.date').click(function() {
$('button.ui-datepicker-current').removeClass('ui-priority-secondary').addClass('ui-priority-primary');
});
This removes the wrong class, and adds the correct class to the button, making it the same as the "Done" button.
It should not matter what theme you are using.
For completeness, here's my entire code:
$('.date').datepicker({
dateFormat: 'yy-mm-dd',
showButtonPanel: true
}).click(function() {
$('button.ui-datepicker-current').removeClass('ui-priority-secondary').addClass('ui-priority-primary');
});
$('button.ui-datepicker-current').live('click', function() {
$.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur();
});
Just add a <input type="text" class="date" value="" />, and you're good to go.
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.