4

first of all i need to say that i don't have much experience with JS. currently i'm trying to implement an web application with MVC framework. I'm in a work to develop an app that is also compatible with Internet explorer. in that case i'm using following JS method to populate a table which is working fine with all the browsers....

function populateTable(array) {
document.getElementById("instalationTable").style.display = "block";
var table = document.getElementById("ActivityDescription_installationID");
table.innerHTML = "";
elementsInTable = array;
var x = 0;
for (i = 0; i < (array.length * 2) ; i++) {
    //alert(i);
    if ((i % 2) == 0) {
        //ID Row

        var row = table.insertRow(i);

        var cell_1 = row.insertCell(0);
        cell_1.innerHTML = "<input type='text' disable='' class='form-control' value=" + array[x]     + ">";
        x = x + 1;

        var cell_2 = row.insertCell(1);
        cell_2.innerHTML = "<span class='btn btn-default' onclick='showEditRow(this)'><img src='../../Content/images/1414409386_48-24.png' /></span>";

        var cell_3 = row.insertCell(2);
        cell_3.innerHTML = "<span class='btn btn-default' onclick='removeRow(this)'>X</apan>";
    }
    else {
        //Detail Row
        var rowDetails = table.insertRow(i);
        var cell = rowDetails.insertCell(0);
        //cell.colspan = "3";
        cell.innerHTML = "<table style='background-color:rgb(98, 98, 98);color:black;border- radius: 5px;' margin:2%; >" +
            "<tr>" +
                "<td><input type='checkbox' id='"+x+"_appServer'/> Application Server</span></td>" +
                "<td>" +
                    "<select id='" + x + "_appServerVersion'>" +
                        "<option>Application version</option>" +
                    "</select>" +
                "</td>" +
            "</tr>" +
            "<tr>" +
                "<td colspan='2'><input type='radio' name='database' id='"+x+"_emptyDb' onChange='enableOptions(1)'/>" +
                " Empty Database</br><input type='radio' name='database' id='" + x + "_instalationSlt' onChange='enableOptions(2)'/> Something Databse</td>" +
            "</tr>" +

            "<tr id='emptyDB'>" +
                "<td>" +
                    "Oracle Version"+
                    "<select id='JS_OraVersion' name='" + x + "_oraVersion' style='width:100%'>" +
                        "<option>Ora version</option>" +
                    "</select>" +
                "</td>" +
                "<td>" +
                    "Character Set" +
                    "<select id='JS_ChaSet' name='" + x + "_ChaSet' style='width:100%'>" +
                        "<option>Cha Set</option>" +
                    "</select>" +
                "</td>" +
            "</tr>" +
            "<tr id='dbImport'>" +
                "<td>" +
                    "Something version" +
                    "<select id='JS_ImportVersion' name='" + x + "_ImportVersion' style='width:100%'>" +
                        "<option>Something version</option>" +
                    "</select>" +
                "</td>" +
                "<td>" +
                    "Something Charachter" +
                    "<select id='JS_ImportChaSet' name='" + x + "_ImportChaSet' style='width:100%'>" +
                        "<option>Something Cha</option>" +
                    "</select>" +
                "</td>" +
            "</tr>" +
            "<tr>" +
                "<td colspan='2'>" +
                    "Additional Requests </br>" +
                    "<textarea rows='4' id='" + x + "_specialReq' cols='37'> </textarea>" +
                "<td/>"+
            "</tr>"+
            "</table>";
        rowDetails.style.display = 'none';
        Lock();
    }
}
document.getElementById("instalationTable").style.display = "block";

}

i'm populating a form on the above table row, that collects some data to continue. to collect data i'm using following function which works fine with Google chrome but not with Internet explorer..

function getAllData() {
var StringtoSent = "";
for (i = 0; i < (elementsInTable.length) ; i++) {
    var InsId = elementsInTable[i];
    var _appServer = document.getElementById((i + 1) + "_appServer").checked;
    var _appServerVersionDropDown = document.getElementById((i + 1) + "_appServerVersion");
    var _appServerVersion = _appServerVersionDropDown.options[_appServerVersionDropDown.selectedIndex].value;
    var _emptyDb = document.getElementById((i + 1) + "_emptyDb").checked;
    var _instalationSlt = document.getElementById((i + 1) + "_instalationSlt").checked;
    var _oraVersionDropDown = document.getElementsByName((i + 1) + "_oraVersion")[0];
    var _oraVersion = _oraVersionDropDown.options[_oraVersionDropDown.selectedIndex].value;
    var _ChaSetDropDown = document.getElementsByName((i + 1) + "_ChaSet")[0];
    var _ChaSet = _ChaSetDropDown.options[_ChaSetDropDown.selectedIndex].value;
    var _ImportVersionDropDown = document.getElementsByName((i + 1) + "_ImportVersion")[0];
    var _ImportVersion = _ImportVersionDropDown.options[_ImportVersionDropDown.selectedIndex].value;
    var _ImportChaSetDropDown = document.getElementsByName((i + 1) + "_ImportChaSet")[0];
    var _ImportChaSet = _ImportChaSetDropDown.options[_ImportChaSetDropDown.selectedIndex].value;
    var _specialReq = document.getElementById((i + 1) + "_specialReq").value;

    StringtoSent = StringtoSent + "," + InsId + "," + _appServer + "," + _appServerVersion + "," + _emptyDb + "," + _instalationSlt + "," + _oraVersion + "," + _ChaSet + "," + _ImportVersion + "," + _ImportChaSet + "," + _specialReq + "|";
    //return StringtoSent;
    document.getElementById("ActivityDescription_instalationDetails").value = StringtoSent;

}

}

