How to dynamically load content from an external url, inside of a jquery ui modal dialog widget?

javascript, jquery, jquery-ui

Solution

http://jsfiddle.net/qp7NP/

A couple changes: changed ID to Class and used 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/

Problem

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. I'm trying to use 'this' to reference the link that the user selects dynamically. What am I doing wrong here? 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> ```

Original source