ASP.NET prevent double clicking

Question

I've looked at this before and found javascript that works for me with Google Chrome, Firefox, and IE when I test it but it seems randomly (or browser specific) it doesn't work. I need a solution that does work.

This is what I'm currently using with jQuery:

$(document).ready(function () {
    $("a.Once").one("click", function () {
        $(this).click(function () { return false; });
    });
});

I add the class "Once" to buttons I want to make sure aren't clicked more than once. Again, It always works properly for me but for some users it doesn't do anything at all. Is there a better alternative solution that always works?

Update: These are ASP.NET LinkButtons.

Update 6/18: I've gotten more info from two users who keeps having this problem.

One says he hits the button once and the screen flashes so he leaves the page and comes back to it and hits the button again which causes it to post twice automatically.

The other claims he hits a different button which causes this button to postback twice automatically. I looked at the code and there's nothing wrong with that button.

The only thing I can think of is a caching problem or maybe hitting the button before the page finishes loading. I haven't been able to reproduce the problem and one of them is using the exact same browser I use.

Answer 1

If this is for a form post, then you can disable all submit buttons on submit with:

$('#someForm').submit(function(){
    $('input[type=submit]', this).attr('disabled', 'disabled');
});

Or are they allowed to click more than once, but only after some time has elapsed?

There are scenarios where one() fails - see the comments on http://api.jquery.com/one/ Any idea if its a browser compat issue with your users or jQuery not loading?

EDIT: Just found out this is a linkbutton. in that case try

$('#yourClientIdForYourLinkButton').click(function(e) {
    e.preventDefault();
});

or using the clientid directly something like

$('#<%=linkButton.ClientId%>').click(function(e) {
    e.preventDefault();
});

Answer 2

I have tried many options with JQuery but this is how I solved after writing a simple code in c#:

.aspx page:

Now you add this to your code behind in Page_Load:

       protected void Page_Load(object sender, EventArgs e)
       {

         ClientScriptManager cs = Page.ClientScript;

         ButtonID.Attributes.Add("onClick", "this.disabled=true;" +    cs.GetPostBackEventReference(ButtonID, "").ToString());

       }

and the last thing:

      protected void ButtonID_Click(object sender, EventArgs e)  
      {
            System.Threading.Thread.Sleep(5000);
            //rest of your code

      }

Hope this helps!

Update on post:

Using JavaScript you can stop form submission at client side event of button click, when it happens for second time

    <script type="text/javascript">

      var isSubmitted = false;

      function preventMultipleSubmissions() {

      if (!isSubmitted) {

         $('#<%=btnSubmit.ClientID %>').val('Submitting.. Plz Wait..');

        isSubmitted = true;

        return true;

      }

      else {

        return false;

      }

    }

    </script>
    <asp:LinkButton ID="btnSubmit" runat="server" Text="Submit" OnClientClick="return preventMultipleSubmissions();"  OnClick="btnSubmit_Click"  />

Or you can do it in the backend on Postback:

btnSubmit.Attributes.Add("onclick", " this.disabled = true; " + ClientScript.GetPostBackEventReference(btnSubmit, null) + ";");

Answer 3

You can hide the existing link and place some text afterwards that alerts that user that the page is loading.

<asp:LinkButton CssClass="Once" runat="server">Button</asp:LinkButton>

<script type="text/javascript">

    $(document).ready(function ()
    {
        $("a.Once").one("click", function (event)
        {
            $(this).hide().after("Please wait while we load your page...");
        });
    });

</script>

Also, consider adding code server side. You can never count on JavaScript being enabled.

EDIT: Answer 2.0

Answer 4

It really depends on your desire here. One option is to disable the anchor tag after it is clicked. This should be something that works across all browsers.

Another option that I have seen used is to hide the item in question, ala http://www.ilovecolors.com.ar/avoid-double-click-jquery/, but that may be overkill for what you are attempting.