JQuery ajax .load() not working in IE6/IE7/IE8 – Working in FF/Safari/Chrome

ajaxjqueryload

I have a blog where each post doesn't have a detail page. Therefore each blog post has a footer link that loads comments and the comment form via jQuery ajax .load(); The code below doesn't work in IE6/7/8 but it does work in FF/Safari/Chrome.
Also, I'm pretty new to jQuery and javascript, and the code just looks so bloated. Can it be slimmed down?

$("a.load-comments").livequery(function() {
    $(this).click(function(){ // when you click on the link
        var commentsWrapper = $(this).parent("div").parent("div").find(".comments-wrapper"); // find the right comments wrapper
        var commentsFormWrapper = $(this).parent("div").parent("div").find(".comments-form-wrapper"); // find the right comments form wrapper
        var commentsLoader = $(this).parent("div").parent("div").find(".comments-loader"); // find the right loader image
        $(".comments-form-wrapper").fadeOut("fast"); // hide the comments form wrapper
        if(!$(this).hasClass("current")) { // check if link is currently opened
            $("a.load-comments, a.load-comments-form").removeClass("current"); // remove the 'current' class from all other links
            $(this).addClass("current"); // add current class to this link
            commentsLoader.fadeIn("fast"); // fade in the loader icon

            commentsWrapper.load($(this).attr("href"), function() { // load the comments
                commentsLoader.fadeOut("fast", function() { // fade out the loader image
                    commentsWrapper.fadeIn("fast"); // fade in the comments
                });
            });

        } else
        if($(this).hasClass("current")) { // if the link does have the class 'current'
            $(this).removeClass("current"); // remove the class 'current'
            commentsWrapper.fadeOut("fast"); // fade out comments
        }
        return false; // prevent following the link
    });
});

Best Answer

You could make it more efficient by doing some lookups only once and reusing them. Also, you may want to have the effects chained using callbacks so that the next action doesn't fire until the effect is complete. It's hard to know if this is what is tripping you up since you don't define what "not working" means.

$("a.load-comments").livequery(function() { 
    $(this).click(function(){ // when you click on the link
        var $this = $(this); 
        var $grandpa = $this.parent("div").parent("div");
        var commentsWrapper = $grandpa.find(".comments-wrapper"); // find the right comments wrapper 
        var commentsFormWrapper = $grandpa.find(".comments-form-wrapper"); // find the right comments form wrapper 
        var commentsLoader = $grandpa.find(".comments-loader"); // find the right loader image 
        commentsFormWrapper.fadeOut("fast", function() { // hide the comments form wrapper 
            if(!$this.hasClass("current")) { // check if link is currently opened 
                $("a.load-comments, a.load-comments-form").removeClass("current"); // remove the 'current' class from all other links 
                $this.addClass("current"); // add current class to this link 
                commentsLoader.fadeIn("fast", function() { // fade in the loader icon 

                    commentsWrapper.load($this.attr("href"), function() { // load the comments 
                        commentsLoader.fadeOut("fast", function() { // fade out the loader image 
                            commentsWrapper.fadeIn("fast"); // fade in the comments
                        });
                    }); 
                }); 
            } else {  // we know that this has class "current"
                $this.removeClass("current"); // remove the class 'current' 
                commentsWrapper.fadeOut("fast"); // fade out comments 
            }
        });
        return false; // prevent following the link 
    });
});
Related Topic