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

Question

我有一个与这个几乎相同的模态表单：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/

Answer 1

这是一个有效的 jsFiddle 演示：

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

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();  

});

Answer 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();
                    }
     });
});               
​