CODEWITHSUNDEEP
phpjqueryajax
nmyster
nmyster

Reputation: 452

jQuery and AJAX Loading

I am making a page that when you click on a "story" it loads the text and the media for that story, I have a seperate PHP script for the story text and the media (video or image) loading. both scripts work and actually it all works.

My problem is that when you click the story it is supposed to load the text, and then slide the media down when it's loaded However, it slides down even when the text is still loading.

newspaper.nmyster.co.uk/ is the site in question. click on the vimeo story on the left and see what I mean.

The code for the AJAX that loads the story and media is:

$.ajax({
  url: './scripts/storyLoader.php?storyid='+storyId,
  success: function(result){
    $('#storycontainer').hide();
    $('#loading').remove();
    $('#storycontainer').hide(0).html(result).fadeIn(1000);
    }
});
$.ajax({
  url: './scripts/mediaLoader.php?storyid='+storyId,
  success: function(result){
    $('.martefact').hide();
    $('#loading').remove();
    $('.martefact').html(result).slideDown(1000);
    }
});

Basically, I only want the media div to slide down once the video or image has finished loading.

Thanks

Upvotes: 1

Views: 481

Answers (4)

Hugo Delsing
Hugo Delsing

Reputation: 14173

I would use something like this:

var requestHandle;
function loadPage(url, vars) {
  //cancel pending
  if (requestHandle!=null)
      requestHandle.abort();

  //load page..
  requestHandle = $.get(url, vars, function(data) {
        $('#storycontainer').hide();
        $('#loading').remove();
        $('#storycontainer').hide(0).html(data).fadeIn(1000);
  });
}

Upvotes: 1

Bucky
Bucky

Reputation: 929

You need to use an 'on complete' callback function on the first animation.

Have a look jQuery api documentation for .fadeIn()

It should look something like:

$('#book').fadeIn('slow', function() {
    // Code to run after animation completed...
});

Upvotes: 1

Michael Rose
Michael Rose

Reputation: 7820

What does your mediaLoader.php script do? Does it just check the database whether there are any media entries for the given story and if so format them properly and output them? Because currently I don't think you can slide down after the video is completely loaded, since you are embedding a vimeo video container, which handles the loading of the video itself and you have no access to it...

Upvotes: 1

Michael J.V.
Michael J.V.

Reputation: 5609

Your request is asynchronous. It means that the script won't wait for data to load before executing the aesthetics bit. You need to add async: false to your $.ajax call (look up other options over at jQuery documentation). That way, browser will wait for data to arrive first before executing the rest of JS.

Upvotes: 1

Related Questions