I have several jQueryUI dialogs with Ok and Cancel and radio buttons (no text input).
My requirements are:
OK button should be right of the Cancel button and Ok button should be in focus:
when the dialog opens,
after any user click or drag.
Requirement no 1 can be implemented by giving the Ok button an id and the following code:
open: function(event, ui) {
$('#OkButton').focus();
},
Requirement no 2 is harder. It could be implemented by defining focusing delegates for a lot of events:
.ui-dialog-titlebar click
.ui-dialog-buttonpane click
dragStop
etc
But surely there must be a simpler way?
Try this code. myDialog is main dialog div When you drag your dialog this will do the job
jQuery('.myDialog').bind('move', function(e) {
$('#OkButton').focus();
}).bind('moveend', function() {});
and when you click on your dialog main div this will do the job.
jQuery('.myDialog').click(function(){
$('#OkButton').focus();
});
Related
I'm following the modal dialog example on jQuery UI website but not having any luck getting the dialog to be displayed. The example creates and opens the dialog from a button-cllick but I'm trying to launch it from a click on a TD element. Is that possible?
Assume that your td element has clickable_td id and also your dialog block has dialog id, So you can attach click event handler for td emelent with the on() function object and show your dialog block with dialog() function object while clicks captured like this:
$('#clickable_td').on('click',function(){$('#dialog').dialog();});
NOTE: The default jQuery z-index is 100, if your layouts' elements have higher value of it, try this instead:
$('#clickable_td').on('click',function(){$('#dialog').dialog();$('div.ui-front').removeClass('ui-front').css({zIndex: "10000"})});
This code basically creates a block UI. Instead of using jquery block UI dialog, you can use jquery blockUI plugin. You can refer the link to understand the code.
http://www.malsup.com/jquery/block/#demos
In the below example #yourtd_id is the id of your td and #your_div is the div which you want to make as modal. When the td is clicked .blockUI is a class which display your_div on the screen. Now it like a modal dialog. To come out of the modal dialog insert a button on #your_div and give id as #cancel_btn. When the #cancel_btn is clicked .unblockUI() unblocks the UI i.e unblocks the modal dialog.
$(document).ready(function() {
$('#yourtd_id').click(function() {
$.blockUI({ message: $('#your_div') });
//keep a cancel button on #your_div. for eg: consider its id as #cancel_btn
});
$('#cancel_btn').click(function(){
$.unblockUI();
});
});
This will work.I hope this will help you.
$('#ac').autocomplete({
source: '/url',
appendTo: $('#ac').closest('.popupWindow'),
select: function (event, ui) {
// do stuff
}
});
in IE9 first time everything works fine, but when i type text is second time, elements don`t reacts on clicks
error appears only when using appendTo option
solve it: on one of parent elements was click event handler with e.stopPropagation()
I am using a jQuery dialog and I would like to add some functionality to the close button in the upper right and corner of the dialog frame. Can I accomplish this by simply adding a close function to the dialog without it affecting the cancel button contained within the dialog? Meaning the cancel button obviously closes the dialog and performs its own function but the close button in the dialog frame needs to do something else. Hopefully I have explained that clearly enough.
If you are using the buttons options within the dialog, and one of them is Cancel, then yes. You can obviously create your own function for the Cancel button and then a seperate one with the close event. Just to be safe, you'll probably want to include preventDefault() in the function for your Cancel button.
$('#dialog').dialog({
buttons: {
"Ok" : function() {
//perform whatever
},
"Cancel" : function(e) {
e.preventDefault();
//perform whatever
},
close: function() {
// perform special CLOSE function
}
});
Actually I used this method below to accomplish this. It seems to work just fine so I don't know if there are any drawbacks with going this way. Here is the code:
$("#dialog").dialog({
...dialog code goes here...
}).bind('dialogclose', function(event, ui) {
... dialog close code goes here...
});
I suppose the answer above is better as it is clearer and cleaner implementation.
I am using jQuery tabs, each tab has variable heights.
When I select a tab I need to refresh the content in a div to accomodate the window scroll appearing/disappearing.
Looking at the API documentation for the tabs plugin there is load event and a select event. I cannot seem to find any other events I can plug into.
The load event works fine but when selecting a tab that is already loaded the select event fires before the content is displayed.
$("#tabs").tabs({
cache: false,
select: function (e, ui) {
// running the event here will not work as it runs before the content is diplayed
},
load: function (event, ui){
// running it here works ok as it fires the event after the content is displayed
}
});
I need the event to fire after the content is displayed.
Is there an event I can plug into for this particular behaviour?
The JqueryUI 1.8 API documentation describes the show and select events.
If show doesn't work, then perhaps configuring a timer in the select handler to refresh the div a few milliseconds later will do the trick.
For jqueryUI's tabs, I'm familiar w/ adding a function to the show event, as described in this question. However, is there a way to add a function when a tab is unloaded or loses focus? I see there is a hide function, but my function doesn't get called when I click away from a tab (to another tab).
Here is my code:
$("#myTabs").tabs({
selected: tab,
show:
function (event, ui) {
//some code that works
},
hide:
function(event, ui) {
//some code that never gets called
}
});
Instead of trying to accomplish something during the hide function, I added a custom function in my "select". You can read more about it on this other question.
Jquery Tabs showing a confirmation before activate