Question

I made a dialog,iframe

var $frm = $('<iframe />').attr('id','ifrmTV'), 
$dialog = $('<div />').dialog({ autoOpen: false, width: 'auto', hight: 'auto' });

then after some data processing I set $frm source and show the dialog something like:

$frm.attr('src', 'Http/WMP.htm').appendTo($dialog);
$dialog.dialog({title: 'title'}).dialog('open');      

I would like to know if there is a way in WMP.htm code to change the title of the dialog. jquery_UI generate a span with the class ui-dialog-title but it shouldn’t be accessible from the WMP.htm. any help would be greatly appreciated.

Answer 1

The page Http/WMP.htm that you are loading inside the iframe should also load jQuery. This is not necessary, but will make consistent when looking for the ui-dialog-title element.

Note: read this about lowercase and uppercase urls.

Now, inside your iframe, you can access the parent container using window.parent and, using jQuery, access any element with $('selector', window.parent.document). Now, the page that you load inside your iframe should know it’s owned dialog element id, so it can find it back. While you can accomplish this in various ways, I’ll just assume you have one dialog for this iframe loading Http/WMP.htm. So, you should be able to do something like

var $frm = $('<iframe />').attr('id','ifrmTV'), 
    $dialog = $('<div />').attr('id', 'dlgTV')
                 .dialog({ autoOpen: false, width: 'auto', hight: 'auto' });

//...

$frm.attr('src', 'Http/WMP.htm').appendTo($dialog.dialog({title: 'Loading...'}));
$dialog.dialog('open'); 

And inside the page WMP.htm :

$('#dlgTV', parent.document).prev().find('.ui-dialog-title').html('Some title');