Question

I have a GridView with a few columns. One of the columns is a button. It is in a template field which looks like this:

<asp:TemplateField>
<ItemTemplate>
    <asp:Button ID="btnApply" Text="View Details" CssClass="viewdetails" runat="server"/>
</ItemTemplate>
</asp:TemplateField>

My JQuery code is as follows:

<script type="text/javascript">
    $(document).ready(function() {
        $('.viewall, .viewdetails').click(function() {
          alert('Must be a member to view all');
        });
    });
</script>

When I first visit the page and click the view details button, the alert pops up, but after that, if I click any other view details button, it does not popup until the page is refreshed. The View All button displays the message all the time because when I click that, the page is refreshed.

A couple notes. The View Details button is inside an asp.net GridView and the GridView is inside an asp.net UpdatePanel.

Also, since view all and viewdetails calls the same message, is there a way to combine them into one click event, for example, $(‘.viewall .viewdetails’).click(…….

If I remove the update panel, it works, but everytime I click View All or View Details, I get a flicker, so I added a return false; and this stopped the flicker, however, this prevents the user from going to the Member page if they are indeed logged in. If I take the return false off and they are signed in, the message still popsup and then takes them to the Member Page. This is obviously not supposed to happen, but I am not sure how to handle it. Basically the events should be:

If the user is not logged in and they click the View all or View details button, display a message saying they must sign in or become a member.

If the user is logged in and they click the View all or View details button, redirect them to the Members Page. Both View All and View Details have server side click events which do a Response.Redirect to the Members Page if they are logged in.

Answer 1

You need to cancel the click event in these cases…

    $(document).ready(function() {
        $('.viewall').click(function(e) {
          alert('Must be a member to view all');
          e.preventDefault();
        });
        $('.viewdetails').click(function(e) {
          alert('Must be a member to view all');
          e.preventDefault();
        });
    });

You can use multiple selectors by delimiting them with a comma…

    $(".selector1, .selector2").click(function() { ... });