jquery dialog add button after ajax call

Question

I have a dialog window that has some confirmation stuff in it as the result of a form submit:

 $('#newUserDialog').dialog({
        autoOpen: false,
        width: 600,
        modal: true,
        resizable: false,
        close: function() {
            window.location.reload(true);
        },
        buttons: {
            "Complete": function() {
                    $.ajax({
                            type: "POST",  
                            url: "checkData.php",
                            data: formData+"&complete=1",
                            success: function(result){
                            alert(result);
                            $('#newUserDialog').html('User has been built');
                            }
                    });
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });

when the user clicks complete, it fires off the ajax call and does checkdata.php stuff. when that is complete I want to remove "Complete" and "Cancel" and add a button "Continue". The continue button will reload the page. how can i accomplish this?

currently in this code, it works as desired but if the user doesn't like what he sees in confirmation window before he clicks Complete, if he clicks cancel, it reloads page. I only want to reload page after the ajax call.

Answer 1

You can use following for adding new button in ajax callback;

var buttonSet = $('#newUserDialog').parent().find('.ui-dialog-buttonset');
var newButton = $('<button>Continue</button>');
newButton.button().click(function () {
    window.location.reload(true);
});
buttonSet.html(newButton); 

You can see demo here: jsfiddle

Answer 2

 <script>
  var myModalExample;
  $(function() {


    myModalExample = $( "#newUserDialog" ).dialog({
        autoOpen: true,
        width: 600,
        modal: true,
        resizable: false,
        close: function() {
            window.location.reload(true);
        },
        buttons: {
            "Complete": function() {
                    $.ajax({
                            type: "POST",  
                            url: "checkData.php",
                            data: formData+"&complete=1",
                            success: function(result){

                              myModalExample.dialog({ buttons: [ { text: "Continue", click: function() { $( this ).dialog( "close" ); } } ] });

                            }
                    });
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });

  });
  </script>