jQuery UI Dialog custom button event

I've found it possible to create a custom button in jQuery UI Dialog but how do I trigger some action when the button is clicked? For instance, I've created a 'Create' button. When clicked I'd like to trigger a Ajax Post request.

I also have another issue. The page where the Dialog is generated is as a result of a form post request from the previous page. The dial开发者_JAVA百科og has a form inside which remotely inserts the text entered in a text box. On successful creation of this record I'd like to refresh the page when the dialog is closed.

The problem I have is the browser throws a alert asking me to confirm the refresh. Any way around this or a better solution?

$("#dialog").dialog({
            autoOpen: false,
            width: 600,
            height: 200,
            maxHeight: 200,
            modal: true,
            closeOnEscape: true,
            buttons: {
                "Close": function() {
                    $(this).dialog("close");
                },
                "Create": function() {

                }
            },
            beforeClose: function(event, ui) {
                alert('I\'m about to close');
            }
        });

        $("#opener").click(function() {
            $("#dialog").dialog("open");
            return false;
        });

You may try this:

... 
buttons: {
      "Close": function() {
         $(this).dialog("close");
       },
       "Create": function() {
             //Initiate post ajax call
             $.post('someurl',{<postdata>},function(){
                   //handle post results here
             });               
       }
 }
...

For the second part of your question, Rails avoids this situation when handling POSTs by responding with a 302 redirect to a different page. The client then performs a GET on the redirected page, which can be reloaded.

In general practice you should only use POST operations for actions which change state (delete or modify something). Often where you're using a POST to handle parameters, you'd be better off serializing the parameters in the URL of GET request.

For example, look at how http://en.wikipedia.com handles the search form. Entering "John Resig" in the search field results in a GET request for

http://en.wikipedia.org/w/index.php?title=Special%3ASearch&search=john+resig

The server sends back a 302 redirect to

http://en.wikipedia.org/wiki/John_Resig

and you can reload this page all you like without running into the POST resubmit problem.

JQuery has a serialize method you can use to convert form input values to URL parameters: http://api.jquery.com/serialize/

Also, you may not need to relaod the page at all. You can still set values in textboxes on the calling page from within your dialog code, if that makes sense.