Close JQuery Ui dialog from ajax loaded content

Question

I'm trying to add a close a jquery ui dialog box from an ajax loaded content.

Here is some code :

    <script>
        $(".add_as_friend").click(function(){
            $("#dialog-modal").load("/friends/add_popup/"+$(this).attr('id')).dialog({
                title: sprintf('<?=_("Ajouter %s comme ami");?>',$(this).attr('rel')),
                width: 500,
                height: 350,
                modal: true,
                buttons: {
                    "<?=_("Annuler");?>": function() {
                        $( this ).dialog( "close" );
                    }
                }
            });
        });
    </script>

and the call to close it from the ajax would be something like

$(".add").click(function(){
  //submit a form 
  // close modal box and redirect main window
});

Answer 1

You could try calling the dialog.close() method on the div you turned into a dialog.

$(".add").click(function(){
  $('#dialog-modal').dialog('close');
});

Answer 2

您可以在jQuery UI本身中使用.dialog( "close" )方法。

Answer 3

The modal box is actually in the same window, so you could get by with simply redirecting from the click handler. If you really want to do the close, simply invoke the close method on the dialog.

 $('.add').click( function() {
      $.ajax( $('form').attr('action'), $('form').serialize(), function(data) {
             // optional since we're unloading the page
            $('#dialog-modal').dialog('close');
            location.href = data.RedirectUrl;
      });
 });