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

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

});

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