Question

我正在尝试使用jquery对话框执行搜索表单。请参阅下面的完整程序。我的电脑上运行的是服务器，http://localhost/search。几乎没有疑问

ajax调用有问题，因为我收到错误消息。我也尝试了GET请求。
在chrome中，服务器上的请求类型是POST，但在Iceweasel（Firefox）中是OPTIONS
在Iceweasel（Firefox）中，模态窗口保持打开状态，并显示错误。但在谷歌浏览器中，模态窗口关闭。这可能与2
以下javascript代码有任何问题。我不是JS的专家。

 <html><head>
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
    </head>
    <body>

      <input id="myButton" name="myButton" value="Click Me" type="button" />

      <div id="myDiv" style="display:none">    
        <form id="myform">
          <input name="q" placeholder="Search ..">
        </form>
      </div>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script> 

      <script type="text/javascript"> 
            jQuery(document).ready( function(){       
                jQuery("#myButton").click( showDialog );
                  $myWindow = jQuery('#myDiv');
                  $myWindow.dialog({ width: 400, autoOpen:false, title:'Hello World',
                          overlay: { opacity: 0.5, background: 'black'},
                          buttons: {
                  "Submit Form": function() {  $('form#myform').submit();},
                  "Cancel": function() {$(this).dialog("close");}
                    }
                          });
                  });

        var showDialog = function() {
            $myWindow.show(); 
            $myWindow.dialog("open");
            }
        var closeDialog = function() {
            $myWindow.dialog("close");
        }

        var successFn = function (response) {        
                $("#myform").parent().html('').html(response);
                }
        var errorFn =  function (xhr, ajaxOptions, thrownError){
                        $("#myform").parent().html('').html(xhr.statusText);
                        }

        $('form#myform').submit(function(){
          $.ajax({
            type: 'post',
            dataType: 'html',
            url: '/search',
            async: false,
            data: $("#myform").serialize(),
            success: successFn,
            error: errorFn
          });
        });    

      </script>
    </body></html>

Answer 1

你可能需要这个。

// include modal into form
$(this).parent().appendTo($("form:first"));

编辑：

通过这个，您可以将对话框添加到表单中，从而可以进行postBack

您可以在Open事件中添加此内容。

尝试使用json作为dataType，jSon是一个令人惊叹的工具，其中ajax =）

Jquery对话框：表单提交

1 个答案: