CODEWITHSUNDEEP
firefoxundefinedtablerow
Marthinus Elliott
Marthinus Elliott

Reputation: 67

Firefox undefined value when using jquery to read cell elements

I have a table which is populated dynamically (using update panel), and then when a user clicks a chosen row, all the data is written to a label. Works fine in IE and chrome, but firefox says undefined. Simple table with 5 columns. I bind dynamically to the table with the following: (please excuse the code bloat)

    $('#tblResults').delegate(".aRow", "click", function () {
            var thatID = this.id;
            if (thatID != "0") {
                var wordz = "";
                var specialID = document.getElementById("hiddenChosenContact");
                var targetContact = document.getElementById("theContactLabel");

                for (var i = 1; i <= this.cells.length - 1; i++) {
                    if (i == this.cells.length - 1)
                        wordz = wordz + this.cells[i].innerText;
                    else
                        wordz = wordz + this.cells[i].innerText + " - ";
                }

                targetContact.innerHTML = wordz;
                specialID.value = thatID;
            }
            else {

            }
     });

The row is given an id and classname 'aRow' on load. I tried using full jquery only, $(this), but to be honest i am not sure on the syntax for table manipulation.

**edit. Sorry, meant to say that the undefined value is contained within this.cells[i].innerText

**HTML Edit

<table class="cvTableG" id="tblResults" cellPadding="0" cellSpacing="0" style="clear:left; width:100%; font-size:10px;">
            <thead>
              <tr class="aRow" id="1"><th width="14px;">&nbsp;</th>
                <th align="left" width="85px">Name</th>
                <th align="left" width="90px">Surname</th>
                <th align="left">Department</th>
                <th align="left">Customer</th>
              </tr>
            </thead>
            <tbody>
              <tr class="aRow" id="2">
                <td style="padding:0;"><input type="radio" name="myRadio" /></td>
                <td>Marty</td>
                <td>Elliott</td>
                <td>Development Place</td>
                <td>Rosebank</td>
              </tr>
              <tr class="aRow" id="3">
              <td style="padding:0;"><input type="radio" name="myRadio" /></td>
                <td>Sarah</td>
                <td>Lee</td>
                <td>Dev Place</td>
                <td>JHB</td>
              </tr>
               <tr class="aRow" id="4">
               <td style="padding:0;"><input type="radio" name="myRadio" /></td>
                <td>Marty</td>
                <td>Elliott</td>
                <td>Halfway House</td>
                <td>Durban</td>
              </tr></tbody></table>

Upvotes: 1

Views: 694

Answers (2)

Boris Zbarsky
Boris Zbarsky

Reputation: 35064

Firefox doesn't implement the non-standard innerText property. Did you perhaps want textContent, which is standardized?

Upvotes: 0

mnmnc
mnmnc

Reputation: 374

I once had a problem with Jquery selectors that occur only in firefox. If i remember correctly the solution was to add name property with the same value as in id. So in your case it would be:

<table class="cvTableG" id="tblResults" name="tblResults">

Try it and let me know if it works.

I have found the tutorial and you may want to try something like this:

For example, the following .delegate() code:

$("table").delegate("td", "click", function() {
  $(this).toggleClass("chosen");
});

is equivalent to the following code written using .on():

$("table").on("click", "td", function() {
  $(this).toggleClass("chosen");
});

Maybe it will work this way?

Upvotes: 1

Related Questions