Refresh div on parent page from iframe using jquery

jquery iframe html parent

10,487

Pass the second parameter to jQuery, with the desired scope

Replace window.setTimeout('window.top.location.href = "/page.asp"; ',999); with this:

window.setTimeOut(function(){
    $("#target", window.parent).load("/page.asp #target");
},999);

10,487

Patriotec

Updated on June 01, 2022

Comments

Patriotec almost 2 years

I'm using fancybox's modal box with an iFrame. On form success from the iFrame I'm using the code below:

<script type="text/javascript">
window.setTimeout('window.top.location.href = "/page.asp"; ',999);
</script>

<script language="javascript">
<!--
setTimeout("parent.$.fancybox.close();",1000)
//-->
</script>

This closes fancybox's modal box and refreshes the parent page. I want to target a div to refresh on the parent page from the iFrame using Jquery.

I want the target DIV on the parent page with the id="target" to refresh, NOT the entire page. How do I go about it using JQuery?

TIA

Code Example below

Parent Page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>
<body>
<div id="target">
content content
</div>
</body>
</html>

iFrame Page Upon Form Validation

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>

<script type="text/javascript">
window.setTimeout('window.top.location.href = "/parent_page.asp"; ',999);
</script>

<script language="javascript">
<!--
setTimeout("parent.$.fancybox.close();",1000)
//-->
</script>

How do I make a function on the parent page to refresh the div id="target" and call it from the iFrame. Right now, the entire parent page refreshes.

Patriotec almost 13 years

I'm a complete jQuery novice. Please include code example for parent and iframe page along with complete script syntax. Code snippets alone aren't enough
Ortiga almost 13 years

Edited my answer, is this what you want?
Patriotec almost 13 years

I tried Andre's solution but it did not work. The fancybox closed and then the parent window came into focus but the content of the div did not change. Am I missing something in the page to make this work? From what I read, I need to make a function in the parent page and call it from the iFrame.
Patriotec almost 13 years

I do have other DIV's within the target DIV. I was under the impression that all within the target DIV would refresh
Patriotec almost 13 years

For the fancybox to work, I had to create a function on the parent page using $(document).ready(function() {function triggerClose(){ var el = $("#fancyCloseId"); el.bind("click", $.fn.fancybox.close); el.trigger('click'); } and then call the function from the iframe
Patriotec almost 13 years

i tried livequery jQuery plugin and that didnt work. this can't be this hard.
Ortiga almost 13 years

And it's not... Do you use any tools to see if the ajax request is being made? And also, switch "/page.asp #target" to "/page.asp"