jQuery UI dialog buttons click once

Question

I have jQuery dialog with buttons. When user clicks on button, it take some time, to make ajax call and do some stuff. During this time, user is able to click again and again. I want to avoid this behaviour.

I know, that jQuery has method One(). Which would exactly do what I want. But how to achieve this on dialog buttons?

My current code is:

$d.dialog({
    buttons: [
        {
            text: "Potrdi",
            click: function() {
                // do some stuff
            }
        }
    ]
});

Disable the button on click so it can't be clicked again

fdomn-m
– fdomn-m

2016-11-17 14:30:43 +00:00
Commented Nov 17, 2016 at 14:30 — fdomn-m
– fdomn-m, Commented Nov 17, 2016 at 14:30

Dekel · Accepted Answer · 2016-11-17 14:33:13Z

You can set the button as disabled using the jquery-ui button's disabled option:

button( "option", "disabled", true );

Here is an example of how to set it correctly on the clicked button (The button will be enabled again after 2 secons):

$( function() {
  $( "#dialog-confirm" ).dialog({
    resizable: false,
    height: "auto",
    width: 400,
    modal: true,
    buttons: {
      "Delete all items": function(e) {
        btn = $(e.toElement).button( "option", "disabled", true );
        setTimeout(function() {
          btn.button("option", "disabled", false );
        }, 2000);
      },
      Cancel: function() {
        $( this ).dialog( "close" );
      }
    }
  });
} );

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>

Collectives™ on Stack Overflow

jQuery UI dialog buttons click once

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related