parent.location.assign(url) not working from fancy

Question

I'm trying to reload the browser with a url link clicked in fancybox by the user so the parent window will go to the url after fancybox has closed, but only if the link is clicked and not when fancybox is closed normally. I open an asp file in fancybox that uses google maps api to show an interactive map. I'm testing when a marker is clicked, the infowindow opens with a link, which is a new location. I've gotten fancybox to close and the parent window reloads, but for some reason I cannot get the parent location to change to the new url! I feel that it should be working because everything else works and it's got me totally baffled.

The code in my asp file, which uses google maps api, looks like this:

    var contentstring = document.createElement("div");
    contentstring.innerHTML = '<div id=\"content\">'+
'<div id=\"siteNotice\">'+'</div>'+
'<div id=\"bodyContent\">'+'<b>'+'<a href=\'http://www.lookathawaii.com/proddetail.asp?prod=96816-DIAMOND-HEAD-STATE-MONUMENT\' onclick=\"parent.$.fancybox.close(); parent.location.assign(\'http://www.lookathawaii.com/proddetail.asp?prod=96816-DIAMOND-HEAD-STATE-MONUMENT\'); parent.location.reload(true); return true\">'+'Diamond Head State Monument, Park and Trail'+'</a>'+'</b>'+'</div>'+
'</div>';

    contentstring.className = "map-popup";
    contentstring.style.height = "60px";
    var infowindow = new google.maps.InfoWindow({content: contentstring});
    google.maps.event.addListener(marker9, 'click', function() {
       infowindow.open(map,marker9);
    });

Another strange thing I noticed is that although I created the afterClose construct in the fancybox $.ready function, it doesn't get called when I force fancybox to close with parent.$.fancybox.close() but it gets called if I close fancybox normally. I should add that the code above is called inside the head section of my asp file rather than the body. I've been hacking this thing all night and I still don't see what's wrong. I would greatly appreciate any help to get this working.

To summarize, the calls within fancybox to close and reload the new url are:

    parent.$.fancybox.close();
    parent.location.assign(new-url);
    parent.location.reload(true);

But for some reason, fancybox closes and reloads the parent with the existing/old url.

EDIT - I just noticed that in Google Chrome, the callback function afterClose() is getting called, but in IE11 it's not getting called. For both browsers, the fancybox closes and reloads, but neither of them will assign the new url. This is the main reason I want to use fancybox instead just a new window popup.

I also forgot to mention, the url I'm testing the google maps api is on http://www.lookathawaii.com/proddetail.asp?prod=96815-THE-FAT-GREEK click on the "Map" tab then click on the map image (then drag the map toward north-west so you can see diamond head, which is south-east, then click the Marker in the middle of diamond head to see the infowindow popup with the link which should take users to my diamond head page). One more thing, the fancybox gets called from the url I'm testing like this:

    <a href="maps/96815-test1.asp?prod=96815-THE-FAT-GREEK&lat=21.284329&lng=-157.836873" class="fancybox fancybox.iframe">

Answer 1

I solved it with a very small change to my original code. I used the original 3 calls to:

    parent.$.fancybox.close();
    parent.location.assign(new-url);
    parent.location.reload(true);

based on what I read many people here say. However, what I learned is that calling 'reload(true)' is not necessary and actually messes things up for some reason. When I tested this order:

    parent.location.assign(new-url);
    parent.$.fancybox.close();

it worked perfectly and reloaded the parent window with the new url! So I made that simple change in my contentstring and it worked perfectly again! Now I've created a map with a handful of test locations where a user can go anywhere on my website from the map (tested in IE11 and Chrome).

I'm not sure why the first 3 calls that have been suggested didn't work, maybe it's a browser issue, but the two calls necessary are 'assign(new-url)' and 'close()' in that exact order. The browser will refresh automatically after the fancybox is closed without any call to 'reload()'.

Answer 2

You may need to create a temporary element in your parent page and target that element's ID from the child (iframed) page so try

In your parent page :

var tempRedirect; // we'll use this var to store the URL coming from the iframe
jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        type : "iframe",
        beforeShow : function () {
            // we create a temp element inside fancybox so it will be removed along
            $(".fancybox-wrap").append($("<span />", {
                    id : "tempRedirect", // <== the selector we'll target from iframe
                    style : "display:none; position:aboslute;lef:-999px;" // not visible
                }));
        },
        beforeClose : function () {
            // capture the content of our temp element (may be empty if closed normally)
            tempRedirect = $("#tempRedirect").html();
        },
        afterClose : function () {
            // validate if the variable is empty, otherwise redirect
            if (tempRedirect != "") {
                window.location.href = tempRedirect;
            };
        }
    });
}); // ready

Now, on your child page :

jQuery(document).ready(function ($) {
    // bind a click event to your selector (marker)
    $(".child_link").on("click", function (e) {
        e.preventDefault();
        $("#tempRedirect", top.document).append(this.href); // target the element on parent page
        parent.jQuery.fancybox.close(); // close fancybox on parent
    }); // on
}); // ready

Since you are creating the variable contentstring for your marker, you may prefer to place the script inside a function and call it within onclick passing the href as parameter, but you can get the big picture from the code above.

See DEMO at picssel.com

NOTES:

• The DEMO uses fancybox v2.x.
• As far as I can tell, it works with IE7+, Firefox, Chrome, Opera ans Safari.
• jQuery should be loaded on both, the parent and child pages.
• Working with iframes is subject to the same origin policy