Page 1 of 1

createElement name not setting in...?

Posted: Wed Sep 16, 2009 10:27 pm
by paqman
Hey I'm trying to get a bit of Ajax working, and I'm stuck on the very last part. Here's the chunk of code:

Code: Select all

 
var receivedText = theSync.responseText; //data as a string
            if(receivedText .indexOf('%tr' != -1))
            {
                //remove old entries
                //alert(document.getElementsByName("basketRow").length); - outputs 0, suggesting my theTR.name is not working...
                for(l = 0; l < document.getElementsByName("basketRow").length; l++)
                {
                    document.getElementsByName("basketRow")[l].parentNode.removeChild(document.getElementsByName("basketRow")[l]);
                }
                
                //go through each tr
                element = receivedText.split('%tr');
                for(i = 0; i < element.length; i++)
                {
                    var theTR = document.createElement("tr");
                    theTR.name = "basketRow"; //I believe this is the offender...
                    
                    if(element[i] .indexOf('%td' != -1))
                    {
                        pieces = element[i].split('%td');
                        
                        //go through each td
                        for(j = 0; j < pieces.length; j++)
                        {
                            var theTD = document.createElement("td");
                            theTD.innerHTML = pieces[j];
                            theTD.vAlign = "top";
                            theTR.appendChild(theTD);
                        }
                        
                        //output row
                        document.getElementById("basketShort").parentNode.insertBefore(theTR, document.getElementById("basketShort"));
                    }
                    
                }
 
            }
 
I'm sure there are better ways to do this, but this is how I've got it to work. If I put a tr element in the page, outside of the code, with the name 'basketRow', it is recognized by that piece of code and is removed when this script runs. However, the dynamically created and added rows are not. I'm guessing this is because I'm not applying the name properly, but I'm not sure. Any help would be greatly appreciated.

Re: createElement name not setting in...?

Posted: Thu Sep 17, 2009 12:03 pm
by kaszu
There are 2 problems with your code
1) If for example there are 2 rows, then removing first row, second row will become first in document.getElementsByName("basketRow") array and there is no row with index [1] in it anymore, which will trigger an error. Fix is to iterate array from last element to first:

Code: Select all

var rows = document.getElementsByName("basketRow");
for (l = rows.length-1; l>=0; l--) {
    rows[l].parentNode.removeChild(rows[l]);
}
2) As you mentioned "theTR.name" is the problem, use setAttribute instead

Code: Select all

theTR.setAttribute("name", "basketRow");

Re: createElement name not setting in...?

Posted: Sun Sep 20, 2009 11:04 pm
by paqman
Just realized today that it's not working in IE... Firefox is fine, but it isn't deleting the elements based on their name in IE. Anyone have an idea what needs to be different for IE?

Re: createElement name not setting in...?

Posted: Mon Sep 21, 2009 11:10 am
by kaszu
IE has that issue, set also id="basketRow". It won't validate, but it will work at least.

Code: Select all

theTR.setAttribute("id", "basketRow");