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>
