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

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