Question

I’m having a problem whereby I am trying to load some html onto a page using jQuery.

The content itself loads fine, but what I am trying to do is make that content ‘draggable’ using jquery ui.

The problem that I am having is that when I call the function to make the content draggable, it hasn’t loaded yet, so nothing is being made draggable.

I tried, with some success, adding a setTimeout before the function call, this left it working, but not how i’d like it. The setTimeout wouldn’t work on slow internet connections, or when the site is loading slowly, as it’s too low. But if i set it too high then there’s a long wait before the content is moveable.

I was wondering if there’s a way to detect whether the content has loaded before calling the function?

My code:

  $(".naviitem").click(function(){     //When icon is clicked
    var i = $(this).attr('id');        //Get id of clicked icon
    $.when(load(i)).then(makeDrag());  //Load page then call makeDrag (Doesn't function properly)
  });


function load(i){

      $.get('wnd/' + i + '.htm', {}, function(data) {  //This all works
        var $response = $('<div />').html(data);
        var $load = $response.find('#p' + i);
        $('#page').append($load);
      },'html');
  }

 function makeDrag(){
      //does something here
  }

Answer 1

$.when(load(i)).then(makeDrag());

This should be:

$.when(load(i)).then(makeDrag); // Note the lack of () after makeDrag

You need to pass a function to .then, passing makeDrag() passes the result of that function, not the function itself.

Also, load should return $.get for $.when to work.

function load(i){
      return $.get('wnd/' + i + '.htm', {}, function(data) {  //This all works
        var $response = $('<div />').html(data);
        var $load = $response.find('#p' + i);
        $('#page').append($load);
      },'html');
}