How to popup a dialog in another frame using jquery-ui

Question

I'm creating a small web page using jquery-ui-1.8 which is having a frameset 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 have added a button to test.php file which is loaded at the first frame (f1) and a div to test2.php which is loaded at the second frame.

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

Then I need to pop up a jquery dialog from "testdiv" on the second frame (f2) when I click on the button in the f1.

I tried following solutions given at these threads. [1] - Display jquery dialog in parent window

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

and [2] - jQuery UI dialog display inside frame, from bookmarklet?

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

But non of these pop ups the dialog within the second frame. Can some one please help me to solve this problem.

Solution

just make test for this way, maybe this is not the best way but you can try it. (Attention: don't forget to add the attribute -> name="f2" <- on iframe f2)

in test.php:

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

---

in 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>