繁体   English   中英

jQuery对话框在ajax调用后添加按钮

[英]jquery dialog add button after ajax call

我有一个对话框窗口,其中包含一些确认信息,这是表单提交的结果:

 $('#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调用后重新加载页面。

您可以使用以下命令在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

 <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>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM