jquery对话框：表单提交

我想用jQuery对话框做一个搜索表单。请参阅下面的完整程序。我有一台服务器在我的电脑上运行，并且http://localhost/search。有几点怀疑jquery对话框：表单提交

ajax调用有些问题，因为我收到一条错误消息。我也尝试了GET请求。
在Chrome中，服务器上的请求类型为POST，但在Iceweasel（Firefox）中为选项
在Iceweasel（Firefox）中，模式窗口保持打开状态并显示错误。但在谷歌浏览器中，模式窗口关闭。这可能与下面的JavaScript代码有什么不妥有关。我不是JS的专家。

非常感谢，
bsr。

<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>

来源

2011-04-15 bsr

你可能需要这个。

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

编辑：

有了这个，你添加到对话的形式，从而可以回传

，你可以在打开事件中添加这一点。

尝试使用json作为dataType，jSon是一个了不起的工具，其中ajax =）

来源

2011-04-15 17:49:45

jquery对话框：表单提交

回答

相关问题