Geek asks and answers

How to open a dialog box in another frame using jquery-ui

I am creating a small web page using jquery-ui-1.8 which has a set of frames and three frames.

<frameset id="mainFrame"cols="25%,*,25%"> 
    <frame  id="f1" src="test.php"></frame> 
    <frame id="f2" src="test2.php"/>
    <frame  />
</frameset>

Then I added a button to the test.php file, which is loaded into the first frame (f1) and the div to test2.php, which is loaded into the second frame.

<div id="testdiv"> this is test 2</div>

Then I need to open the jquery dialog from "testdiv" in the second frame (f2) when I press the button in f1.

I have tried the following solutions given in these threads. [1] - Show jquery dialog in parent window

var $jParent = window.parent.jQuery.noConflict();
var dlg1 = $jParent('#testdiv');
dlg1.dialog();

and [2] - The dialog box of the jQuery UI dialog inside the frame, from the bookmarklet?

var frame = window.frames[1];
var div = $(frame.document.getElementById("testdiv"));
div.html("My popup contents");
div.dialog();

But not from these pop-ups the dialog box is in the second frame. Can someone please help me solve this problem.

+3
1

, , , . (: → name= "f2" < - on iframe f2)

test.php:

<button onclick="parent.f2.$('#testdiv').dialog('open');">test</button>

test2.php:

<link type="text/css" href="jquery-ui.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
   $( "#testdiv" ).dialog({
    autoOpen: false
   });
});
</script>

<div id="testdiv"> hello world! </div>
+3

More articles:


All Articles