How To Initialize Jquery, Javascript Document.ready in Parent from child iframe?

[tedteeter]

Greetings, July 30th 2013

Briefly, I need to figure out how to initialize the doc ready as exampled below from a a click within an iframe? I am aware of window.parent etc. However, I have tried everything to no avail. Any ideas? I need to actuate a parents "Popup" from the child iframes <font> click event! The below is the Jquery Doc Ready..any ideas? would be helpful, thanks in advance!

//<script type="text/javascript">

DYN_WEB.Event.domReady( function() {
        DYN_WEB.Popup.setup( { id:'popup', handleId:'handle' } );
    }
);
//</script>

[jscheuer1]

That's not jQuery.

The way I would approach this is to assume, since you're doing this from within an iframe, that the top page is already parsed (already domReady).

That being the case, from a link within a page in the iframe, this should work:

<a href="#" onclick="parent.DYN_WEB.Popup.setup( { id:'popup', handleId:'handle' } ); return false;">Init the Pop Up</a>

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[tedteeter]

John, July 30th 2013


Well that is closer than I have come, but that didn't quite work, although I am very apreciative at the attempt. I tried your example and when it didn't quite work I tried the reference of <a href="#" onclick="window.top.DYN_WEB.Popup.setup( { id:'popup', handleId:'handle' } ); return false;">Init the Pop Up</a> and that as well didn't work...Below is the function, if it isn't Jquery I assume that it is a form of Javascript that resembles Jquery?

<script src="js/dw_popup.js" type="text/javascript"></script>
<script type="text/javascript">

DYN_WEB.Event.domReady( function() {
DYN_WEB.Popup.setup( { id:'popup', handleId:'handle' } );
}
);
</script>


The function utilizes a link within the parent of "<a href="#" class="showPopup" data-id="popup">test link</a>" while the actual divs retain a "data-id" that indicates the multiple popups and a "Class" that as well indicates "handle" Well I'll include a complete popup..any help is greatly appreciated !!

<div class="popup" id="popup">
<div class="handle" id="handle">
<span class="caption">800 Number Customer Service, IT Support Team Info</span>
<span class="closeBox"><a href="#">X</a></span>
</div>

<div class="popup_content">
<textarea rows="7" cols="50">test</textarea><br><br>
<button>Submit Information To MHI</button>

</div>
</div>

[jscheuer1]

Hmm, well definitely not jQuery. It's a free script that uses ordinary javascript, albeit with a fairly high level of sophistication. The script is from here:

http://www.dyn-web.com/code/popup/

Anyways, I don't know what you have, and what exactly you're trying to do. But if the top page already has the script on it and has something like:

<script type="text/javascript">

DYN_WEB.Event.domReady( function() {
        DYN_WEB.Popup.setup( { id:'popup', handleId:'handle' } );
    }
);
</script>

that on it and has the markup for the popup, then on a page in the iframe you can do:

<a href="#" onclick="parent.DYN_WEB.Popup.getInstance('popup').show(); return false;">Show Pop Up</a>

to pop it up.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

But you can also simply do (to show it):

parent.document.getElementById('popup').style.visibility = 'visible';

and to hide it:

parent.document.getElementById('popup').style.visibility = 'hidden';

[tedteeter]

John July 31st, 2013

That is magnificent, both examples, solutions worked great!! While the system that Dyn Web is good and impressive it appears in my opinion to large for what it achieves, but still it is impressive! For the readers I simply applied the great work of Johns' as he defined as below allows and it performed great! I am very appreciative John! Thanks so very much! you have my email an if you ever are in need simply let me know ;-)

 <font id="services" size="3" color="#022795" onclick="javascript:parent.document.getElementById('popup').style.visibility = 'visible';"><b><u>More Info..</u></b></font>