Ajax help!

JavaScript
1

I am building a page with ajax a jquery. I have built the page with a scrolling nav and it works fine. I am taking the next step and loading the html snipet into the DOM with ajax because I have a few navs, one for each section. I got it to load fine but the scrolling jquery nav doesn’t work anymore. The markup in the page is perfect it just no longer works. I am new to all this scripting so there must be something I don’t know in order to make this work. All the proper scripts are waiting for the markup but there seems to be some sort of disconnect. Can anyone help me with this. (loading markup into a page that uses other scripts)

The page is local now so I don’t have a url. If I you need to see the page I can set it up to get this working.

Thanks all

2

Could you please post the JS source you are using

3

<script src=“http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js”></script>
<link rel=“stylesheet” type=“text/css” href=“stylesheets/scrollable-horizontal-projectnav.css” />
<link rel=“stylesheet” type=“text/css” href=“stylesheets/scrollable-buttons-projectnav.css” />

<script type=“text/javascript”>
$(document).ready(function(){

	$(".scrollable").scrollable();

});

</script>

<script type=“text/javascript”>
$(document).ready(function(){

			//Full Caption Sliding (Hidden to Visible)
			$('.boxgrid.captionfull').hover(function(){
				$(".cover", this).stop().animate({top:'380px'},{queue:false,duration:160});
			}, function() {
				$(".cover", this).stop().animate({top:'400px'},{queue:false,duration:160});
			});
		
		});
	&lt;/script&gt;

