views:

78

answers:

3

Hello everybody,

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>
+1  A: 

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.

redsquare
I tried that as well, it does the same thing. Actually, that is exactly what I originally had and only tried what is posted after reading another article here on StackOverflow.
jdangelo
In firebug what does console.log(jQuery("#row" + deletingCouponID).length) give you?
redsquare
Is your markup valid? try and validate it at http://validator.w3.org/, if the dom is messed up jquery selectors can have issues
redsquare
I am getting '1' as a result.
jdangelo
@jdangelo, so jquery finds the element. It should remove the row then. I take it the coupon id's are the primary key? Paste the rendered markup if you can
redsquare
The website is currently under lock and key and I can't use the validator. The same thing is happening under Firefox and IE--so I guess I have to assume it is probably the guy's DNN installation messing things up. I guess I could try making the table runat="server" and get its ClientID and try that.
jdangelo
also return false from your DeleteCoupon method to prevent the browser following the link.
redsquare
@redsquare, I have looked over the rendered markup and it looks just fine. I am getting <tr id="row#"> where # is the primary key (CouponID). It looks fine in both IE and Firefox.
jdangelo
@jdangelo you can cut and paste the markup into the validator, the page does not have to be live on the web.
redsquare
@redsquare, Oh ya, thanks for the reminder!
jdangelo
@redsquare, 121 errors and 5 warnings... I am going to assume the guy's DNN installation (an older one) is just shot.
jdangelo
A: 

add a header class to your thead and use code bellow

$("#myTable tr:not(.header)").remove();
$("#myTable").append(table);
GerManson
The table's head and body are remaining intact after the delete and are still available in the rendered markup. They're just not being rendered. So, it is the table not being displayed instead of actually being deleted.
jdangelo
A: 

Are you sure the coupon id is being set correctly? It would make sense if it wasn't because your code uses that id as part of the criteria of what to delete. If it wasn't present then it would basically be telling the table to delete all the rows. Below is basically what it would look like if it wasn't set.

jQuery("#tblCoupons tbody tr.row").remove();

Which would delete all rows in your tbody.

Can you use firebug or some other dynamic source generator to look at the page source after the function is run and see if the whole table has been deleted or just all the rows?

p.s. I have written a lot of DNN modules and seems hard to believe that this would be related to DNN itself vs just some oversight. Though I'm not saying impossible.

spinon
The coupon ID is being set correctly (I have looked through the rendered markup in both IE and Firefox). My rows are being named correctly and the Ajax call is successfully deleting the coupon in the database. This is just a rendering problem on the client-side. I have used my code in a non-DNN page that I created just to make sure and it works just fine. I have looked at the rendered markup after the Ajax call is made and the table (thead, tbody, and all rows) are all still present, minus the deleted row.
jdangelo
Can you post that page as a sample to look at?
spinon
@spinon, I added some markup in my original question. It is spitting out the same table, even after deleting. As I posted above, I would be happy with the darn thing to just be hidden at the very least. Right now, "it works" but not as intended.
jdangelo