Databases
StackOverflow2013
Postsdbo
POCreating 2nd html element in javascript deletes the first
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCreating 2nd html element in javascript deletes the first
    text
    copied!<p>I have a javascript code that dynamically creates a select box with data from a file. They are a bit big and I am going to try and move then to am external js rather in the HTML once everything is working ok. My problem is that it seems when I try to run the same script, on a different file of course, it clears out the info from the first script. So I wind up with one select element populated and one blank. the last script is the only one that holds, which is why I think it is somehow clearing out the first one. Any suggestions. I am buidling up a menu so I needs this code to be modular. Thanks in advance. </p> <p><strong>* UPDATE *</strong> I have split out the processcsv file and I still get the same results. In each fall of the function i am passing a different select element. On the webpage I will only see the last one execute with the select processed earliar rendered blank. I think the issue is the that my first xmlrequest never achieves readystate == 4 but the last one does. I am not sure what I can do to control that and why is it all but the last one that fails. </p> <p>my html </p> <pre><code>&lt;div class="menu_container"&gt; &lt;div class="menu_element" id="plant_div"&gt; &lt;select class="Menu" id="plant_select"&gt; &lt;script&gt; &lt;!--var plant_select = document.createElement("select"); --&gt; var datafile = ''; var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET","http://localhost:8080/res/plants.csv",true); xmlhttp.send(); xmlhttp.onreadystatechange = function() { if(xmlhttp.status==200 &amp;&amp; xmlhttp.readyState==4) { processCSV(xmlhttp.responseText, plant_select,"select plant"); } } &lt;/script&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="menu_element" id="plantType_div"&gt; &lt;select class="Menu" id="plantType_select"&gt; &lt;script&gt; &lt;!--var plant_select = document.createElement("select"); --&gt; var datafile = ''; var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET","http://localhost:8080/res/planttypes.csv",true); xmlhttp.send(); xmlhttp.onreadystatechange = function() { if(xmlhttp.status==200 &amp;&amp; xmlhttp.readyState==4) { processCSV(xmlhttp.responseText, plantType_select,"select PLant Type); } } &lt;/script&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>a seperate js file that contains </p> <pre><code>function processCSV(file,parentNode,defaultmessage) { var frag = document.createDocumentFragment() , lines = file.split('\n'), option; var intial_option = document.createElement("option"); intial_option.setAttribute("value",""); intial_option.setAttribute("disabled","disabled"); intial_option.setAttribute("selected","selected"); intial_option.innerHTML = defaultmessage; frag.appendChild(intial_option) for (var i = 0, len = lines.length; i &lt; len; i++){ option = document.createElement("option"); option.setAttribute("value", lines[i]); option.innerHTML = lines[i]; frag.appendChild(option); } parentNode.appendChild(frag); } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload