Prevent user from double clicking Next button

7 posts, 0 answers
  1. Jason
    Jason avatar
    1 posts
    Member since:
    Jun 2015

    Posted 12 Jun 2015 Link to this post

     

     Does anyone know of a way to easily prevent double clicking the next button. e.g. I dont want to charge the user's credit card twice.

     

    Any help would be great. Thanks!

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1304 posts

    Posted 16 Jun 2015 Link to this post

    Hello,

    The Wizard's ButtonClicking event can be prevented conditionally as shown below:
    function OnClientButtonClicking(sender, args) {
        var command = args.get_command();
        if (command == "1") {
            //condition
            if (true) {
                args.set_cancel(true);
            }
        }
    }


    Regards,
    Ivan Danchev
    Telerik
  3. MBEN
    MBEN avatar
    179 posts
    Member since:
    Nov 2011

    Posted 24 Oct in reply to Ivan Danchev Link to this post

    Can you give me an example of the conditional logic to cancel the double click?
  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1304 posts

    Posted 25 Oct Link to this post

    Hello,

    Here's an example of how double clicking can be prevented without cancelling the ButtonClicking event:
    <script type="text/javascript">
        function OnClientButtonClicking(sender, args) {
            var command = args.get_command();
            if (command == "1") {
                $telerik.$(".rwzNext").prop('disabled', true);
                setTimeout(function () {
                    $telerik.$(".rwzNext").prop('disabled', false);
                }, 500)
            }
        }
    </script>

    With this approach we disable the Next button (finding it by its class "rwzNext") after it is clicked for certain amount of time (500 milliseconds in the snippet above) and then re-enable it so it can be used to navigate the Steps on single click.

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. MBEN
    MBEN avatar
    179 posts
    Member since:
    Nov 2011

    Posted 25 Oct in reply to Ivan Danchev Link to this post

    This solution still skips the step for me, only it shows the intermediate step being skipped for a brief moment.
  6. MBEN
    MBEN avatar
    179 posts
    Member since:
    Nov 2011

    Posted 27 Oct Link to this post

    Hi,

    I am unable to figure out the condition that would check if the button was clicked twice.

    Any help would be appreciated.

  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1304 posts

    Posted 30 Oct Link to this post

    Hi,

    The previously suggested approach prevents double clicking the Next button at my end. Here's a screencast showing:
    1. First the default behavior, which causes navigation towards two steps to occur: e.g. if you start at Step1 and double-click Next the Wizard navigates to Step2 and then to Step3
    2. The modified (by the logic in the OnClientButtonClicking event handler) behavior, which on double-click causes navigation to the next step only, instead of passing through 2 steps: e.g. starting from Step1 a double-click only navigates to Step2.

    Attached you can find the sample runnable page used to record the screencast. Could you give it a try and let us know in case you notice a different behavior than the one demonstrated in the linked screencast?

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top