Jquery dialog close funcationality - jquery-ui

Question

I am having a Jquery dialog with two buttons Add and Cancel. User will input few fields and on pressing Add button, I am doing UI modifications and validations. After all the operations are done, I am closing the dialog. But issue is, even though I am closing the dialog after save and other operations, but the dialog is getting closed before the operations gets completed.
Below is my Jquery dialog code,
dlg.dialog({
height:300,
width:600,
modal:true,
autoOpen:true,
title: "Add Property",
closeOnEscape:true,
buttons: {
"Cancel": function() {
$(this).dialog("close");
},
"Create Property": function() {
//Validate Property
// Save Property
$(this).dialog("close");
}
}
}
});
function save() {
$.ajax({
type: 'POST',
url: ServiceUrl,
data: parameter,
success : function(data) {
// Convert the response text to JSON format
var jsonData = eval('(' + data + ')');
if (jsonData.results) {
// success
}
}
});
};
In above code I am executing $(this).dialog("close"); after validate and save function but my dialog is getting closed , before these function finishes. This behavior doesn't happen if I execute line by line by keeping breakpoints in firebug. Please help in resolving and help me in understanding. Thanks in advance.

Answer 1

Since the .ajax() call(s) are asynchronous, the $(this).dialog("close"); does not wait for the .ajax() call to finish. Put the dlg.dialog("close"); inside the success of the .ajax() call after you see that the save/validations were successful.
dlg.dialog({
height:300,
width:600,
modal:true,
autoOpen:true,
title: "Add Property",
closeOnEscape:true,
buttons: {
"Cancel": function() {
$(this).dialog("close");
},
"Create Property": function() {
//Validate Property
// Save Property
$.ajax({
success: function (response) {
//test to see if the response is successful...then
dlg.dialog("close");
},
error: function (xhr, status, error) {
//code for error condition - not sure if $(this).dialog("close"); would be here.
}
})
}
}
}
});

Answer 2

Your logic should look something like:
dlg.dialog({
height:300,
width:600,
modal:true,
autoOpen:true,
title: "Add Property",
closeOnEscape:true,
buttons: {
"Cancel": function() {
$(this).dialog("close");
},
"Create Property": function() {
$.ajax({//Validate request
...
success:function(response){
$.ajax({//Save request
...
success:function(response){
//close the dialog here
}
});
}
});
}
}
}
});
Either you can chain your ajax calls like this, or you can make them asynchronous by passing an async:false option.

Answer 3

I understand the need for a global "save" function, as it eliminates the need to write the same script over and over again.
Try doing something like this:
dlg.dialog({
height: 300,
width: 600,
modal: true,
autoOpen: true,
title: "Add Property",
closeOnEscape: true,
buttons: {
"Cancel": function () {
$(this).dialog("close");
},
"Create Property": function () {
save(true); //!!!
}
}
});
And then:
function save() {
$.ajax({
type: 'POST',
url: ServiceUrl,
data: parameter,
success: function (data) {
// Convert the response text to JSON format
var jsonData = eval('(' + data + ')');
if (jsonData.results) {
//!!!! Then close the dialog
dlg.dialog("close") //!!!!
}
}
});
}
This way, your close function is not called until the AJAX response is received.
EDIT: I would also set the dlg variable and the save() function-name as globals by attaching them to the window object like so:
window.dlg = $("#myDialogElement");
window.save = function () {
//function stuff here
}
This will ensure they're always available.