jQuery and AJAX Loading

Question

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

People with slower connections may think something is not working if they have to wait. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Apr 12, 2011 at 13:00
hmmm... well this is for a project for Uni, so I wont have to worry about that really... i just want to do it for asthetics — nmyster
– nmyster, Commented Apr 12, 2011 at 13:01

Hugo Delsing · Accepted Answer · 2011-04-12 13:42:47Z

1

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);
  });
}

answered Apr 12, 2011 at 13:42

Hugo Delsing

14.3k5 gold badges50 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael J.V. · Accepted Answer · 2011-04-12 13:07:54Z

1

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.

answered Apr 12, 2011 at 13:07

Michael J.V.

5,6091 gold badge22 silver badges16 bronze badges

3 Comments

Michael Rose Over a year ago

I thought the success function is only called after some data arrived from the server?

Michael J.V. Over a year ago

Try with async: false and you'll notice the difference. I'd love to explain what's happening but my time is limited at this point, you might want to try to google what's going on with the success function and async / sync calls.

Michael Rose Over a year ago

I hope I got that right, if async is false, code execution will stop until the data arrives and then calls the success function but at the same time blocking everything else! If async is true, normal code execution will continue but the success function will be called once the data arrived... so I don't think that this really is a solution, @nmyster have you tried it?

Michael Rose · Accepted Answer · 2011-04-12 13:08:16Z

1

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...

answered Apr 12, 2011 at 13:08

Michael Rose

7,8203 gold badges24 silver badges27 bronze badges

1 Comment

nmyster Over a year ago

mediaLoader will, if its a video, get the details of the video and then embed it, i thought that might be a issue :/

Bucky · Accepted Answer · 2011-04-12 13:15:38Z

1

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...
});

answered Apr 12, 2011 at 13:15

Bucky

9591 gold badge11 silver badges28 bronze badges

Collectives™ on Stack Overflow

jQuery and AJAX Loading

4 Answers 4

Comments

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related