Link to home
Start Free TrialLog in
Avatar of Angel02
Angel02

asked on

javascript doesnt work in IE 9 and IE 10

I have posted a question few weeks back
https://www.experts-exchange.com/questions/28024181/Update-textbox-control-in-DataGrid-using-Javascript.html

i t was resolved then but now I found that the same script doesn't work in IE9 and IE10. It doesnt work in Chrome and Firefox either but that's secondary. I would like it to work in IE first. Is there a difference in reading parentElement in IE9/10? Please help!
Avatar of Kim Walker
Kim Walker
Flag of United States of America image

Use parentNode instead of parentElement. See parentNode reference.
Avatar of Angel02
Angel02

ASKER

I tried it. Replaced all parentElement with parentNode everywhere in js. But it did not work. Please advise if I can try anything else. Thanks!
What is the error? Can you post a link to the page so that I can troubleshoot?
Looking at your old question, it's hard to determine exactly what you ended up with. One thing that I noticed from the last comment you posted with code is that you have a case specific error. It should be childNodes with a capital N where you now have childnodes.
SOLUTION
Avatar of Rob
Rob
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Angel02

ASKER

Thanks for the reply. Here is the problem and the cause.

I have a datagrid with dropdowns and textboxes. When the value in dropdown changes, i need to change the value in the textbox. Below is my code:

function discTypeChange(elmCurrent)
                  {
                  var currVal = new String(elmCurrent.value);
                        var row = elmCurrent.parentNode.parentNode;
                        var cellUnit = row.cells[4];
                        var cellPrice = row.cells[7];
                        if(currVal==1){
                              cellUnit.innerHTML = "USD";
                              row.cells[3].childNodes[0].value = cellPrice.innerHTML;
                        }
                        else{
                              cellUnit.innerHTML = "%";
                              row.cells[3].childNodes[0].value = "0";
                        }
                        row.cells[3].childNodes[0].focus();
                  }

This code works perfectly in IE8 but not in IE10, Chrome and Firefox.
With tagit's sugegstion, I debugged the script and found that if I replace childNodes[0] with childNodes[1], it works in IE10, Chrome and Firefox and not in IE8.

Is this normal behavior in such scenerios? What is the best way to resolve this?

(1) Should I obtain the clientID of the browser and user childNodes[0] or childNodes[1] suitably?
(2) should I check if the value of childNodes[0] is null and if yes use childNodes[1]?

Please advise if there are better solutions. Thanks again!
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Angel02

ASKER

You are right. IE 10 returned nodeType = 3 and IE8 returned nodeType = 1.
So I am checking the nodeType and obtaining childNodes[1]] or childNodes[0] respectively.

You mentioned whitespaces in HTMl code. Can those be avoided? I don't find any whitespaces in my HTML code. I looked through the <asp:datagrid> and it looks fine. Please advise.
A return between elements or a tab to indent your code for clarity is considered white space. I guess the only way to avoid it would be to run your entire html document in one single line of code. It would be hard to debug, though.