Creating 2nd html element in javascript deletes the first

Question

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.

* UPDATE * 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.

my html

<div class="menu_container">
    <div class="menu_element" id="plant_div">
        <select  class="Menu" id="plant_select">
        <script>     
             <!--var plant_select = document.createElement("select");  -->
             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 && xmlhttp.readyState==4)
                {
                    processCSV(xmlhttp.responseText, plant_select,"select plant");
                }
             }
        </script>
        </select>
    </div>
    <div class="menu_element" id="plantType_div">
        <select  class="Menu" id="plantType_select">
        <script>
             <!--var plant_select = document.createElement("select");  -->
             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 && xmlhttp.readyState==4)
                {
                    processCSV(xmlhttp.responseText, plantType_select,"select PLant Type);
                }
             }
        </script>
        </select>
    </div>

</div>

a seperate js file that contains

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 < len; i++){
                    option = document.createElement("option");
                    option.setAttribute("value", lines[i]);
                    option.innerHTML = lines[i];                        
                    frag.appendChild(option);
                    }

                parentNode.appendChild(frag);
             }

Does plant_select really have an html comment wrapped around it? If not, when is it ever added to the DOM? — James Montagne
– James Montagne, Commented Oct 14, 2013 at 19:02
@DontVoteMeDown I was hoping the reuse the function for each select. I tried moving it out to its own js file but it still does not work. — TheCodeNovice
– TheCodeNovice, Commented Oct 14, 2013 at 20:01
@JamesMontagne the script sits in a select element with an id XXXX_select. So I had the stuff to the DOM via the append where the parentnode is that element explicitly in html code — TheCodeNovice
– TheCodeNovice, Commented Oct 14, 2013 at 20:03

Community · Accepted Answer · 2017-05-23 12:21:08Z

1

The second function with the same name overwrites the first.

Use two methods of the same name in different .js files

Use unique function names, or just move the function out and call it twice.

function processCSV(file,parentNode) {...}

processCSV('/my/file/path', myParentNode);

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Oct 14, 2013 at 19:05

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

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

5 Comments

TheCodeNovice Over a year ago

is there anyway to make my script modular so I can use it mulitple times without resorting to func1 func2 func3 etc...

isherwood Over a year ago

Sure. You just have to specify the arguments for each call. Answer updated.

TheCodeNovice Over a year ago

I have done as you said and split it out and I have it passing a different parent node in the DOM. It still is wipingout what was done on the first call. Any ideas? I have updated my code above.

isherwood Over a year ago

Nothing's jumping out at me, but it seems like you're still duplicating a lot of code.

TheCodeNovice Over a year ago

I think i narrowed it down to the readystate never equalling 4. I am not sure why it will not work when I have two calls but will work with only 1. IS my code bad for loading the file ?

Tetsujin no Oni · Accepted Answer · 2013-10-14 20:47:04Z

1

You are never selecting the element to which you want the items added. Pass document.getElementById(idOfParentNode) to processCSV each time you're calling it. You don't need to have the calls inline in the select tags, either.

(That is, plant_select and plantType_select aren't currently being defined to anything in your code shown)

And, because you're doing all the javascript we can see in the global scope, those variables are all attached to window.... which means you're stepping on your xmlhttp object by re-initializing it. Consider encapsulating more into better-factored functions in a single script block.

answered Oct 14, 2013 at 20:47

Tetsujin no Oni

7,3652 gold badges31 silver badges46 bronze badges

1 Comment

TheCodeNovice Over a year ago

I think you are on to something with the xmlhttp statement. My first one never really completes but my second one does. Is there anyway to fix that? And what do you mean by encapsulate more?

Collectives™ on Stack Overflow

Creating 2nd html element in javascript deletes the first

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related