How to avoid double click actions in ajax

Question

My function sends 2 actions after a customer makes a double click. Is it possible to modify my function to avoid it?

function createIt() {
    var comment   = $('textarea[name="comment"]').val();
    if (!comment) {
        $('#comment_error').append("Write a comment");
        return false;
    }
    BX.ajax.runComponentAction('register:feedback',
    'createIt', {
        mode: 'class',
        data: {
            post: {
                COMMENT: comment,
            }
        },
    }).then(function (response) {
        if (response.status == 'success') {
            $('.formAction').hide();
            $('input[name="go"]').trigger('click');
        } else {
            alert(response.errors);
        }
    });
};

My code works perfectly if a customer clicks once, but after he uses a double click, the code creates 2 records.

I updated the code.

Html part looks like this

<div class="formAction">
    <form method="post" action="">
        <input type="hidden" name="AJAX_CALL" value="Y">
        <div class="mt-2">
            <div class="crm-entity-stream-content-event-title">
                Add new question
            </div>
        </div>
        <div class="mt-2">
                <textarea class="crm-entity-widget-content-textarea" name="comment" required=""></textarea>
                <div id="comment_error" style="color: red;"></div>
        </div>
        <div class="ui-btn-container ui-btn-container-center">
            <button type="button" name="add_it" id="add_it" value="" onclick="createIt()" class="ui-btn ui-btn-secondary">
                ADD
            </button>
        </div>
    </form>
</div>

Are you saying that `$('input[name="go"]').trigger('click');` specifically is being invoked twice when the rest of this code is invoked once? Or are you saying that all of this code shown is being invoked twice? If the latter, what is invoking this code? *In general* one way to prevent double-clicks is to disable the clicked element, for example. But I don't see anything in this code which is being clicked. — David, Feb 13 '23 at 13:08

score 0 · Accepted Answer · answered Feb 13 '23 at 13:38

One way to prevent an errant second click is to disable the element on the first click. For example, consider this sequence of events:

function createIt() {
  // disable the button
  $('#add_it').prop('disabled', true);

  // the rest of your logic, then...
  BX.ajax.runComponentAction('register:feedback',
    /* etc. */
  }).then(function (response) {
    // within your callback handler, after your existing logic, enable the button:
    $('#add_it').prop('disabled', false);
  });
};

You'll want to make sure you account for error handling, etc. so the button isn't left in a disabled state when it shouldn't be. But overall the idea is simply to disable the button while the operation is taking place.

You could take the UX a step further and replace the button (or at least the button's contents) with some visual indicator that an operation is being performed so the user is aware of what's going on and why the button has changed.

How to avoid double click actions in ajax

1 Answers1