ajax调用后jquery对话框添加按钮答案

【问题标题】：jquery dialog add button after ajax callajax调用后jquery对话框添加按钮
【发布时间】：2014-03-28 19:24:53
【问题描述】：

我有一个对话框窗口，其中包含一些作为表单提交结果的确认内容：

 $('#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");
            }
        }
    });

当用户点击完成时，它会触发 ajax 调用并执行 checkdata.php 内容。完成后，我想删除“完成”和“取消”并添加一个“继续”按钮。继续按钮将重新加载页面。我怎样才能做到这一点？

目前在此代码中，它可以按需要工作，但如果用户在单击完成之前不喜欢他在确认窗口中看到的内容，如果他单击取消，它将重新加载页面。我只想在 ajax 调用后重新加载页面。

【问题讨论】：

你在这个例子中使用了什么 javascript 框架？
@bart2puck 您可以看到我的回答，在演示中我没有说明 ajax 部分，但是当您单击完成时，您可以看到添加了名为“继续”的新按钮
我为你的代码写了一个建议。

标签： javascript php jquery ajax dialog

【解决方案1】：

您可以使用以下方法在 ajax 回调中添加新按钮；

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

您可以在此处查看演示：jsfiddle

【讨论】：

【解决方案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>

【讨论】：