Loading an external page (containing ajax) via ajax

Question

I have a working webpage that only displays external html files inside a div (using ajaxtabs .. based on which menu item is clicked). All this setting works fine, but one of the external html files uses colorbox (the jquery plugin) to display the built-in google form in a modal window (when you click the link).

This external html file itself works fine, but when it loads on the main page and the link is clicked, the google form replaces the whole page. Any idea what I can do wrong here?

PS: I'm not a web developer, so please ignore any of the best practices that I might break :)

Update:

Based on David's recommendation, I suggested that google has code that calls the frame. I copied all the code from b.html to the div inside a.html. So now there is only one a.html file. When the contents of this tab from the div are loaded by default, the google form displays fine, but when I click on the different tabs and then click on the default tab and then click on the google form, it goes out of the frame again: (. Looking at the source code of the form Google, I don't see javascript to break the frame ... any ideas?

Answer 1

Do you use the DynamicDrive ajaxTabs library? http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/

, , , , , href onclick, .

DynamicDrive, , :

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)
    }
}

, innerHtml . innerHtml , script . JQuery , HMTL script, . .

, ...

1) : :

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

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

jQuery . DD ...

2) (.. jQueryUI: http://jqueryui.com/demos/tabs/). .

, , DynamicDrive .

Answer 2

, , colorbox. Colorbox - , ( ), , .

, ajax $('#someElement').colorbox(), . // , .

...

, "ajax tabs" ... -, - "load complete", . jQuery ui ( ...) ...

$( ".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()
         }
     }
});

-

$( ".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()
         }
});

Answer 3

, , .

, .

Answer 4

, id 'foo', JS id 'foo', , , . .

Have you tried using Firebug or the Chrome console to navigate through the JS code while you were working, to try to identify a line or function that causes rogue behavior? Knowing exactly where the behavior is happening really helps put an end to this.