jQueryUI对话框和表单处理

时间:2011-06-14 19:24:33

标签: jquery-ui dialog modal-dialog

我已经搜索过并且可以找到几乎看起来会起作用的东西,但我似乎无法找到明确的答案,所以这里就是......

使用此代码我有一个jQueryUI模式窗口显示...

<script> 
jQuery(function() {
$( "#dialog" ).dialog({ closeOnEscape: true, modal: true, draggable: false, resizable: false, width: 500, height: 500, close: function(event, ui) { location.href = 'http://www.page.com' } });
});
</script> 
<div id="dialog" title="WELCOME!">
<form id="wp_signup_form" action="" method="post">
<label>Email address</label><br />
<input type="text" name="email" class="text" value="" /> <br />
<input type="submit" id="submitbtn" name="submit" value="SignUp" />
</form>
</div> 

但是当我单击表单上的提交时,整个页面会在模态窗口中重新加载。

如何只使用模板窗口重新加载其中的表单内容(以及我将在此工作后添加的一些PHP),或者重新加载整个页面?

谢谢! 克里斯

1 个答案:

答案 0 :(得分:0)

我通过在模态窗口中加载iFrame来解决这个问题:

 $(document).ready(function() {
        $("#modalIframeId").attr("src","http://site.com/wordpress/wp-content/themes/theme/registration.php");
       $("#divId").dialog({
               autoOpen: true,
               modal: true,
               closeOnEscape: true, 
               draggable: false,
               resizable: false,
               dialogClass: 'no-close',
               height: 500,
               width: 500,
               title: 'Sign Up'
           });
    });
      </script>

    <div id="divId" title="Dialog Title">
        <iframe id="modalIframeId" width="100%" height="100%"
        marginWidth="0" marginHeight="0" frameBorder="0" scrolling="none"
        title="Dialog Title">Your browser does not suppr</iframe>
    </div>

并将registration.php调用到iframe中,这是我需要的表单。

谢谢!