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.