Question

A the end of my index.html file I’m including two script files. One of files handles loading page content with jquery. The other file handles manipulating a tabbed content area on my home page, also jquery. If I put the file for the tabbed content area after the file for the ajax page load file, then tabs work but the ajax for the page load does not work. If I reverse the order of those files, then the page load ajax works but not the tabs. What could be causing this?

Here’s the file for the tabbed content:

$(document).ready(function (){
initialize();
});

function initialize() {
//Click on nav to load external content through AJAX
// $('#topnav a').click(function(e){
//  e.preventDefault();
//  $('#pages').load( e.target.href + ' #loadcontent'); //pages finished loading
// }); //clicked on nav

    $(function() {

    $("#tabedarea").organicTabs();

    $("tabedarea").organicTabs({
        "speed": 200
    });
});
}

(function($) {

$.organicTabs = function(el, options) {

    var base = this;
    base.$el = $(el);
    base.$navtabs = base.$el.find(".navtabs");

    base.init = function() {

        base.options = $.extend({},$.organicTabs.defaultOptions, options);

        // Accessible hiding fix
        $(".hidetabs").css({
            "position": "relative",
            "top": 0,
            "left": 0,
            "display": "none"
        }); 

        base.$navtabs.delegate("li > a", "click", function() {

            // Figure out current list via CSS class
            var curList = base.$el.find("a.current").attr("href").substring(1),

            // List moving to
                $newList = $(this),

            // Figure out ID of new list
                listID = $newList.attr("href").substring(1),

            // Set outer wrapper height to (static) height of current inner list
                $allListWrap = base.$el.find(".list-wrap"),
                curListHeight = $allListWrap.height();
            $allListWrap.height(curListHeight);

            if ((listID != curList) && ( base.$el.find(":animated").length == 0)) {

                // Fade out current list
                base.$el.find("#"+curList).fadeOut(base.options.speed, function() {

                    // Fade in new list on callback
                    base.$el.find("#"+listID).fadeIn(base.options.speed);

                    // Adjust outer wrapper to fit new list snuggly
                    //var newHeight = base.$el.find("#"+listID).height();
                    //$allListWrap.animate({
                    //    height: newHeight
                    //});

                    // Remove highlighting - Add to just-clicked tab
                    base.$el.find(".navtabs li a").removeClass("current");
                    $newList.addClass("current");

                });

            }   

            // Don't behave like a regular link
            // Stop propegation and bubbling
            return false;
        });

    };
    base.init();
};

$.organicTabs.defaultOptions = {
    "speed": 300
};

$.fn.organicTabs = function(options) {
    return this.each(function() {
        (new $.organicTabs(this, options));
    });
};

})(jQuery);  

And here’s the file for the page load ajax:

// remap jQuery to $
(function($){})(window.jQuery);


/* trigger when page is ready */
$(document).ready(function (){
    initialize();

});

function initialize() {
    //Click on nav to load external content through AJAX
    $('#topnav a, #bottomnav a').not('#bottomnav #fbcallus a').click(function(e){
        e.preventDefault();
        $('#pages').load( e.target.href + ' #loadcontent'); //pages finished loading
    }); //clicked on nav
    //handle AJAX for left nav

}

Answer 1

You’re creating global functions with the same name initialize change the names of those or just one. The one that’s loaded afterwards overrides the first