Develop Reference

Close jQuery UI Dialog on mouse click outside of box

So I have some jQuery UI Dialogs and for user usability I think it would be best if users would be able to close the dialog box when clicking outside the box instead of having to click the small close button on the dialog box.
jQuery Code:
$(document).ready(function() {
var dlg=$('#createTeam').dialog({
title: 'Create a Team',
resizable: true,
autoOpen:false,
modal: true,
hide: 'fade',
width:600,
height:285,
clickOutside: true, // clicking outside the dialog will close it
clickOutsideTrigger: "#addEngineer",
close: function(event, ui) {
location.reload();
}
});
$('#createTeamLink').click(function(e) {
dlg.load('admin/addTeam.php');
e.preventDefault();
dlg.dialog('open');
});
});
Can anyone advise on what I need to add to the code above to be able to close the dialog box on mouse click outside of the box?

I'm not sure why the clickOutside : true property isn't working though I can provide a simple workaround. On the page with the modal, you can catch body click events like so:
$(document).click(function() {
dlg.dialog('close');
});
However, this will be ANY click event on the page, so we have to exclude clicking on the modal from firing this event handler. It seems you have already done this with e.preventDefault() however, so add the above code and it should work. A better solution would be to include a modal backdrop in your modal HTML, and catch click events on that. If you provide your HTML I'll give you an example of this.

jQuery reset validation on a form in a dialog

I've been struggling to reset a form within a dialog window upon close. My form is using jQuery validate and I've tried to use the documented resetForm() function, but no luck.
Below are two attempts on how I am trying to achieve clearing the form upon the user hitting "Close". Neither are working.
Here's the jsFiddle: http://jsfiddle.net/FjT7T/6/
$("#myDialog").dialog({
autoOpen: false,
close: function(event, ui) {
// Attempt to reset the form using JQuery validates resetForm(), not working.
var validator = $("#myForm").validate();
validator.resetForm();
// Attempt to reset the form and remove the error classes, not working either.
$(this).closest("form")[0].reset().removeClass("error");
}
});

Have you tried plain javascript reset?
document.getElementById('myForm').reset();
Or even jQuery, but with the form's id:
$("#myForm").reset();
And to remove the class, why note use the #id
$("#myForm").removeClass("error");

How can I provide a hook in a jQuery ui dialog button click?

I don't know much about writing good javascript so perhaps I am thinking about this in the wrong way, but here is the situation.
I have a page which contains various plugins, each with an edit button.
So there is for example an HTML plugin, a Twitter plugin etc.
Once you click on the edit button a jQuery UI dialog box is displayed via a common function which all of the edit buttons call.
The content of the dialog is filled with that particular plugin's update form.
The dialog created by this common function also provides a "Save" and a "Cancel" button automatically.
Since both of these "Save" and "Cancel" buttons are created by the dialog they are both assigned closures to the "click" option.
What I want to do, if possible, is provide some sort of hook function which can be run when the "Save" button is clicked, which can be defined by the javascript in each of the plugin's update forms.
I think I have explained enough now so here is some sample code:
This would tell each of the edit buttons to create a dialog box and fill it with the appropriate content.
// This function is called by each edit button
// on a click event which passes the required ids
function update_form_dialog(plugin_id) {
$.post(
'/get_plugin_update_form',
{
'plugin_id': plugin_id
},
function(response) {
var dialog = $('<div class="update_form"></div>').appendTo('body');
dialog.dialog({
open: function() {
dialog.html(response);
},
show: 'fade',
modal: true,
title: 'Update plugin',
width: 'auto',
height: 'auto',
buttons: [
{
text: 'Save',
click: function() {
// Call a hook defined in the plugin update
// form then send update data
}
},
{
text: 'Cancel',
click: function() {
// Close the dialog here
}
}
]
});
}
);
}
As you can see in the above code what I have is pretty simple, but I don't know how I can add a hook to the start of the "Save" button's click function.
Each plugin's update form is stored in the response variable and that is where the plugin update form's javascript is written.
Is there a way that I can tell the save button what to do before it runs its normal code when the "Save" button is clicked?
If anyone needs more explanation please let me know.
Any help on how I could write this would be much appreciated.
Edit:
It seems I'm having trouble explaining my problem so hopefully this edit will help make things clearer.
What I want is to execute some code which would be optionally defined in the content of the dialog box when it has been opened. This code, if defined, should be executed once the save button is clicked but before the actual click function is executed. Is this possible?

