如何在 jquery ui 模态对话框小部件内从外部 url 动态加载内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15581787/
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 dynamically load content from an external url, inside of a jquery ui modal dialog widget?
提问by Efe
I asked this question before, but I don't think I explained properly for what I am trying to accomplish.
我之前问过这个问题，但我认为我没有正确解释我想要完成的事情。
There are multiple links on my website and I want to open the content from the link in a jquery ui modal dialog widget.
我的网站上有多个链接，我想从 jquery ui 模式对话框小部件中的链接打开内容。
I'm trying to use 'this' to reference the link that the user selects dynamically. What am I doing wrong here?
我正在尝试使用“this”来引用用户动态选择的链接。我在这里做错了什么？
The code I'm using is below:
我正在使用的代码如下：
<a href="index.cs.asp?Process=comments&id=1" id="test">comment #1</a>
<a href="index.cs.asp?Process=comments&id=2" id="test">comment #2</a>
<a href="index.cs.asp?Process=comments&id=3" id="test">comment #3</a>
<div id="somediv"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#somediv").load(this.getTrigger().attr("href")).dialog({
autoOpen: false,
width: 400,
modal: true
});
$("#test").click(function(){$( "#somediv" ).dialog( "open" );});
});
</script>
回答by CC.
A couple changes: changed ID to Class and used IFrame.
一些更改：将 ID 更改为 Class 并使用 IFrame。
<a href="http://wikipedia.com/" class="test">comment #1</a><br>
<a href="http://ebay.com/" class="test">comment #2</a><br>
<a href="http://ask.com/" class="test" >comment #3</a><br>
<div id="somediv" title="this is a dialog" style="display:none;">
<iframe id="thedialog" width="350" height="350"></iframe>
</div>
<script>
$(document).ready(function () {
$(".test").click(function () {
$("#thedialog").attr('src', $(this).attr("href"));
$("#somediv").dialog({
width: 400,
height: 450,
modal: true,
close: function () {
$("#thedialog").attr('src', "about:blank");
}
});
return false;
});
});
</script>
In case you want to pull in the HTML instead of IFrame, you will have to use Ajax (XMLHttpRequest), something like this: http://jsfiddle.net/qp7NP/1/
如果您想引入 HTML 而不是 IFrame，则必须使用 Ajax (XMLHttpRequest)，如下所示：http: //jsfiddle.net/qp7NP/1/
回答by InspiredBy
You can't have multiple elements with the same Id.
Change your links to to class="test"instead and therefore your click event to $('.test').click().
不能有多个具有相同 ID 的元素。将您的链接改为class="test"改为 ，因此您的点击事件改为$('.test').click()。
Also if you still have problems, and I remember I had some similar issues because how JQUery Dialog behaves itself with the DOM. It will literally rip your #somediv out of content and append it to the bottom of a page to display that dialog. I solved my dynamic dialog loading issues with wrapping it in another div.
另外，如果您仍然有问题，并且我记得我遇到了一些类似的问题，因为 JQUEry Dialog 是如何处理 DOM 的。它实际上会将您的#somediv 从内容中撕掉，并将其附加到页面底部以显示该对话框。我通过将其包装在另一个 div 中解决了我的动态对话框加载问题。
<div id="somediv-wrap">
<div id="somediv">
</div>
</div>
<script>
$(document).ready(function() {
$("#somediv-wrap").dialog({
autoOpen: false,
width: 400,
height:200,
modal: true
});
$(".test").click(function(event)
{
event.preventDefault();
var link = $(this).attr('href');
$("#somediv").load(link,function(){
$( "#somediv-wrap" ).dialog( "open" );
});
});
});
</script>
