5

I have some code which loads some html from another file, which works as it should. But I am struggling to access elements from this newly loaded data.

I have this code:

var widgetSettings = $("<div>").addClass("widgetsettings").load('dashboard/chart-settings-form.php #editChartForm');
widgetSettings.appendTo(widget.element);
//so far so good...
widget.element.find('.date').each(function(i){
  $(this).datetimepicker(); //this doesn't work
  console.log('testing... '+$(this).attr('id')); //this doesn't even work...
});

I'd expect it to find these text boxes in the '#editChartForm' form loaded from the above url (they're within a table):

<input type="text" name="datefrom" id="datefrom" class="date" /> To: <input type="text" name="dateto" id="dateto" class="date" />

The html is definitely being loaded. Just really confused as to why I can't access any elements from the load() event.

I also wanted to apply a click function to a cancel button on the same form, and I found the only way to make it work was to put it within a 'live' function before the load:

$('.cancel').live('click', function() {
  //actions here...
});

Any ideas what is going on?

Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
WastedSpace
  • 1,143
  • 6
  • 22
  • 34
  • Oh, don't worry about it. It's just the parent div element/object :) – WastedSpace Mar 10 '11 at 16:33
  • 1
    Possible duplicate of [How to select an element loaded through the jQuery load() function?](http://stackoverflow.com/questions/4450825/how-to-select-an-element-loaded-through-the-jquery-load-function) – Michał Perłakowski Dec 09 '16 at 20:46

2 Answers2

8

Simple! Because the load() method is asynchronous, and your line widget.element.find('.date') is firing BEFORE there's actually any elements in the DOM that match it! Just use a callback in your load(), like this:

$("<div>").addClass("widgetsettings").load('dashboard/chart-settings-form.php #editChartForm', function() {
  $('div.widgetsettings').find('.date').each(function(i){
    $(this).datetimepicker();
    console.log('testing... '+$(this).attr('id'));
  });
});
Groovetrain
  • 3,315
  • 19
  • 23
  • +1 for the nice code snippet. I had a similar problem but the response lacked this kind of clarity and description. This hill help my situation as well as many others who come across this I'm sure. – Ofeargall Mar 10 '11 at 16:45
  • Perfect! This solved my problem too. I needed to fetch the width of an element that I loaded using `.load` - putting it in the callback fixed it! Thanks! – bgmCoder Jun 24 '17 at 14:34
2
$("div").load("url here",function(){
    callbacks();
});

function callbacks(){

//put everything that you want to run after the load in here.
//also if the click function is in here it wont need the .live call

}

Edit: Also with the latest version of jQuery you can now use .on instead of .live (its much more efficient) ie.

$(".widgetsettings").on("click",".cancel",function(){
    //actions here
});

hope this helps :)

Ed Fryed
  • 2,160
  • 16
  • 14