jQueryUI 对话框，是否可以使用您自己的按钮而不是对话框生成的按钮？答案

【问题标题】：jQueryUI dialog, is it possible to use your own buttons instead the one generated by dialog?jQueryUI 对话框，是否可以使用您自己的按钮而不是对话框生成的按钮？
【发布时间】：2023-03-18 04:37:01
【问题描述】：

我有一个和这个差不多的模态表单：http://jqueryui.com/demos/dialog/modal-form.html

表单已经有一个提交按钮。我可以设法使用此按钮提交表单，但回调函数不起作用。有没有办法使用我自己的提交按钮并使回调函数工作？

buttons: {
    "Create an account": function () {            
        $("#dialog-form").html("thank you for <b>submit</a>");
    },
    Cancel: function () {
        $(this).dialog("close");
    }
}

你可以在 jsFiddle 上测试我的代码

http://jsfiddle.net/QSJpS/3/

【问题讨论】：

什么回调函数？单击按钮后是否只想关闭表单？为什么不直接调用 $("#dialog-form").dialog("close");在您的按钮单击处理程序中？
$("#dialog-form").html("谢谢提交");
您能创建一个jsFiddle 并演示您的问题吗？
我想显示“谢谢”消息来替换模式对话框中的表单。让他们知道帐户已创建。
scott，我认为我无法在 jsFiddle 中使用它。在我的代码中，我有 $.get('/home/post', function (data)，我不知道如何在 jsFiddle 中创建“/home/post”文件，我会将我的代码上传到 github。

标签： jquery jquery-ui modal-dialog jquery-ui-dialog

【解决方案1】：

Here's a working jsFiddle demo:

我更改的部分位于“创建帐户”部分：

if ( bValid ) {
    $( "#users tbody" ).append( "<tr>" +
        "<td>" + name.val() + "</td>" + 
        "<td>" + email.val() + "</td>" + 
        "<td>" + password.val() + "</td>" +
        "</tr>" ); 
    $( this ).html("Thank you!");
}

输出：

编辑 Ajax 解决方案：

您需要做的是通过 ajax 发布您的表单，这样您就不会因为页面刷新而搞砸了您的消息。你可以这样做：

$("#submit-button-id").click(function(e) {

    var data = 'name='+ $("#name").val() + 
               '&email=' + $("#email").val() + 
               '&password=' + $("#password").val() ;  

    $.ajax({  
        type: "POST",  
        url: "some-processing-page.html",  
        data: data,  
        success: function() {  
            $('#dialog-form').html("Thank you for your submission!");  
            $(".ui-dialog-buttonpane").hide();
        }  
    });  

    e.preventDefault();  

});

【讨论】：

谢谢。但这不是我需要的。如果可能的话，我想使用我自己的按钮。只需将我的代码上传到jsFiddle，你能看一下吗？ jsfiddle.net/QSJpS/3
@feelexit - 我知道这不是您要问的，但它通过原始示例演示了如何替换文本。您的问题是，您正在尝试提交将所有内容发布回服务器的表单。您不应该通过提交按钮提交表单，而是通过带有回调的 ajax post 提交表单，然后您可以在其中更改文本。
非常感谢，我对常规提交和 ajax 提交感到困惑。当用户单击提交按钮时，我只是使用了 .post 。 .post 会在表单发布成功后触发回调函数。
@feelexit - 没问题。 $.post() 只是我在答案中使用的 $.ajax() 方法的简写方法。所以这完全一样。很高兴它对你有用 =D

【解决方案2】：

所以，像这样：

http://jsfiddle.net/QSJpS/4/?

$(function(){
    $("#submitButton").click(function () {

                    var bValid = true;

                    if (bValid) {
                        $("#users tbody").append("<tr>" +
                        "<td>" + $("#name").val() + "</td>" +
                        "<td>" + $("#email").val() + "</td>" +
                        "<td>" + $("#password").val() + "</td>" +
                    "</tr>");
                        $("#dialog-form").html("thank you for <b>submit</a>");
                        $(".ui-dialog-buttonpane").hide();
                    }
     });
});

【讨论】：