Jquery colorbox - redirect/forward inside existing colorbox

So I have a colorbox loaded. I'd like to be able to redirect/forward to another page inside the existing colorbox.

window.location = href; won't work here.

EDIT: Being more specific, I want to intercept a form submit, and redirect if necessary.

    $("#search-center-form").live("submit", function () {
        alert('clicked');
        $.post('myurl', function(data) {
            console.log(data);
            if (data) {
                $.colorbox({href:'http://www.google.com/'});
            }
                }, 'json');
        return false;
    });

The original colorbox is opened up like so:

$.fn.colorbox({'href': block, 'open':true, 'inline':true, 'width':'530px', 'height':'260px'});

And now I'm trying to load an external URL into that colorbox. I suppose AJAX is an option but if you can load an iFrame in a colorbox, this should be possible too shouldn't it?

Thanks!

Solution

You're almost there, but there's a couple reasons why that code isn't working.

One is that you are trying to load content from another domain without the proper options. In order to do that, you need to set the iframe:true, width, and height. If you are loading content from your own domain, then you may not need the iframe option (and then colorbox will be able to automatically determine width and height). If all the necessary css or js is loaded, then you don't need it. If your new page has some css or js in its <head> that's not already loaded, then you'll need the iframe.

The other problem is not a mistake, but how google handles requests. Which is to say in the case of loading their site in an iframe, they don't; they will block the request, so you will not be able to use google with colorbox (without creative handling). Incidentally, although it's handled differently, stackoverflow won't allow it either, so don't bother putting that one in either.

In any case, your colorbox redirect (in your post callback) should look like this:

$.colorbox({href:'http://www.yahoo.com', iframe:true, width:"75%", height: "75%"});