如何使用AJAX请求打开jQuery UI的对话框? [英] how to open jQuery UI dialog with AJAX request?

查看:210
本文介绍了如何使用AJAX请求打开jQuery UI的对话框?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在我的网页我有一个jQuery用户界面对话框。当我按一下按钮(创建新用户),它会打开一个新的窗口。我的问题是我怎么能打开窗口,一个AJAX请求?

On my web page I have a jQuery UI Dialog. When I click the button (create new user) it opens a new window. My question is how can I open that window with an AJAX request?

这将是很好,从另一个页面打开的对话​​框形式。例如: dialog.html

It would be nice to open the dialog-form from another page. For example: dialog.html

<div id="dialog-form" title="Create new user">
  <p class="validateTips">All form fields are required.</p>

  <form>
  <fieldset>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
    <label for="email">Email</label>
    <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
    <label for="password">Password</label>
    <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
  </fieldset>
  </form>
</div>

您可以看到完整的code在此小提琴

You can see full code in this fiddle:

推荐答案

您可以这样定义你的对话框:

You can define your dialog like this :

function showUrlInDialog(url){
  $.ajax({
    url: 'dialog.html',
    success: function(data) {
      $("#dialog-form").load(data).dialog({modal:true}).dialog('open');
    }
  });
}    

和定义当前的标记是内部对话形式DIV,一个叫做dialog.html新的一页。呼叫按钮单击事件上面写的功能。我希望这是你所需要的。

And define the current markup that is inside dialog-form div, into a new page called dialog.html. Call the above written function on the button click event. I hope this is what you needed.

这篇关于如何使用AJAX请求打开jQuery UI的对话框?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