Question

Firstly I am very new to all forms of javascript, particularly anything remotely AJAX. That said, over the course of the last day I have managed to code a script that dynamically refreshes a single div and replaces it with the contents of a div on another page.

The problem however is that several of my other scripts do not work in the ajax refreshed content. The most important of which being “colorbox”.

I have spent several hours this evening researching this and am seeing lot’s of stuff regarding .load, .live… updating the DOM on refresh etc…etc… But to be quite honest most of it is going over my head currently and I wouldn’t know where to begin in terms of integrating it with the code I currently have.

My Ajax refresh code is as follows (My apologies if I haven’t used best practice, it was my first attempt):-

$(function()  {

$(".artist li.artist").removeClass("artist").addClass("current_page_item");
$("#rightcolumnwrapper").append("<img src='http://www.mywebsite.com/wp-content/images/ajax-loader.gif' id='ajax-loader' style='position:absolute;top:400px;left:190px;right:0px;margin-left:auto;margin-right:auto;width:100px;' />");

var $rightcolumn = $("#rightcolumn"),       
    siteURL = "http://" + top.location.host.toString(),     
    hash = window.location.hash,
    $ajaxSpinner = $("#ajax-loader"),
    $el, $allLinks = $("a");
            $ajaxSpinner.hide();


$('a:urlInternal').live('click', function(e) { 
    $el = $(this);
    if ((!$el.hasClass("comment-reply-link")) && ($el.attr("id") != 'cancel-comment-reply-link')) {         
        var path = $(this).attr('href').replace(siteURL, '');
        $.address.value(path);
        $(".current_page_item").removeClass("current_page_item");
        $allLinks.removeClass("current_link");
        $el.addClass("current_link").parent().addClass("current_page_item");
        return false;
    }

    e.preventDefault();

});  

$.address.change(function(event) {      
    $ajaxSpinner.fadeIn();
    $rightcolumn.animate({ opacity: "0.1" })
    .load(siteURL + event.value + ' #rightcolumn', function() {
        $ajaxSpinner.fadeOut();
        $rightcolumn.animate({ opacity: "1" });
    });
});});

I was hoping someone might be kind enough to show me the sort of modifications I would need to make to the above code in order to have the colorbox load when the contents of #rightcolumn have been refreshed.

There is also a second part to this question. My links to the pictures themselves are now also being effected by the hashtag due to the above code which will in turn prevent the images themselves from loading correctly in the colorbox I should imagine. How can I prevent these images from being effected and just have them keep the standard URL. I only want the above code to effect my internal navigation links if at all possible.

Many thanks guys. I look forward to your replies.

Answer 1

That’s a lot of code to review so I’ll focus first on the conceptual side of things. Maybe that you will give you some clues…

It sounds like when you load content via Ajax the DOM is changed. No worries, that’s kind of what we expect. However, scripts loaded before the Ajax calls may have difficulty if they are bound to elements that weren’t there at page load time or are no longer there.

JQuery’s live function is one solution to that. Instead of binding to a specific element (or collection of elements) at particular point in time, live lets you specify a binding to an element (or collection) of elements without regard to when they show up in the DOM (if ever).

ColorBox, however, in its default “vanilla” use abstracts that all away and, I believe, uses classic DOM binding – meaning the elements must be present at bind time. (Since you don’t show your call to ColorBox I can’t see how your using it.)

You may want to consider re-initalizing ColorBox after each content load by Ajax to be certain the binding happens the way you need it to.