Avoiding multiple click events on a button

Question

I have next and previous button on my web page. They get next and previous page on the available middle portion. The response of the new page comes from the server.

If user clicks on the button multiple times e.g. 5 times then the 4 pages are skipped and 5th one is loaded. What I want to do is disabled all the click events when the 1st is not completed.

I know I can disable the buttons when first click has occurred. But I am not liking to write a logic to enabling/disabling the buttons. Is there any code statement provided in JavaScript which works a bit smarter way.

are you storing current page number in a javascript variable, which you ++ on click? — Pranav Gupta
– Pranav Gupta, Commented Nov 29, 2013 at 7:17
is disabling the button for a period of time (so they don't accidentally double-click) an option? say, disabling it for a second or two? In this case, you can disable it and use setTimeout to enable it a short time later... — carpeliam
– carpeliam, Commented Nov 29, 2013 at 7:29

m59 · Accepted Answer · 2013-11-29 07:23:43Z

2

I have a trick I like quite a bit =D

I use this css:

.page-load-mask {
  position: fixed;
  z-index: 99999;
  top: 0;
  height: 100%;
  width: 100%;
  cursor: progress;
}

with this markup anywhere on the page:

When anything is loading, show that div and hide it again when loading is done.

Live demo here (click).

To further explain, what happens is that .page-load-mask will cover the entire page when it is visible, and hovering over it styles the cursor as loading. Because it covers the page, nothing can be clicked. You could also adapt this to fill only a section of the page using position: absolute or other positioning,width,height, etc.

edited Nov 29, 2013 at 7:23

answered Nov 29, 2013 at 7:18

m59

43.9k14 gold badges122 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Indranil.Bharambe Over a year ago

this will require the javascript coding ..but user asked not to like code for enabling and disabling. :)

m59 Over a year ago

@Terror.Blade That's absolutely incorrect. To quote the OP, "Is there any code statement provided in JavaScript which works a bit smarter way." Yes, there is. mask.style.display = 'block'.

Indranil.Bharambe · Accepted Answer · 2013-11-29 07:30:52Z

1

if you are using update panel this is the best way of doing it. and user will know that process is going on and even he cannot click on button too. you just need to select the processing image below code

 <asp:UpdateProgress ID="udpProgress" AssociatedUpdatePanelID="update" runat="server">
    <ProgressTemplate>
        <div style="width: 2000px; height: 1000px; background-color: Gray;position: absolute; opacity:50;filter:Alpha(Opacity=50);z-index:10000"> 

        </div>
         <img style="vertical-align: middle; margin-left: 47%; margin-top: 10%; position: absolute;z-index:10001"
                id="imgProgressImage" alt="Progressing" src="Images/LoadingProgress.gif" />
    </ProgressTemplate>
</asp:UpdateProgress>


<asp:UpdatePanel ID="update" runat="server">
 </ContentTemplate >
 <ContentTemplate >
</asp:UpdatePanel>

edited Nov 29, 2013 at 7:30

answered Nov 29, 2013 at 7:25

Indranil.Bharambe

1,4983 gold badges14 silver badges26 bronze badges

3 Comments

m59 Over a year ago

By the way, your answer is actually bad. I'm not going to downvote, but you shouldn't post asp code when the OP didn't mention it or tag it.

Ashwin Over a year ago

Actually I was looking something like e.preventdefault

m59 Over a year ago

@MotaBOS if preventDefault() is what you're looking for, please reword your question and make it more specific. What your question communicates is that you don't want click events to happpen, but you don't want to disable the buttons. That's exactly what my answer does. Other options are to use an if statement in the click events that would "gate" off the action, or remove the events altogether. These are more complicated than just disabling the buttons to begin with.

Pranav Gupta · Accepted Answer · 2013-11-29 07:35:47Z

0

It appears by your comment that you are using a variable in JS to store current page number, and increasing/decreasing it by 1 when clicking on Next or Previous buttons.

Which means this variable gets changed before ajax call completes, which is the reason to your problem. Even if you go by 'clicking only once before request completes' route, another potential problem will be there: when ajax call fails, then too your variable will change - and this problem will not go away by simply putting a transparent loading mask while ajax request is being made.

Solution is to move logic of changing this variable into ajax callback, preferably by also returning in ajax response the page number you're on.

answered Nov 29, 2013 at 7:35

Pranav Gupta

9446 silver badges11 bronze badges

Comments

sheng · Accepted Answer · 2013-11-29 12:21:43Z

0

I usually disable and enable the button or have a bool. If you'd like, though, you can add and remove event listeners.

Use this code straight from MDN.

This will remove the event listener once the button is clicked.

var div = document.getElementById("div");

var listener = function (event) {
    div.removeEventListener("click", listener, false);
};

div.addEventListener("click", listener, false);

answered Nov 29, 2013 at 12:21

sheng

1,3808 silver badges18 bronze badges

Collectives™ on Stack Overflow

Avoiding multiple click events on a button

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related