We Keep Coding

Reload a specific frame from a popup window

I have a popup window, and from there, I want the parent window to reload, but a specific frame not the entire page.
So a user clicks a button from within a frame, it opens the popup. Now from the popup, based on a specific event, I want to reload a frame from the parent window.
Is this possible in IE?
I have a page index.php that has 2 iframes in it.
From the 2nd iframe a new popup window opens.
When the user clicks on a button or closes the popup window, I want to reload iframe#2 (the one that opened the window).
How can I do this?
I have tried:
opener.location.reload();
opener.top.document.getElementById('myIFrameId').location.reload()
opener.myIFrameId.location.reload();
Nothing seems to work.

I found a great jQuery plugin that works in all modern browsers, including IE8.
It allows you to easily call up a secondary browser window with parameters and then your allowed to pass data between the two, similar to how postMessage API works.
These data messages in turn can load new content or alternate webpage into the original iframe2 that's on your parent page once you analyze the incoming jQuery data.
Article: jQuery plugin for communication between browser windows
Online Demo: Parent Page
Download Project: windowmsg.zip
The downloaded files will work directly from your desktop, unlike jsFiddle since it's not permitted there.
Yet another solution that works great when you don't need a secondary browser window and the use of a floating iframe is acceptable, just use a lightbox clone that's iframe capable, such as Shadowbox-js.
The benefit of this method is that your in complete control of how the iframe closes, unlike the above secondary browser window that has it's own browser close button which may not trigger your desired events.
The callback during the lightbox clone closure event can take care of changing the contents in the parent pages iframe 2 as needed. Also, you can choose to have the lightbox bound within the iframe 2 (lightbox clone installed in iframe page), or have it fullscreen (lightbox clone installed in parent page).

In your case, window.opener is the window object of the iframe that opened the popup, so opener.location.reload() should work: Demo
Demo sources:
Main page: http://jsfiddle.net/jefferyto/DWeYZ/
Iframe: http://jsfiddle.net/jefferyto/WWbg9/
Popup: http://jsfiddle.net/jefferyto/TKQUJ/

I kind of rebuilt this functionality here:
http://jsfiddle.net/JBWTn/3/
Clicking the button in the popup will change the border look of a frame in the original window . The key here is navigating through the original window's frames using
window.opener.document.getElementById('[ID_OF_YOUR_FRAME]')
(quite similar to what Frank van Puffelen suggested)
To reload the frame instead of just changing its style, use
window.opener.document.getElementById('[ID_OF_YOUR_FRAME]').location.reload()
...like you tried in your question already.
This question reminded me of the functionality in phpMyAdmin (where you can run SQL queries from a popup window and have the results shown in the main window), so I had a quick look ;)

Have you tried:
opener.frames["myIFrameId"].location.reload();

it will show error "Error: Permission denied to access property 'reload'"
that's possibly "the same origin policy" problem.
or you create a div wrapper over the iframe and re generate iframe again

colorbox refreshing parent window without closing popup

I am using colorbox for showing pop ups. Is this possible to reload parent window without closing pop. I mean I want to do actions/events in the pop up and the changes should be displayed at parent window.
Thanks

You can definitely play with the elements in the page from within the colorbox. You can't, however, "refresh the parent window" as you stated in the question title, because then you will also lose the colorbox (which is a part of that page).
But judging from the rest of your question, you simply want to make changes in the page. If your colorbox is not in an iframe (e.g., you have not explicity set the option iframe:true) then it's pretty straightforward. Just create event handlers that are called from actions performed in the colorbox.
If you are setting the colorbox to open an iframe, there's a couple things to be aware of:
The iframe page (the contents of your colorbox) must be within the same domain
Use the parent. in the iframe's JS that references the parent page
Here's an example of the colorbox code you would have in the iframe page:
$(document).ready(function() {
$("a.internalColorboxLink").click(function() {
parent.$("body").append(
parent.$("<div/>").text("MY NEW TEXT")
);
});
});
In fact, this is the almost the same code as would be in the inline colorbox (that is, the js in the parent page). Simply remove the parent references.
I can post more concrete examples if you update your question with exactly what you want to do.

How to Show the Pop up in iframe outside?

I have one page(say jobs.html) with an iframe loads another page( say joblist.html).There is one another popup(which displays description of job when clicks one title) which is generated with javascript will be load into the page in iframe when it loads.
I have to load the popup(job description popup) outside the iframe.
Any solution to get the jobs.html page's document body using javascript?
or How can i get this popup outside the iframe?
Thanks,

You can use the parent function.
You can define the function of showing the popup on the parent page. not in iFrame and call that function from iFrame.
Lets suppose you have a function of showing job description in Parent page.
var showJobDesc = function(jobTitle,jobDesc,...){
....
}
now in iFrame call this function like;
parent.showJobDesc(jobTitlem, jobDesc, ...);
By doing this you have no issues for placement/alignment of the Dialog.

I have to load the popup(job description popup) outside the iframe
What do you mean when you say load the popup outside the iframe?
If you want to open the other page in a pop up, use window.open
If you want to open the new page replacing the parent's page, use the location of the window
window.parent.location.href = "newPage.html"
In general, you can refer to the parent window (the window containing the iframe), use window.parent (and therefore the parent window's document as window.parent.document, and any script in the parent window as window.parent.scriptName)

Put the show javascript into container page, and in the iframe just call parent.showpopup().

parent.showpopup() throws an access denied error. Kinda makes sense since including an iframe means the developer of the page can control the page it's contained in.

jQuery iBox (lightbox clone) and IFRAMES

Hey there you lot, is there a way that I can open a lightbox (in this case iBox) from within an IFRAME and have the actual lightbox open in the Parent page?
sigh I am confusing myself here!

Only if you have control of the parent page too.
If so you could either invoke methods directly using parent.foo() if on the same domain, or using e.g easyXDM if on different domains.
Either way, you will have to load the correct scripts and css on the parent to do so.

Javascript and CSS Popups

I've got a question about CSS based popup windows, like those generated by jQuery UI's dialog system, or Colorbox. If I use those (or something like them) to open a popup window to an HTML page and that page has Javascript in it, does the Javascript in the popup window run in its own context, or does it become part of the context of the Javascript in the parent window that opened it? I ask so that I can write the Javascript on both pages (parent and popup) so there is no namespace collision.
Thanks in advance!
Doug

That depends on the type of popup. (I'm assuming we are talking about in-page popups here and not window.open() ones that open a new browser window.)
If it contains an IFRAME in which you load a separate page, then that page will have its own styles. You will have to re-load any CSS and JavaScript files you need.
If it doesn't contain an IFRAME, but just a regular DIV or other element into which content is loaded through AJAX (or directly output in the "parent" HTML page) then the popup will run in the context of the parent page.

If you use real popups (new windows) it is definitly in its own context.
If you use modal windows purely in HTML it depends. It can be an iframe (own context) or injected elements (parent context).

With Colorbox, you can set the iframe property to true and it will load the content in an iframe. This gives the page its own scope. If you don't use an iframe, then the page will be loaded in the context of the current document.
$('a.someLink').colorbox({ href:"somePage.html", iframe: true });