Loading dynamic data into a dynamic element

Question

I make an ajax call that returns json data and tells me what html template to load and also the data needed to populate the template. If I load the template outside of the ajax call the data populates fine, however if i try and load the html within the ajax call, i see the html elements have loaded, but i am unable to populate them.

$.ajax({
type: "POST",
url: "http://some-url/items-json/item_data.json",
dataType: "json",
async: true,
success: function( data ) {

     // template_name will be an html file like template_10.html
     // #player-template is the div id i want to load it into   
     $('#player-template').load(data.template_name);


    // these elements get created from the dynamic template that gets loaded above
    $('#ques_intro').html(data.ques_intro);
    $('#question').html(data.question);
  } 
});

PSL · Accepted Answer · 2013-07-05 21:17:00Z

1

use the complete call back argument of load, so that the elements added during load #ques_intro etc is accessible once the load is complete. Other wise it will run load and other statements as load being async.

 $('#player-template').load(data.template_name, function(){ // <-- Call back executes after the load is complete.
    $('#ques_intro').html(data.ques_intro); //Now you can access the elements as they will be available in DOM
    $('#question').html(data.question);

   });

.load( url , complete(responseText, textStatus, XMLHttpRequest) )

answered Jul 5, 2013 at 21:17

PSL

124k21 gold badges257 silver badges243 bronze badges

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

Comments

Nirvana Tikku · Accepted Answer · 2013-07-05 21:18:32Z

1

A simple approach would be to specify a callback handler so that you wait until your template has been loaded to insert the content.

As per the jQuery.load spec, you simply need to pass in a callback handler after the load argument.

For example..

$('#player-template').load(data.template_name,function(){
    $('#ques_intro').html(data.ques_intro);
    $('#question').html(data.question);
});

answered Jul 5, 2013 at 21:18

Nirvana Tikku

4,2152 gold badges23 silver badges28 bronze badges

Collectives™ on Stack Overflow

Loading dynamic data into a dynamic element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related