asynchronous callback function in a loop

Question

This is kind of different situation then any other question.

I have several div elements with class and data-label attributes.

<div class='toLoad' data-label='a'></div>
<div class='toLoad' data-label='b'></div>
<div class='toLoad' data-label='c'></div>
<div class='toLoad' data-label='d'></div>

Here is the javascript:

function theData(e) {
  // What do I do here to put the data to their respective div
}

function createScript() {
  var elem = document.querySelectorAll('div.toLoad');
  for (var i = 0; i < elem.length; i++) {
    var theLabel = elem[i].getAttribute('data-label'),
      theLink = "/index/"+ theLabel +"&callback=theData",
      currentItem = elem[i],
      e = document.createElement('script');
    e.src = theLink;
    e.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(e);
  }
}

After putting the above Javascript, a script element is appended. After loading, the script returns a callback function named as theData with all content as argument. I want append the returned content to their respective div elements.

I don't know how to exactly put them in.

Answer 1

Assuming that callback method is available and it has two arguments data-label value (to identity which div should be populated) and the data itself

function callback( dataLabel, htmlData )
{
  $( "div[data-label='" + dataLabel + "']".html( htmlData ) );
}