如何使用 AJAX 请求打开 jQuery UI 对话框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19267531/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to open jQuery UI dialog with AJAX request?
提问by Collin Anderson
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?
在我的网页上，我有一个 jQuery UI 对话框。当我单击按钮（创建新用户）时，它会打开一个新窗口。我的问题是如何使用 AJAX 请求打开该窗口？
It would be nice to open the dialog-form from another page. For example: dialog.html
从另一个页面打开对话框表单会很好。例如：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>
You can see full code in this fiddle:
你可以在这个小提琴中看到完整的代码：
回答by Abhishek Punj
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');
}
});
}
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.
并将当前位于 dialog-form div 中的标记定义到一个名为 dialog.html 的新页面中。在按钮点击事件上调用上面编写的函数。我希望这是你所需要的。
回答by Collin Anderson
I think this is a simpler version of the answer:
我认为这是答案的更简单版本：
$("#the-button").click(function(){
$("#dialog").dialog({modal: true}).dialog('open')).load("dialog.html")
})
回答by KarSho
For me .loadis not working. So I used,
对我来说.load不起作用。所以我用，
function showUrlInDialog(url){
$.ajax({
url: 'dialog.html',
success: function(data) {
$("#dialog-form").html(data).dialog({modal:true}).dialog('open');
}
});
}
