Loading external page (containing ajax) via ajax

Question

I have a working webpage which just displays external html files inside a div (using ajaxtabs.. based on which menu item is clicked). This whole setup is working fine, but one of the external html file uses colorbox (jquery plugin) to display an embedded google form on a modal window (when a link is clicked)

This external html file on its own works fine, but when it is loaded in on the main page and the link is clicked, the google form replaces the whole page. Any idea what I might be doing wrong here?

PS: I am not a web dev, so please ignore any of the best practices I might be violating :)

Update:

Based on David's recommendation, I assumed that google had some code that was causing the frame to be broken. I copied all the code from b.html to a div within a.html. So now there is just one file a.html. When this tab content from the div is loaded by default, the google form is rendered fine but when I click on different tabs and then click back on the default tab, and then click on the google form, it breaks out of the frame again :(. Looking at the source code for google form, I don't see any javascript to break the frame... any ideas?

Answer 1

Are you using DynamicDrive's ajaxTabs library? http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/

If so, it's possible that scripts in the page you're loading aren't running, and the link you're clicking is reverting to its href instead of using an onclick event like it should.

From DynamicDrive's source, here is the function called to load content into a tab:

ddajaxtabs.loadpage=function(page_request, pageurl, tabinstance){
    var divId=tabinstance.contentdivid
    document.getElementById(divId).innerHTML=ddajaxtabssettings.loadstatustext //Display "fetching page message"
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
        document.getElementById(divId).innerHTML=page_request.responseText
        ddajaxtabs.ajaxpageloadaction(pageurl, tabinstance)
    }
}

As you can see, this just sets the innerHtml property of the target element. A known side effect of innerHtml is that it does not automatically execute script tags when updating the property in this way. JQuery has extra logic built in that basically steps through the new HMTL and invokes any script tags it finds. I do not recommend attempting to reinvent that feature.

Things you can...

1) The quick and dirty solution: Change this line:

document.getElementById(divId).innerHTML=page_request.responseText

to:

$("#" + divId).html(page_request.responseText);

Get the power of jQuery without changing your existing code. DD's code might be broken in other places too...

2) Use a better tab library (i.e. the ones built into jQueryUI: http://jqueryui.com/demos/tabs/). More maintainable in the future.

As an aside, I tend to thing most anything on DynamicDrive is obsolete now and stray away from their solutions most of the time.

Answer 2

I'm guessing it has to do with the state of your document when you are executing the colorbox code. Colorbox is unobtrusive - meaning that if the plugin fails (aka markup is not ready) it will follow the link as it was never modified.

For example, if the ajax call is not complete by the time you do $('#someElement').colorbox() then there will be issues. When you are making calls to get pages/elements/whatever asynchronously this is a common problem.

This problem is solved by events...

I'm not sure what exactly 'ajax tabs' is... but if its worth anything it should have a kind of 'load complete' event listener that you could add the colorbox initialization. With jQuery ui tabs (very solid...) you can do it like so...

Supply a callback function

$( ".tabs" ).tabs({
   load: function(event, ui) { 
         //make sure the colorbox markup is in the tab being loaded
         if($(ui).find('.colorbox-class').length){
             $(".colorbox-class').colorbox()
         }
     }
});

OR - binding after initialization

$( ".tabs" ).bind( "tabsload", function(event, ui) {
         //make sure the colorbox markup is in the tab being loaded
         if($(ui).find('.colorbox-class').length){
             $(".colorbox-class').colorbox()
         }
});