How To Close A Jquery Dialog After An Ajax Json Call

I am using ASP.NET MVC 4, jQuery, and jQuery UI. I have a dialog on my view. When I click a button the dialog pops up, takes the values on the dialog and send its through to a ser

Solution 1:

You have to add the dialog to the page first: Put this prior to your current:

$('#errorDialog').dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    width: 330,
    title: 'My Error Dialog'
});
//current code follows:
$('#confirmationDialog').dialog({

Then what you have should work.

EDIT: I thought about this a bit, you probably need to fix the scope of the $(this) inside the success handler.

change to do:

var myDialog = $('#confirmationDialog').dialog({

and then use:

myDialog.dialog('close');

inside that handler to close the first dialog.

Solution 2:

In the getJSON callback close the window

$.getJSON( "test/demo", function( data) {
     if(data==='success'){
         $( ".selector" ).dialog( "close" );
         $( ".selector" ).dialog( "open" );
     }
});

To close the jquery UI dialog use this

$( ".selector" ).dialog( "close" );

Top Open a new dialog

$( ".selector" ).dialog( "open" );

for more info check the api of jquery UI http://api.jqueryui.com/dialog/#method-close

Solution 3:

var dialogAviso; 

    url = "search.php";
    $.ajax( {
            "type": "POST", 
            "url": url, 
            "data": data, 
            "global": false,
            "async": true,
               "success": function(html){
                    msg_title ="Search";
                    msg_width = "600px";
                    showDialog(html,msg_title,msg_width);
                }
         } );           


functionshowDialog(texto, titulo, width,height){
.......................
// IMPORTANT: send info to the aux variable, so you can access it from the dialog.
    dialogAviso = $('#divaviso').dialog({
        autoOpen: true,
        width: width,
        height:height,
        modal:true,
        resizable: false,
        title: titulo,
        dialogClass: 'dialog',
        closeOnEscape:true,
        beforeClose: function(){
        },
        close: function(event, ui) { 
            $(this).dialog( "destroy" );            
        },
        show: "slide",
        zindex: 100,
        stack:true,
        buttons: {} 
    }); 
    $('#divaviso').html(texto); 
}


search.php: 
<table><tr><td><astyle=\"text-decoration:underline;cursor:pointer;\" onclick="returnInfo(8)">Hello World</td>';
    </tr></table>

functin returnInfo (id){
// Do something with the selected item

// close dialog
dialogAviso.dialog("close");

}