CODEWITHSUNDEEP
jquery
commit
commit

Reputation: 4807

How to close dialog box

I have very strange behavior, I am closing the dialog box in complete event of ajax call using this 

     $.ajax({ 
        url: "",
        data     : { },
        type     : "POST",  
        dataType : "text",
        cache    : false,
        success: function(response) { // on success..
        },
        complete : function() {
             $("#dialogDiv").dialog("close");
             $("#dialogDiv").dialog("destroy");
             $("#dialogDiv").remove();
        },
        error : function(errMsg)
        {

            console.log("AJAX : submit : error");
            console.log(jsonToString(errMsg));
        }
    });

However my issue is it sometimes close and sometimes not in my local server, and many times it does not working on production sever, I am really not able to find out what is issue. Is there any way to forcefully close the window in complete event? Or anything other?

Upvotes: 0

Views: 235

Answers (3)

Gaurav Wadibhasme
Gaurav Wadibhasme

Reputation: 11

If this is happening randomly then you can close dialog on success and error event separately as follow:

 $.ajax({ 
    url: "",
    data     : { },
    type     : "POST",  
    dataType : "text",
    cache    : false,
    success: function(response) { // on success..
         if(reponse == "correct"){
            $("#dialogDiv").dialog("close");
         }
    },        
    error : function(errMsg)
    {
        $("#dialogDiv").dialog("close");
        console.log("AJAX : submit : error");
        console.log(jsonToString(errMsg));
    }
});

Upvotes: 0

commit
commit

Reputation: 4807

I found solution, Very strange behavior but it is working, instead of closing popup in complete event i do close it in done event, and it is working

    $.ajax({ 
        url: "",
        data     : {},
        type     : "POST",  
        dataType : "text",
        cache    : false,
        success: function(response) { // on success..

        },
        complete : function() {

        },
        error : function(errMsg)
        {
            console.log("AJAX : submit : error");
            console.log(jsonToString(errMsg));
        }
    }).done(function() {
        $("#dialogDiv").dialog("close");
        $("#dialogDiv").dialog("destroy");
        $("#dialogDiv").remove();
    });

Upvotes: 1

Brombomb
Brombomb

Reputation: 7076

Check your source code, and make sure you aren't popping multiple dialogs. Since you are using an id jQuery will only act upon the first DOM element with the matching id (since id's are supposed to be unique to the page).

If you want to close all the dialog's then I suggest moving your $("#dialogDiv") to a class and using the class selector . as such $(".dialogDiv")

Finally, you should cache your selectors, or even better leverage chaining Quick Guide: Chaining in Jquery.

Cache example:

var $dialogDiv = $('#dialogDiv");  // use the $ in the var to say -- Hey this is a jQuery object
$dialogDiv.dialog("close");
$dialogDiv.dialog("destroy");
$dialogDiv.remove();

This is useful if you need to reuse the selector multiple times. Otherwise you are forcing javascript to reparse the entire DOM structure for the same element.

Chaining Example:

$("#dialogDiv").dialog("close").dialog("destroy").remove();

This works because jQuery returns an object after performing the action. You probably don't need close or remove in this case because destroy should take care of it for you, but I wouldn't have much of an example without them.

Upvotes: 1

Related Questions