Ajax help!

Here you go. Took me a minute to upload as there are a number of files.

http://www.imiworldwide.com/kaes/portfolio.html

I am using the script you wrote with the switch action. As you can see it just loads and loads.

Let me know

Thanks too for sticking with this

obj.attr('class').toLowerCase()

Problem: obj has no attr method, as obj is an HTMLLIElement

Try using one of these instead:

$(obj).attr('class').toLowerCase()

or

obj.className.toLowerCase()

or elsewhere:

getURL($(this))

My fault again, work is making me really tired lately. Try this

switch($(obj).attr('class').toLowerCase()){

That works! Thanks so much.:slight_smile:

The fadein isn’t working though.

Can you also tell me why I cannot put all the scripts into one document.ready?

The problem with using .html() and .fadeIn() together is that .html() triggers a hide/show event which doesn’t allow for animations to continue. Try the code below and see if it works

$("#projectnav").html(ajax_load).load(getURL(this), function(response){
    $(this).hide().fadeIn(1000, function(){
        $(this).text(response);
    });
});

As for not been able to add multiple instances of code into the document ready method i have no clue about that one as it should work find unless theres errors in your script.

Where would I use this? There is no click function? Or is this separate from that?

Can you add it in to this code block

$(document).ready(function(){
    // Loading image
    var ajax_load = "<div class='loader'><img src='images/cssimg/load.gif' alt='loading...' /></div>";
   
    // Setup the ajax methods
    $.ajaxSetup({
        cache: false
    });
   
    // Returns the URL based on the class given
    var getURL = function(obj){
       switch($(obj).attr('class').toLowerCase()){
            case "identity":
                return "navs/identity_nav.html";
            break;
            case "web":
                return "navs/web_nav.html";
            break;
            case "print":
                return "navs/print_nav.html";
            break;
            case "package":
                return "navs/package_nav.html";
            break;
            default:
                return;
        }
    };
 
	  $(".identity, .web, .print, .package").click(function(){
		$("#projectnav").html(ajax_load).load(getURL(this), function(){
			$(this).html().fadeIn(1000);
		});
	   
		return false;
	});
   
    // END DOCUMENT READY
});



Sorry I see

It does work but after it fades in the whole pages mark up loads after.

You the MAN! I removed the text part (response) and it works great.

Can you explain why there is a return false as this doesn’t look or act like a loop that needs to be stopped. I know very little JS but I thought that is what Return false was for.

Ok I am trying to implement this fadein to the rest of the scripts and am having trouble with the projects loading in.

Try clicking through http://kenaesthetic.com/portfolio.htm

$(document).ready(function(){
    // Loading image
    var ajax_load = "<div class='loader_display'><img src='images/cssimg/load.gif' alt='loading...' /></div>";
   
    // Setup the ajax methods
    $.ajaxSetup({
        cache: false
    });
   
    // Returns the URL based on the class given
    var getURL = function(obj){
       switch($(obj).attr('class').toLowerCase()){
            case "romare":
                return "projects/romare.html";
            break;
            case "eyce":
                return "projects/eyce.html";
            break;
            case "elund":
                return "projects/elund.html";
            break;
           
            default:
                return;
        }
    };
 
	  $(".romare, .eyce, .elund").click(function(){
		$("#container").html(ajax_load).load(getURL(this), function(response){
			$(this).hide().fadeIn(1000);
		});
	   
		return false;
	});
   
    // END DOCUMENT READY
});

</script>

It is the same and should work as the scripts do the same thing? What is wrong here?

You don’t need it there but in the past for browser compliance and for the sake of it been there i like using it to stop the page from continuing if an error occurs.

How about why the fadein doesn’t work for the actual projects? I am using the same code but not getting the same results.

I couldn’t find any [B]fadeIn/B methods in your code except for in the initial HTML loader code

The code for the project is embedded in the nav files that are loaded in initially. I pasted the code above.

I looked directly at the files and found that they are not all the same when animating. Double check your project files and i think you will find the answer

I’m stuck. The fadein lines are the same in both areas the only differeece is the container the files are loaded into.

This is the project container code

 $(".intervention, .mlccc, .pti").click(function(){
		$("#container").html(ajax_load).load(getURL(this), function(response){
   			$(this).hide().fadeIn(1000);
   	});

This is the nav container code


 $(".identity, .web, .print, .package").click(function(){
		$("#projectnav").html(ajax_load).load(getURL(this), function(response){
   		$(this).hide().fadeIn(1000);

});

I’m afraid I can’t see the problem. Any ideas?

It is the last function(response) on the top code block that doesn’t seem to be working. I also noticed the fadein doesn’t work at all in safari and IE8.

You can see they are exactly the same the bottom one works with the nav but the top one doesn’t with the projects.

What else could be the fault?