CODEWITHSUNDEEP
jqueryiframehtmlparent
Patriotec
Patriotec

Reputation: 399

Refresh div on parent page from iframe using jquery

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.

Upvotes: 3

Views: 10611

Answers (2)

Sangam Uprety
Sangam Uprety

Reputation: 1482

You can achieve this by calling a javascript function in parent page from the page contained in iframe.

window.parent.myFunctionInParent('my param');

You can learn the technique step by step in How to refresh parent page partially from page within iframe.

Hope this helps.

Upvotes: 0

Ortiga
Ortiga

Reputation: 8814

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);

Upvotes: 3

Related Questions