CODEWITHSUNDEEP
jquery
user136630
user136630

Reputation: 96

jquery: stop everything happening at once

I am just learning jquery, and it took me ages of browsing the jquery api site to create these few lines of code. What I want to do is use ajax to load content from another page and put it into an existing div. currently, the code works but when I click on a link all the steps get executed in one go, so its doing the load() function while the #content div is sliding up...

What I want it to do is to each line step by step, so after one line finishes THEN the next line starts (eg #content div slides up and then the things inside #content get deleted, but currently, #content div gets empty before it finishes sliding up)

$(document).ready(function(){

  $("#nav a").click(function(event){
    event.preventDefault();
    $("#content").slideUp();
    $("#content").empty();
    var navlink = $(this).attr("href");
    $("#content").load(navlink + " " + "#content");
    $("#content").slideDown();

  })


});

Upvotes: 4

Views: 511

Answers (3)

Ali Tarhini
Ali Tarhini

Reputation: 5358

you need make use of the callback of ajax methods in jquery. in particular the callback method which executes when the page you are loading is finished or the onsuccess method which executes when the page you are loading displayed without errors. this ensurs that the sliding up will only occure after the page has loaded

Upvotes: 2

Nick Craver
Nick Craver

Reputation: 630569

Use the callback options:

$(document).ready(function(){

  $("#nav a").click(function(event){
    event.preventDefault();
    $("#content").slideUp("normal", function() {
      $("#content").empty()
       .load($(this).attr("href") + " " + "#content")
       .slideDown(); //Just so this won't wrap here, can be one line
    });    
  });
});

Upvotes: 3

sepehr
sepehr

Reputation: 18475

most of the jquery functions accept callbacks.

Upvotes: 2

Related Questions