Question

我发现可以在jQuery UI对话框中创建自定义按钮，但是如何在单击按钮时触发某些操作？例如，我创建了一个“创建”按钮。单击时，我想触发Ajax Post请求。

我还有另一个问题。生成对话框的页面是来自上一页的表单发布请求的结果。该对话框有一个表单，用于远程插入在文本框中输入的文本。成功创建此记录后，我想在关闭对话框时刷新页面。

我遇到的问题是浏览器会发出警告，要求我确认刷新。有没有办法解决这个或更好的解决方案？

$("#dialog").dialog({
            autoOpen: false,
            width: 600,
            height: 200,
            maxHeight: 200,
            modal: true,
            closeOnEscape: true,
            buttons: {
                "Close": function() {
                    $(this).dialog("close");
                },
                "Create": function() {

                }
            },
            beforeClose: function(event, ui) {
                alert('I\'m about to close');
            }
        });

        $("#opener").click(function() {
            $("#dialog").dialog("open");
            return false;
        });

Answer 1

你可以试试这个：

... 
buttons: {
      "Close": function() {
         $(this).dialog("close");
       },
       "Create": function() {
             //Initiate post ajax call
             $.post('someurl',{<postdata>},function(){
                   //handle post results here
             });               
       }
 }
...

Answer 2

对于问题的第二部分，Rails通过响应302重定向到另一个页面来处理POST时避免了这种情况。然后，客户端在重定向页面上执行GET，可以重新加载。

在一般实践中，您应该只对更改状态的操作使用POST操作（删除或修改某些内容）。通常在使用POST处理参数的地方，最好在GET请求的URL中序列化参数。

例如，查看http://en.wikipedia.com如何处理搜索表单。在搜索字段中输入“John Resig”会产生对

的GET请求

http://en.wikipedia.org/w/index.php?title=Special%3ASearch&search=john+resig

服务器将302重定向发送回

http://en.wikipedia.org/wiki/John_Resig

您可以重新加载此页面，而不会遇到POST重新提交问题。

JQuery有一个序列化方法，您可以使用该方法将表单输入值转换为网址参数：http://api.jquery.com/serialize/

Answer 3

此外，您可能根本不需要重新加载页面。如果有意义，您仍然可以在对话框代码中的调用页面上的文本框中设置值。

jQuery UI Dialog自定义按钮事件

3 个答案: