The web application that I am upgrading uses jQuery and jQuery UI. I have replaced most instances of window.open and <a target=_blank> with jQuery UI dialog. For example, the terms and conditions used to open in a new window; now I use jQuery UI dialog with AJAX. For consistency I plan to use it wherever possible.
One such place is a page where I'll have external links to videos. Something like:
<a href="http://website.com/videos/1.html" target="_blank"><img src="http://website.com/videos/1.png"></a>
<a href="http://website.com/videos/2.html" target="_blank"><img src="http://website.com/videos/2.png"></a>
In certain situations I might use target=iframe1. Now instead of opening the content in an iframe or a popup window, I want to display the content inside a popup dialog. How can I use jQuery UI dialog to achieve this? Will there be any gotchas?
There are multiple ways you can do this but I am not sure which one is the best practice. The first approach is you can append an iFrame in the dialog container on the fly with your given link:
$("#dialog").append($("<iframe />").attr("src", "your link")).dialog({dialogoptions});
Another would be to load the content of your external link into the dialog container using ajax.
$("#dialog").load("yourajaxhandleraddress.htm").dialog({dialogoptions});
Both works fine but depends on the external content.