Jquery: Loading an HTML page and then another html page via AJAX

Question

  //when document loads
   $(document).ready(function() {

    //navigation item is clicked
     $('.nav_item').click(function() {

    //get the clicked nav items id
    var nav_item = $(this).attr("id");
    var location_to_load = nav_item + '.html';

   //load the loading html then the page
   $('#sliding_content_container').load('loading.html', null, showResponse);

   //load the page
   function showResponse(){
    $('#sliding_content_container').delay(900).load(location_to_load);
   };

   //dont refresh
   return false;
   }); 
   });

Hey, I'm learning Jquery and just wondered why I can't call a "loading page" and then the destination with a delay, it seems everything I try doesn't work for instance adding .delay on or chaining the functions..

any help will be great, I'm giving jquery a good old crack.

thanks

Answer 1

The delay method is used for animations.
It adds a delay item to the animation queue, delaying any animations called after it.
It will not affect normal methods.

Instead, you should call the setTimeout function, like this:

$('#sliding_content_container').load('loading.html', null, function() {
    setTimeout(function() { 
        $('#sliding_content_container').load(location_to_load);
    }, 900);
});