not able to close modal dialog

Issue:not able to close modal dialog

I have the following code, it works for me, the dialog is opened.

$("#invitation-form").dialog({
    autoOpen: true,
    height: 300,
  开发者_高级运维  width: 600,
    modal: true,
    title: 'Send Invitation',

    open: function() {
        $("#invitation-form").html("<%= escape_javascript(render('invitation_form.html')) %>")
    }
});

Inside the invitation form, after user click the "send" button, it will trigger and function in the controller, it is and ajax call, coz i set :remote => true

and i try to do the following

$("#invitation-form").dialog("close")

the dialog does NOT close.

i put and alert message to test it, it run through the the code, i can see the alert message.

can anyone help me, how can i close the dialog?

Thanks

You should try setting the dialog up as not to autoOpen:

$("#invitation-form").dialog({
    autoOpen: false,
    height: 300,
    width: 600,
    modal: true,
    title: 'Send Invitation',

    open: function() {
        $("#invitation-form").html("<%= escape_javascript(render('invitation_form.html')) %>")
    }
});

And then you can just call open on page load if you want, and close whenever you want to as well:

$("#invitation-form").dialog("open");
$("#invitation-form").dialog("close");

Have you tried putting the ajax function within the close?

$( "#invitation-form" ).dialog({
   close: function() { Ajax stuff here }
});

Otherwise, try setting the "send" button:

//getter
var buttons = $( ".selector" ).dialog( "option", "buttons" );
//setter
$( ".selector" ).dialog( "option", "buttons", { "Ok": function() { $(this).dialog("close"); } } );

Also check jquery-ui and jquery.js not included in the loaded file. It will stop workin the dialog close method if loaded twice.