How To Dynamically Load Content From An External Url, Inside Of A Jquery Ui Modal Dialog Widget?

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

Solution 1:

http://jsfiddle.net/qp7NP/

A couple changes: changed ID to Class and used IFrame.

<ahref="http://wikipedia.com/"class="test">comment #1</a><br><ahref="http://ebay.com/"class="test">comment #2</a><br><ahref="http://ask.com/"class="test" >comment #3</a><br><divid="somediv"title="this is a dialog"style="display:none;"><iframeid="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");
            }
        });
        returnfalse;
    });
});
</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/

Solution 2:

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().

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.

<divid="somediv-wrap"><divid="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>