CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-dialog
srnjak
srnjak

Reputation: 925

jQuery UI dialog buttons click once

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
            }
        }
    ]
});

Upvotes: 0

Views: 566

Answers (1)

Dekel
Dekel

Reputation: 62556

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>

Upvotes: 1

Related Questions