following image shows the error that im getting when it is ruining on VS 2012s IIS Express. enter image description here

for (i = 0; i < (elementsInTable.length) ; i++) {

is the place that indicates as the error place . it always highlight the "elementsInTable.length" code segment.

Actually this error message elaborate nothing. i found some articles about the same error but occurring when trying to change the inner HTML of an element. but those solutions are not compatible for this situation.. Please help me with the problem

thanks in advance

Sandaru
  • 1,229
  • 2
  • 21
  • 39
  • 4
    And which line is line 238...? – Andreas Furster Oct 30 '14 at 10:26
  • And i think it doesn't work fine in Chrome. But VS has a link with VS that when there is a error it will trow a exception. Look in the chrome console. Is there the same error? – Andreas Furster Oct 30 '14 at 10:28
  • for (i = 0; i < (elementsInTable.length) ; i++) { this is the line sorry!!!! – Sandaru Oct 30 '14 at 10:46
  • 1
    Too much code. Please post the boiled down version you created while trying to debug your problem. Try to get it down to 50 lines, or ideally 20. –  Oct 30 '14 at 10:48
  • actually it is hard to regenerate the error by another code bcz this is very rare situation and in cant find the exact location which causes for the error – Sandaru Oct 30 '14 at 10:50
  • Clearly it is having trouble reading from `elementsInTable`, so it might help to see where `elementsInTable` is defined? – Calvin Scherle Oct 30 '14 at 10:53
  • you can see it in the code (cell.innerHTML). it is in first code segment .. that is the table i'm using to format the form elements – Sandaru Oct 30 '14 at 10:55
  • 1
    How are these two functions called? You need to make sure that `populateTable()` is always called before `getAllData()`, so that it initializes `elementsInTable`. – Barmar Oct 30 '14 at 11:00
  • yap i'm dong it correct manner... it is working fine in Google chrome.. but it is not working with Internet Explorer – Sandaru Oct 30 '14 at 11:02
  • Make sure you declare your loop variables: `for (var i = 0;` You might be getting an error because `i` is leaking out to the global scope. – Andy Oct 30 '14 at 11:03
  • nop it is not working – Sandaru Oct 30 '14 at 11:09
  • 1
    What do you see when inspecting the variable "elementsInTable" when breaking at that exception? (Can you inspect the js-code?) – fast Oct 30 '14 at 11:14
  • nop i cant code inspector get stuck when im trying to inspect the code – Sandaru Oct 30 '14 at 11:18
  • finally i inspect the code yap it is breaking at the eception – Sandaru Oct 30 '14 at 11:31
  • @Sandaru So please inspect "elementsInTable" if it is set and has member "length".. – fast Oct 30 '14 at 12:38

1 Answers1

3

Finally i found the Error

        cell.innerHTML = "<table style='background-color:rgb(98, 98, 98);color:black;border- radius: 5px;' margin:2%; >" +

in above line i mistakenly added a CSS attribute "margin:2%;" in to a wrong place. Google chrome is intelligence enough to manage the situation and proceed the activity but Internet Explorer is not. as i found, this is the fact that prompt same error in different situations.

EG:

http://www.webdeveloper.com/forum/showthread.php?22946-innerHTML-amp-IE-Unknown-Runtime-Error http://www.webdeveloper.com/forum/showthread.php?22946-innerHTML-amp-IE-Unknown-Runtime-Error

So if you got any unknown error in your Java Script code which uses "element.InnerHTML" or "document.Write" its better to check whether your tags are properly closed.

and i found several other situations that is generating same error

  1. IE shows run time error for innerHTML
  2. InnerHTML issue in IE8 and below

most of the times you can avoid this error by following W3C tag recommendations (http://www.w3.org/TR/html401/struct/global.html).

Community
  • 1
  • 1
Sandaru
  • 1,229
  • 2
  • 21
  • 39