jQueryUI的构象对话框消失

Question

有人能与我试图去进行确认工作是jQueryUI的对话框或没有

<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 

     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
    <script> 

     $(function() { 

      $("#dialog").dialog({ 
       autoOpen: false, 
       resizable: false, 
       height: 240, 
       modal: true, 
       show: { 
        effect: "blind", 
        duration: 1000 
       }, 
       hide: { 
        effect: "explode", 
        duration: 1000 
       }, 
       buttons: { 
        "Yes": function() { 
         $(this).dialog("close"); 
         $('#searchForm').submit(); 
        }, 
        "No": function() { 
         $(this).dialog("close"); 
         return false 
        } 
       } 
      }); 
     }); 
     $(function() { 
      $('#searchForm').submit(function() { 

       $("#dialog").dialog("open"); 

      }); 
     }); 
</script> 


    <div id="dialog" title="Confirm Terms?"> 
    <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Click YES to accept the Terms of Use</p> 
</div> 
     <form action="#" id="searchForm" method="post" name="searchForm"> 
      <input id="firstname" name="firstname" style="width: 140px;" type="text" value="paul" /> 
      <input id="surname" name="surname" style="width: 140px;" type="text" value="east" /> 
      <input id="address" name="address" style="width: 490px;" type="text" value="" /> 
      <input type="submit" value="Filter" /> 

        </form> 

每次帮我点击提交按钮出现约1对话框秒然后消失并提交表单。请你能指出我要去的地方错了

I have ran it in jsfiddle here

感谢保罗

Answer 1

的对话框立即消失，因为您提交功能不return false或有preventDefault()电话。请参阅：

http://api.jquery.com/submit/

http://api.jquery.com/event.preventDefault/

没有这一点，显示你的对话后，提交表单将自动发生。

编辑：

另外，在对话框是按钮的处理程序提交表单时，你会被再次调用您的提交功能，这将立即重新显示对话框 - 可能不是什么你要！

您必须在表单上调用提交之前存储用户的确认。例如：

var reallySubmit = false; 

... 

buttons: { 
    "Yes": function() { 
     reallySubmit = true; 
     $(this).dialog("close"); 
     $('#searchForm').submit(); 
    }, 

... 

$('searchForm').submit(function() { 
    if (!reallySubmit) { 
     $("#dialog").dialog("open"); 
     return false; 
    } 
}); 

...