Question

I’ll start by saying I’m fairly new to jQuery. For the most part, I’ve found it intuitive and powerful, but this one circumstance has me thoroughly stumped.

In the following method, the call to .each() returns two elements for every one found. It iterates over a set of table rows given IDs starting with the word, “communication,” and followed by an ID number. For each row it returns, it processes twice.

Using Firebug, I’ve validated that the DOM only has a single instance of each table row in question. Also using Firebug, I’ve validated that the method is not being called twice; the iteration in .each() is truly going over each returned table row twice. By the time all the AJAX call goodness is done, I’ll have two entries in the database for each row created in the table.

This is the code that’s causing the issues:

function getCommunications() {
    var list = $('[id^=communication]');
    var communications = new Array();
    list.each(function () {
        var communication = {
            ID: $(this).find('.commCompanyID').val(),
            /*
             * SNIP: more object properties here that are 
             * unnecessary to this discussion
             */
        };
        communications.push(communication);
    });
    return communications;
}

At the point of return communications, the Array returned will contain twice as many elements as there are table rows.

I should note that nearly identical code (but going against specific lists of divs) is working on the same page. It’s just the table that’s suffering the issues.

I’m using jQuery 1.4.1, the version which shipped with Visual Studio .NET 2010.

The table markup is fully dynamic — that is, aside from the header row, it’s dependent on data either returned at page load or created by the user via a dialog box. I’ll drop in just the code for what’s created at page load; again using Firebug I’ve validated that what I create dynamically when an end user creates a row with the dialog box matches. (This should be readable by anyone, but for the record this is an ASP.NET MVC 2.0 project.)

<table id="commTable">
    <tr>
        <th></th>
        <th>
            Date / Time
        </th>
        <th>
            Contact
        </th>
        <th>
            Type
        </th>
        <th>
            Duration
        </th>
        <th>
            Notes
        </th>
    </tr>
<% foreach (var item in Model) { %>
    <tr id="communication<%: item.ID %>">
        <td>
            <a href="#" onclick="showEditCommunicationForm(<%: item.ID %>">
                Edit</a> 
            <span class="commDeleteButton">
                <a href="#" onclick="deleteCommunication(<%: item.ID %>)">
                    Delete</a>
            </span>
        </td>
        <td>
            <span class="commDateTime"><%: item.DateTime %></span>
            <input type="hidden" class="commID" value="<%: item.ID %>" />
            <input type="hidden" class="commIsDeleted" 
                value="<%: item.IsDeleted %>" />
        </td>
        <td>
            <span class="commSourceText"><%: item.Company.CompanyName %></span>
            <input type="hidden" class="commCompanyID" 
                value="<%: item.CompanyID %>" />
        </td>
        <td>
            <%: item.CommunicationType.CommunicationTypeText %>
            <input type="hidden" class="commTypeID" 
                value="<%: item.CommunicationTypeID %>" />
        </td>
        <td>
            <span class="commDuration"><%: item.DurationMinutes %></span> 
            Minutes
        </td>
        <td>
            <span class="commNotes"><%: item.Notes %></span>
        </td>
    </tr>    
<% } %>
</table>

Answer 1

What does alert($('[id^=communication]').length); give you? Are you sure an ancestor of the table doesn’t have an ID starting with communication?

You could use $('#commTable > tr[id^=communication]') to be extremely specific