I have written a DotNetNuke module for a customer that allows them to "delete" a coupon from a table. When they click the link, an Ajax POST is created, using jQuery, and upon success the row should be deleted (or at the very least, hidden) and a success message displayed with a CssClass attached. Everything is working just fine, minus the part where the row is deleted. I have not had this problem in any other ASP.NET Web Forms/MVC project, just DotNetNuke. What winds up happening is my entire table is deleted and the success message is displayed. Here is my code:
<script language="javascript" type="text/javascript">
jQuery.noConflict();
var deletingCouponID = null;
function DeleteCoupon(_CouponID) {
deletingCouponID = _CouponID;
jQuery.post(
"mylink.aspx",
{ CouponID: _CouponID },
function (data) {
if (data.Response == "Success") {
alert("#row" + deletingCouponID);
jQuery("#tblCoupons tbody tr.row" + deletingCouponID).remove();
jQuery("#divAjaxMsg").html("<p>" + data.Message + "</p>");
jQuery("#divAjaxMsg").addClass("NormalRed");
}
else {
jQuery("#divAjaxMsg").html("<p>" + data.Message + "</p>");
jQuery("#divAjaxMsg").addClass("NormalRed");
}
},
"json"
);
}
and the HTML:
<div style="padding:1px">
<asp:Label runat="server" ID="lblMessage" ></asp:Label>
<div runat="server" id="divCouponList" >
<div style="text-align: center">
<h1>Coupon List</h1>
</div>
<div id="divAjaxMsg" />
<table cellpadding="5px" id="tblCoupons">
<thead>
<tr>
<th>Coupon ID</th>
<th>Coupon Code</th>
<th>Author</th>
<th>Date Created</th>
<th>Expiration Date</th>
<th>Amount</th>
<th>Min Purchase Amount</th>
<th>Num Uses</th>
<th>Max Uses</th>
<th>Target User</th>
<th>Target Product</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<%
string Sql = "SELECT * FROM MyTable WHERE Expired != 'True'";
using (IDataReader Reader = DataProvider.Instance ().ExecuteSQL (Sql))
{
int Count = 0;
while (Reader.Read ())
{
++Count;
%>
<tr id="row<%= ((int)Reader["CouponID"]).ToString () %>">
<td nowrap="nowrap"><%= ((int)Reader["CouponID"]).ToString () %></td>
<td nowrap="nowrap"><%= Reader["CouponCode"] as string %></td>
<td nowrap="nowrap"><%= GetUserDisplayName ((int)Reader["AuthorID"]) ?? "Author Not Found" %></td>
<td nowrap="nowrap"><%= ((DateTime)Reader["DateCreated"]).ToShortDateString () %></td>
<td nowrap="nowrap"><%= Reader["ExpirationDate"] != DBNull.Value ? ((DateTime)Reader["ExpirationDate"]).ToShortDateString () : "Indefinite" %></td>
<td nowrap="nowrap"><%= Reader["Amount"] as string %></td>
<td nowrap="nowrap"><%= Reader["MinPurchase"] != DBNull.Value ? String.Format ("{0:C}", (decimal)Reader["MinPurchase"]) : "None" %></td>
<td nowrap="nowrap"><%= ((int)Reader["NumUses"]).ToString () %></td>
<td nowrap="nowrap"><%= Reader["MaxUses"] != DBNull.Value ? ((int)Reader["MaxUses"]).ToString () : "Unlimited" %></td>
<td nowrap="nowrap"><%= !String.IsNullOrEmpty (Reader["TargetUserEmail"] as string) ? Reader["TargetUserEmail"] as string : "None" %></td>
<td nowrap="nowrap"><%= Reader["TargetProductID"] != DBNull.Value ? (GetProductName ((int)Reader["TargetProductID"]) ?? "None") : "None" %></td>
<td nowrap="nowrap"><a href="<%= NewEditURL + "?CouponID=" + ((int)Reader["CouponID"]).ToString () %>">Edit</a></td>
<td nowrap="nowrap"><a href="javascript: DeleteCoupon(<%= ((int)Reader["CouponID"]).ToString () %>)">Delete</a></td>
</tr>
<%
}
if (Count < 1)
{
%>
<tr>
<td colspan="10" style="text-align: center;">No coupons found</td>
</tr>
<%
}
}
%>
</tbody>
</table>
<p>
<a href="<%= NewEditURL %>">Create New Coupon</a>
</p>
</div>
I am sure it is something silly that I am missing (or screwing up) so I thought another few sets of eyes on it might help. I do not really like writing DNN modules, so that doesn't help much! Thanks in advance!
Jim
Edit 2: Thank you everybody for your help and ideas! I appreciate everybody's time and effort in helping me with this.
Edit: Here is the "before and after" markup from IE. The row is not actually getting deleted. I could live with the row just being hidden so the user can't click the edit/delete button: <confused />
<table cellpadding="5px" id="tblCoupons">
<thead>
<tr>
<th>Coupon ID</th>
<th>Coupon Code</th>
<th>Author</th>
<th>Date Created</th>
<th>Expiration Date</th>
<th>Amount</th>
<th>Min Purchase Amount</th>
<th>Num Uses</th>
<th>Max Uses</th>
<th>Target User</th>
<th>Target Product</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr id="row8">
<td nowrap="nowrap">8</td>
<td nowrap="nowrap">E82O7KX</td>
<td nowrap="nowrap">SomeUser</td>
<td nowrap="nowrap">7/5/2010</td>
<td nowrap="nowrap">Indefinite</td>
<td nowrap="nowrap">100%</td>
<td nowrap="nowrap">$500.00</td>
<td nowrap="nowrap">0</td>
<td nowrap="nowrap">50</td>
<td nowrap="nowrap">None</td>
<td nowrap="nowrap">None</td>
<td nowrap="nowrap"><a href="somepage">Edit</a></td>
<td nowrap="nowrap"><a href="javascript: DeleteCoupon(8)">Delete</a></td>
</tr>
<tr id="row11">
<td nowrap="nowrap">11</td>
<td nowrap="nowrap">D2GRI</td>
<td nowrap="nowrap">SomeUser</td>
<td nowrap="nowrap">7/5/2010</td>
<td nowrap="nowrap">Indefinite</td>
<td nowrap="nowrap">$300</td>
<td nowrap="nowrap">None</td>
<td nowrap="nowrap">0</td>
<td nowrap="nowrap">Unlimited</td>
<td nowrap="nowrap">None</td>
<td nowrap="nowrap">None</td>
<td nowrap="nowrap"><a href="somepage">Edit</a></td>
<td nowrap="nowrap"><a href="javascript: DeleteCoupon(11)">Delete</a></td>
</tr>
</tbody>
</table>
Change
jQuery("#tblCoupons tbody tr.row" + deletingCouponID).remove();
to
jQuery("#row" + deletingCouponID).remove();
Also return false from your function or use event.preventDefault() to stop links from following.