You can use a plugin for subscribing and attaching to some events like:
http://weblog.bocoup.com/publishsubscribe-with-jquery-custom-events/
http://archive.plugins.jquery.com/project/jQuerySubscribe
http://www.novasoftware.com/download/jquery/publish-subscribe.aspx
This way, on the save you can publish that the save has been done and all subscribers code will be executed.
with the third link you can do something like the following:
$(document).ready(function(){ $('.save').subscribe('save',function(){//dosomething;}})
Later on the save code you can do this:
$.publish('save');
And the code will be executed
hope it helps.

You're close!
buttons: {
'Save': function() {
// Call a hook defined in the plugin update
var code = $('textarea#input').val();
eval(code);
// form then send update data
$('form').submit();
// $.ajax({....
},
'Cancel': function() {
// Close the dialog here
}
}

radio button not selected on jquery dialog box in ajax calls

I have a problem here. I have a jquery modal dialog on which I have 2 radio buttons. In my code I have jQuery ajaxStart and ajaxStop handlers to check for Ajax requests (I also have an other jquery dialog pop up to display a Loading... message or something when there is an Ajax request executing). When I select each radio button, an ajax request is made. The problem I am having is that because of the ajax events (ajaxStart, ajaxStop), when I click on the radio buttons, they are not selected (although I get the correct value of my radio button). Any idea what might cause this?
You can see an illustration of what I meean with this jsfiddle
Thank you

It seems the problem comes from the modal: true option of the #ajax-dialog dialog. If you set the option to false, it works as expected. Upgrading to the latest version of jquery and jquery ui did not seem to resolve the problem.
Solution 1
Set the modal option to false.
$('#ajax-dialog').dialog({
autoOpen: false,
modal: false, // set to false
title: 'Loading...'
});
DEMO
Solution 2
You can use the plugin BlockUI which allows blocking the full page or an specific element. it works by showing a overlay div (over the page or the element) forbidding any interaction with the underlying content. You can display a message and customize the look&feel.
Blocking a dialog content (with the radio boxes):
$("#ajax-dialog").ajaxStart(function() {
$('#gender-dialog').block({
message: '<h1>Loading...</h1>',
css: { border: '3px solid #a00' }
});
});
$("#ajax-dialog").ajaxStop(function() {
$('#gender-dialog').unblock();
});
DEMO
Blocking the full page:
$("#ajax-dialog").ajaxStart(function() {
$.blockUI({ message: '<h1>Loading...</h1>', baseZ: 2000 });
});
$("#ajax-dialog").ajaxStop(function() {
$.unblockUI();
});
Note the option baseZ in this case, this is the z-index of the overlay, which has a default value of 1000. Set it to something higher than the dialog to cover it.
DEMO

JQuery Dialog auto focuses input field

I created a dialog and when I open it by clicking a button the first input field in the dialog's container gets focused. How can I avoid it?

A great way to battle this issue is to disable all your form inputs:
by Id
$('#inputId').attr("disabled", true);
by Class
$('.className').attr("disabled",true);
by Form
$('#formId input').attr("disabled",true);
Then on the dialog open call you can re-enable all the elements in the form or individually if that was the path you took. It doesnt really matter if you disable all of them because you are about to re-enable them all.
$("#dialogId").dialog({
autoOpen: false,
width: X,
height: Y,
open: function(event, ui) {
**$('#formId input').attr("disabled",false);**
},
close: function(){
...
}
...
});

You can always manually remove the focus by calling blur() on this field.
Or do you need that the field never gets focused?
EDIT:
In order to prevent it's focus, you can add $("firstFieldSelector").focus(function(){return false;}. It will prevent the focus when opening the dialog. This seems to work at least on ff and chrome: see http://jsfiddle.net/g9GNn/1/ (it uses the jQueryUI example).