Thursday, July 14, 2011

Refresh parent page from child window using javascript in web application

Much often we open child windows from parent web page. In the child page we perform some activities, and later close the window. At the very time we may need to refresh the parent page so that changes made in the child window be reflected in the parent window. We can easily accomplish this using javascript in web page. Let me show the way using code snippets. If it is your iframe page, you still can refresh the parent page partially from page in iframe (because this will avoid reloading the iframe itself), which I have discussed in another post. And right before following, I would like to inform that there is a post regarding Frequent question on parent and child page refresh, reload, function call in asp-net using javascript that discusses, in aggregate, about some more approaches of parent and child page operations.

Parent web page
Open child window
This is the parent page. Clicking the link will open the child page Child.aspx in a new window. If you wish you can Open the new window in web page in different ways, which I have already discussed in a previous post.

Child web page

This is the child page.

protected void btnOk_Click(object sender, EventArgs e)
        //Implement Your logic here.....
        //now refresh parent page and close this window
        string script = "this.window.opener.location=this.window.opener.location;this.window.close();";
        if (!ClientScript.IsClientScriptBlockRegistered("REFRESH_PARENT"))
            ClientScript.RegisterClientScriptBlock(typeof(string), "REFRESH_PARENT", script, true);        
In the child page, I have just put a button. When the button is clicked, the page logic will be implemented (which I have indicated by the comment lines in the event handler of the button in the child page).

The plus javascript logic
I have just created the javascript stuff that refreshes the parent page of this child page; see the lines:
This line replaces the url of the parent page with its own url - that causes the parent page to reload. And yes, I have registered the javascript code block with ClientScript so that it is executed when the postback life cycle of this child page completes.

Happy programming!
kick it on


Anonymous said...

thanks !

Anonymous said...

OMG! what a relief..thank you so much for this very helpful post...this is so easy to follow and the perfect solution ive been looking for...
you're a GENIUS!!!!! :)


Anonymous said...

The post is too good. I was waiting for this code since long.


Anonymous said...

WOW!! Thank you very much

Anonymous said...

thanq so saved my tym..!!the post is too good n well xplained..

Anonymous said...

the post is toooo good, saved so much time

Anonymous said...

what if i have to just refresh a control e.g gridview on parent page?

Unknown said...

To refresh a gridview, you can put the gridview within an update panel. You can easily refresh the gridview control only by partially updating the updatepanel.

Anonymous said...

thanks you sir!

Miki said...

SUPERB!!! Exactly what I was looking for.
Thanks a lot.

Anonymous said...

Excellent and thank you so much... I was looking for this for quite some time. You're great!

Anonymous said...

Not working in IE8...plz help?

Post a Comment

Hope you liked this post. You can leave your message or you can put your valuable suggestions on this post here. Thanks for the sharing and cooperation!

Popular Posts

Recent Articles