CODEWITHSUNDEEP
javascripthtml
Rambling Dave
Rambling Dave

Reputation: 23

IE 9 not showing table populated by js

I am having an issue with the 'addedItems' table not displaying in IE 9 but if used on Firefox 30 displays as it should. In IE it sends the post data and when I check the HTML with the developer tools it shows the html elements on the page. I have tried to see if setting the table display to block but there was no change.

The purpose of this code is to allow the user to select from a drop down list which type of equipment they want to add, then be able to add any number of items from either the Foo or Bar lists onto the table to be sent in the items[] post variable. The table also has a delete button for every row so that the user may take out erroneously added equipment.

Here is the HTML file:

<html>  
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    </head>
    <body>
    <form method="post">
        <ul>
            <li id="EquipmentSelector" >
                <label for="EquipmentType">Equipment Type</label>
            <div>
                <select id="EquipmentType" name="EquipmentType">

                    <option value="" selected="selected"></option>
                    <option value="0" >Foo</option>
                    <option value="1" >Bar</option>

                </select>
            </div>

        </li>
        <li id = "FooHolder">

            <label class="description" for="Foo">Foo</label>


                <select id="Foo">

                    <option value="" selected="selected"></option>

                        <option value="0" >Foo Zero</option>
                        <option value="1" >Foo One</option>
                        <option value="2" >Foo Two</option>
                        <option value="3" >Foo Three</option>

                </select>




            <input type = "button" value = "Add Foo" id = "FooClick" ></input>

        </li>
        <li id = "BarHolder">

            <label class="description" for="Bar">Bar</label>

                <select id="Bar">

                    <option value="" selected="selected"></option>

                    <option value="0" >Bar Zero</option>
                    <option value="1" >Bar One</option>
                    <option value="2" >Bar Two</option>
                    <option value="3" >Bar Three</option>

                </select>


            <input type = "button" value = "Add Bar" id = "BarClick" ></input>

        </li>

        <li>
        <table>
                    <tbody  id = "addedItems">
                    </tbody>    
        </table>
        </li>
        <li>

            <input type= "submit" id="saveForm" name="submit" value="Submit"  />

        </li>
    </ul>

    </form>

    <script src = "IEerror.js"></script>
    </body>
</html>

Here is the IEerror.js file:

function prepareEventHandlers(){

    document.getElementById("EquipmentType").onchange = function(){
        var equipType = document.getElementById("EquipmentType").value
        if(equipType === "1"){
            document.getElementById("BarHolder").style.display = "block";
            document.getElementById("FooHolder").style.display = "none";
        } else if(equipType === "0"){
            document.getElementById("FooHolder").style.display = "block";
            document.getElementById("BarHolder").style.display = "none";
        } 
    }

    document.getElementById("FooHolder").style.display = "none";
    document.getElementById("BarHolder").style.display = "none";


    function removeDiv() {
        var parentId = $(this).parent().parent().attr("id");
        $('#' + parentId).remove();
    }


    var myNum = 0;
    function addItem(getFromId){
        var addTag = document.getElementById("addedItems");
        var addVariable = document.getElementById(getFromId).value;
        var possibleId = getFromId + addVariable;
        if(!document.getElementById(possibleId)){
            var newTr = document.createElement("tr");
            newTr.id = possibleId;
            var myText = $('#'+ getFromId).find(":selected").text();
            var newTd = document.createElement("td");
            newTd.appendChild(document.createTextNode(myText));
            newTr.appendChild(newTd);
            addTag.appendChild(newTr);

            var submissionInput = document.createElement("input");
            submissionInput.name = "item[]";
            submissionInput.type = "hidden";
            submissionInput.value = myText;
            newTd.appendChild(submissionInput);

            var deleteInput = document.createElement("input");
            deleteInput.type = "button";
            deleteInput.value = "Delete";
            deleteInput.id = myNum;
            myNum += myNum;
            deleteInput.onclick = removeDiv;
            var deleteTd = document.createElement("td");
            deleteTd.align = "right";
            document.getElementById(possibleId).appendChild(deleteTd);
            deleteTd.appendChild(deleteInput);

        }
    }

    document.getElementById("BarClick").onclick = function(){
        addItem("Bar");
    };

    document.getElementById("FooClick").onclick = function(){
        addItem("Foo");
    };

};






window.onload = function(){
    prepareEventHandlers();
};

EDIT:

Here is a link to jsfiddle: http://jsfiddle.net/DTCav/xJVJR/1/

Upvotes: 2

Views: 114

Answers (1)

Billy Blaze
Billy Blaze

Reputation: 333

What a horrible code, but let's begin:

  1. Validate your HTML. i.e. your <html> contains the HTML5 <header> rather then <head>

  2. Why do you use native JS and jQuery through eachother? Why not stick to jQuery??

  3. Anyway, my nitpicking <aside>, to fix your problem change your <table> code into:

    <table>
    <tbody id="addedItems">
    </tbody>
</table>

This is because IE9 will make an empty <tbody> in an empty <table> and use this as table placeholder, you inject the <tr> and <td> tags straight into the <table>

Upvotes: 3

Related Questions