javascript - 如何使用 AJAX 请求打开 jQuery UI 对话框？

Question

在我的网页上，我有一个 jQuery UI 对话框。当我单击按钮（创建新用户）时，它会打开一个新窗口。我的问题是如何使用 AJAX 请求打开该窗口？

从另一个页面打开对话框表单会很好。例如：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>

你可以在这个小提琴中看到完整的代码：

Answer 1

你可以像这样定义你的对话框：

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

并将dialog-form div 中的当前标记定义到一个名为dialog.html 的新页面中。在按钮点击事件上调用上面写的函数。我希望这是你需要的。

Answer 2

我认为这是答案的更简单版本：

$("#the-button").click(function(){
  $("#dialog").dialog({modal: true}).dialog('open')).load("dialog.html")
})

Answer 3

对我来说.load不起作用。所以我用了，

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