0

So I am using d3 alongside jquery to load a template that will act as a popup. What I have is multiple identical buttons that will each fire this function and bring up this popup with specified text.

function(d, i){
  var x = d3.select("body")
    .append("div")
    .attr("id", "x" + i);

  $("#x" + i).load("template.html", function(){ $("#textBox").text(data)});
}

with the template:

<html>
  <div id="textBox"></div>
</html>

The d3.select.append is working as intended. Everytime a different button is clicked, a new div with the related id is created. However everytime .load() is called the text is loaded into the first div created instead of the div with the specified id. I believe I an misunderstanding how .load() is working, is the callback function of .load looking for the first instance of "#textBox"? If so is it possible to define a dynamic id within the template?

First click:

<div id = "x1">
  <div id="textBox">data1</div>
</div>

Second click:

<div id = "x1">
  <div id="textBox">data2</div>
</div>
<div id = "x2">
  <div id="textBox"></div>
</div>

Thank you for your time

kLai
  • 271
  • 3
  • 11

1 Answers1

1

You are misunderstanding how HTML works, not load. id attribute stands for identifier which has to be unique in a document. So the answer is neither about jQuery, nor D3.

You need to change textBox from being id attribute value, to class attribute value. The selector in the callback will change to '#x' + i + ' .textBox'.

petermeissner
  • 12,234
  • 5
  • 63
  • 63
saaj
  • 23,253
  • 3
  • 104
  • 105