<script type=“text/javascript”>
$(document).ready(function(){

$.ajaxSetup ({
cache: false
});
var ajax_load = “<img src=‘images/load.gif’ alt=‘loading…’ />”;

// load() functions
var loadUrl = “identity_nav.html”;
$(“.identity”).click(function(){
$(“#projectnav”).html(ajax_load).load(loadUrl);
});
});
</script>

thanks so much for trying to help

4

I also can’t seem to put all the scripts in one ready function. They must be separate to work.

5

The error tells me I am missing an {
here:
$.ajaxSetup ({
cache: false
});

sorry about that

6

I am also noticing that the source doesn’t show the inserted markup from the ajax load(). In firebug It is there but the source it is not…?

7

I placed the .scrollable script inside the loaded page and it works now, but I am now having trouble loading the rest of the navs.
Here is the script

<script type=“text/javascript”>
$(document).ready(function(){

$.ajaxSetup ({
cache: false
});
var ajax_load = “<div class=‘loader’><img src=‘images/load.gif’ alt=‘loading…’ /></div>”;

// load() functions
var loadUrl = “identity_nav.html”;
$(“.identity”).click(function(){
$(“#projectnav”).html(ajax_load).load(loadUrl);
});

  //  load() functions  
 var loadUrl = "web_nav.html";  
 $(".web").click(function(){  
     $("#projectnav").html(ajax_load).load(loadUrl);  
 }); 
 
  //  load() functions  
 var loadUrl = "print_nav.html";  
 $(".print").click(function(){  
     $("#projectnav").html(ajax_load).load(loadUrl);  
 }); 
 
  //  load() functions  
 var loadUrl = "package_nav.html";  
 $(".package").click(function(){  
     $("#projectnav").html(ajax_load).load(loadUrl);  
 });

});
</script>

I getting the package nav for every click… the last script.
Do I need to separate each?

8

Ok I separated each and it works but this is becoming what looks like a lot of code. Is there a way to shorten this up?

<script type=“text/javascript”>
$(document).ready(function(){

$.ajaxSetup ({
cache: false
});
var ajax_load = “<div class=‘loader’><img src=‘images/load.gif’ alt=‘loading…’ /></div>”;

// load() functions
var loadUrl = “identity_nav.html”;
$(“.identity”).click(function(){
$(“#projectnav”).html(ajax_load).load(loadUrl);
});
});
</script>
<script type=“text/javascript”>
$(document).ready(function(){

$.ajaxSetup ({
cache: false
});
var ajax_load = “<div class=‘loader’><img src=‘images/load.gif’ alt=‘loading…’ /></div>”;

  //  load() functions  
 var loadUrl = "web_nav.html";  
 $(".web").click(function(){  
     $("#projectnav").html(ajax_load).load(loadUrl);  
 });

});
</script>
<script type=“text/javascript”>
$(document).ready(function(){

$.ajaxSetup ({
cache: false
});
var ajax_load = “<div class=‘loader’><img src=‘images/load.gif’ alt=‘loading…’ /></div>”;
// load() functions
var loadUrl = “print_nav.html”;
$(“.print”).click(function(){
$(“#projectnav”).html(ajax_load).load(loadUrl);
});

});
</script>
<script type=“text/javascript”>
$(document).ready(function(){

$.ajaxSetup ({
cache: false
});
var ajax_load = “<div class=‘loader’><img src=‘images/load.gif’ alt=‘loading…’ /></div>”;
// load() functions
var loadUrl = “package_nav.html”;
$(“.package”).click(function(){
$(“#projectnav”).html(ajax_load).load(loadUrl);
});
});
</script>

9

Can anyone tell me why when I take this same script above and put it in an external js file I get an error but when directly in the page it is okay.

The error tells me I am missing an {
here$.ajaxSetup ({
cache: false
});

It seems fine to me and works fine when directly in the page
…?

10

Good to hear you got it working, sorry for the late reply as well. Had a full day at work, try the following. I haven’t tested it but it should work fine

$(document).ready(function(){
    // Loading image
    var ajax_load = "<div class='loader'><img src='images/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 "identity_nav.html";
            break;
            case "web":
                return "web_nav.html";
            break;
            case "print":
                return "print_nav.html";
            break;
            case "package":
                return "package_nav.html";
            break;
            default:
                return;
        }
    };

    // Run the Ajax query
    $(".identity").click(function(){
        $("#projectnav").html(ajax_load).load(getURL(this));
    });
    
    // END DOCUMENT READY
});
11

Doesn’t seem to be working. It just sits there and loads. any idea why?

12

// JavaScript Document

$(document).ready(function(){
// Loading image
var ajax_load = “<div class=‘loader’><img src=‘images/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 "identity_nav.html";
        break;
        case "web":
            return "web_nav.html";
        break;
        case "print":
            return "print_nav.html";
        break;
        case "package":
            return "package_nav.html";
        break;
        default:
            return;
    }
};

// Run the Ajax query
$(".identity").click(function(){
    $("#projectnav").html(ajax_load).load(getURL(this));
});

  //  load() functions  
 var loadUrl = "web_nav.html";  
 $(".web").click(function(){  
 $("#projectnav").html(ajax_load).load(getURL(this));
});

      //  load() functions  
 var loadUrl = "web_nav.html";  
 $(".web").click(function(){  
   $("#projectnav").html(ajax_load).load(getURL(this));
});

  //  load() functions  
 var loadUrl = "print_nav.html";  
 $(".print").click(function(){  
 $("#projectnav").html(ajax_load).load(getURL(this));
});

  //  load() functions  
 var loadUrl = "package_nav.html";  
 $(".package").click(function(){  
$("#projectnav").html(ajax_load).load(getURL(this));
});


// END DOCUMENT READY

});

13

Sorry just say a mistake but still not working. // JavaScript Document $(document).ready(function(){ // Loading image var ajax_load = "
“; // 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 “identity_nav.html”; break; case “web”: return “web_nav.html”; break; case “print”: return “print_nav.html”; break; case “package”: return “package_nav.html”; break; default: return; } }; // Run the Ajax query $(”.identity").click(function(){ $(“#projectnav”).html(ajax_load).load(getURL(this)); }); // load() functions $(“.web”).click(function(){ $(“#projectnav”).html(ajax_load).load(getURL(this)); }); // load() functions $(“.web”).click(function(){ $(“#projectnav”).html(ajax_load).load(getURL(this)); }); // load() functions $(“.print”).click(function(){ $(“#projectnav”).html(ajax_load).load(getURL(this)); }); // load() functions $(“.package”).click(function(){ $(“#projectnav”).html(ajax_load).load(getURL(this)); }); // END DOCUMENT READY });

14

That was a little messed up hope this is better


// JavaScript Document


$(document).ready(function(){
    // Loading image
    var ajax_load = "<div class='loader'><img src='images/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 "identity_nav.html";
            break;
            case "web":
                return "web_nav.html";
            break;
            case "print":
                return "print_nav.html";
            break;
            case "package":
                return "package_nav.html";
            break;
            default:
                return;
        }
    };
 
    // Run the Ajax query
    $(".identity").click(function(){
        $("#projectnav").html(ajax_load).load(getURL(this));
    });
	
	  //  load() functions    
     $(".web").click(function(){  
     $("#projectnav").html(ajax_load).load(getURL(this));
    });
	
		  //  load() functions   
     $(".web").click(function(){  
	   $("#projectnav").html(ajax_load).load(getURL(this));
    });
	
	  //  load() functions   
     $(".print").click(function(){  
	 $("#projectnav").html(ajax_load).load(getURL(this));
    });
	
	  //  load() functions   
     $(".package").click(function(){  
	$("#projectnav").html(ajax_load).load(getURL(this));
    });
	
	
    // END DOCUMENT READY
});
15

Sorry about that, forgot about the jQuery identifiers. You don’t need to declare the same code multiple times as it does the same thing

$(document).ready(function(){
    // Loading image
    var ajax_load = "<div class='loader'><img src='images/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 "identity_nav.html";
            break;
            case "web":
                return "web_nav.html";
            break;
            case "print":
                return "print_nav.html";
            break;
            case "package":
                return "package_nav.html";
            break;
            default:
                return;
        }
    };

    // Run the Ajax query
    $(".identity, .web, .print, .package").click(function(){
        $("#projectnav").html(ajax_load).load(getURL(this));
    });
    
    // END DOCUMENT READY
});

The above code will work fine

16

Still just loading? I am I missing something?

17

I’d also like it to fadeIn in possible. How is that done? I know .fadeIn() but when I tried it it didn’t work.

18

Try this

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

Still just loading

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

Is there a link to which i can view the script live?