Question

I have written the following code hoping that it would load ajax only if the content was not already loaded into the div. Basically when I load the content with ajax and give the content a class name depending on which content is currently loaded. If the current class name is the content that is already loaded in the div, then I don’t load the ajax, otherwise load content with ajax.

Right now the ajax request fires no matter what the class name of the div. Any idea why this isn’t working?

Here is the site: (click the left eye)

http://www.uvm.edu/~areid/homesite/index.html

Here is the javascript function:

else if(id =='left-eye23')
                    {       
                        leftcontent = $("#left-content");                       
                        content = leftcontent.attr('class');
                        if(content !== 'photos')
                        {       
                            alert("content is not photos"); 
                            SlideOut(move);
                            $("#relativeContainer").css('z-index','-1');
                            var leftcontent;
                            $("#left").bind("webkitTransitionEnd mozTransitionEnd oTransitionEnd msTransitionEnd transitionend", 
                            function(){ 
                                $.ajax({
                                url:'photos.php',
                                beforeSend: function(){
                                    leftcontent.html('<img src="loading.gif" /> Now loding...');
                                },
                                }).done(function(data){
                                    leftcontent.html(data);
                                    leftcontent.addClass("photos");
                                }); 
                                });
                            }
                        else if(content == 'photos')
                        {
                            SlideOut(move); 
                            $("#relativeContainer").css('z-index','-1');
                            alert('content is photos');
                        }

                    }

Answer 1

The best way to verify a class with jQuery is via .hasClass(). If the element has multiple classes, it won’t correctly match the .attr() test you are using by equality.

// If it doesn't have the class 'photos', do your AJAX call
if( !$("#left-content").hasClass('photos'))
{       
   alert("content is not photos"); 
  SlideOut(move);
 $("#relativeContainer").css('z-index','-1');
 // Then do the AJAX, etc...
}
// Otherwise do the other stuff...
// Unless you have another case not shown in your code above,
// this can just be a plain else {} rather than the else if {}
else if ($("#left-content").hasClass('photos'))
{
  SlideOut(move); 
  $("#relativeContainer").css('z-index','-1');
  alert('content is photos');
}