Question

I am invoking a jquery modal dialog in which I have a save button. The save button in turn makes an ajax call and on success an alert box is displayed “Data Saved ! ” with an OK button.So far good.

Now after the “Data Saved” alert box is closed, I want to automatically close the previously invoked modal dialog also.Has anyone done anything similar to this ?

 $( "#addFriendButton").click(function() {

        $( "#addNewFriend" ).dialog({
            title: 'Add a new friend.',
            height:'auto',
            width:'auto',
            modal: true
        });


    }); 
    //end addFriendButton

    $( "#saveNewFriendButton").click(function() {

        $.ajax({
          type: "POST",
          contentType: "application/json; charset=utf-8",
          url: "/api/bb/apiV1/addFriend",
          data: formToJSON(),
                      dataType: "json",
          success: function(responseDTO){

                        displayOKAlertBox(responseDTO.responseMessage);

          }
        });  


    }); 

  function displayOKAlertBox(message){

        $("#alertMsg").html(message);

        $( "#alertbox" ).dialog({
            modal: true,
            buttons: {
                Ok: function() {
                    $( this ).dialog( "close" );
                }
            }
        });

    }

Answer 1

Try the following:

$("#alertbox").dialog({
        modal: true,
        buttons: {
            Ok: function() {
                $('.ui-dialog').dialog('close');
            }
        }
});