jquery callback after if statement

Question

Howdy guys, im having trouble finding help on creating a callback in certain situations.

I have a piece of code which loads a links page in to an iframe and then changes the scr if another link is pressed.

$(".iframe").hide();
$(".lnk").click(function(){
$(".iframe").show('slow')
;})
;
$(".frmclose").click(function(){
$(".iframe").hide('slow')
;})
;

The above runs within (document).ready below is outside of this (for some reason it does not work on the inside)

function changeIframeSrc(id, url) {
if (!document.getElementById) return;
var el = document.getElementById(id);
if (el && el.src) {el.src = url;return false;}return true;}

the link :

  <a href="http://www.google.com" onclick="return changeIframeSrc('ifrm', this.href)" class="lnk">google</a>

prior to this i have the div in which the iframe is in become unhidden. I also have a button within that div which hides the div + iframe.

What im having problems with is once the iframe has been opened and then closed via the div link if it is re-opened by clicking a different link the iframe unhides to display the old page then changes. But what i want is for the frame to load the new page(while hidden) then unhide to display it. I thought of using a callback after the iframe src change but i cant see where i would implement it.

Example of it happening (click the GDPH button to see the links for the iframe)

Any thoughts or help appreciated.

Regards

B Stoner

Answer 1

I think that all you need to do is clear the src of the <iframe> when it is closed. That will clear the page so that next time you show the iFrame it will start out blank again.

I made a small demo of this functionality that uses the 3 links from your page as an example. The <iframe> starts hidden (by CSS) and each link will show the <iframe> and then load the remote site. I added a close iframe link to simulate the close link you have under the <iframe> on your site.

Hope this helps!

Edit: Updated the demo link to include the callback part. Somehow missed that when I read the question!

Edit 2: Your changeIframeSrc function was not working was because it was defined inside the jQuery anonymous function and is a closure. See calling Jquery function from javascript

Answer 2

I would catch the .load() event for the iframe, this will fire after the document has been loaded in to the iframe.

$(".iframe").load(function { /* code to run when iframe is loaded */ });