CODEWITHSUNDEEP
jquery
Dev
Dev

Reputation: 305

Disable button once clicked or close the modal immediately

 $('button#rejectWithdraw').click(function(e) {

  $.ajax({
          url: $('#rejectUrl').val(),
          type: "POST",
          data: {data:text},
          success: function (data) {
              $('#modelContent').modal('toggle');
          },
          error: function (err) {
             // alert("Something went wrong"+err);
          }
      });

});

The modal closes only after success. I need it closes immediately after submit or the button should be disabled after once clicked.

How to do this?

Upvotes: 0

Views: 495

Answers (4)

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

Use .one() of JQuery like this to make the button click only once:

$( "button#rejectWithdraw" ).one( "click", function(e) {
  $.ajax({
          url: $('#rejectUrl').val(),
          type: "POST",
          data: {data:text},
          success: function (data) {
              $('#modelContent').modal('toggle');
          },
          error: function (err) {
             // alert("Something went wrong"+err);
          }
      });

 });

Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

Upvotes: 1

nutic
nutic

Reputation: 457

The modal closes after success because the code closing the modal

$('#modelContent').modal('toggle');

is in success handler. If you want it to be executed imidiately after submit you can just place it right after your $.ajax call.

$('button#rejectWithdraw').click(function(e) {

  $.ajax({
      url: $('#rejectUrl').val(),
      type: "POST",
      data: {data:text},
      success: function (data) {
         // code placed here is executed only on successfull POST
      },
      error: function (err) {
         // alert("Something went wrong"+err);
      }
  });

  $('#modelContent').modal('toggle');

});

Upvotes: 1

Sudhir Ojha
Sudhir Ojha

Reputation: 3305

You have to add disabled propery like 

$('button#rejectWithdraw').click(function(e) {
  $('button#rejectWithdraw').prop('disabled', true);
  $.ajax({
          url: $('#rejectUrl').val(),
          type: "POST",
          data: {data:text},
          success: function (data) {
              $('#modelContent').modal('toggle');
          },
          error: function (err) {
             // alert("Something went wrong"+err);
          }
      });

});

Upvotes: 1

Adrian
Adrian

Reputation: 8597

By setting property 'disabled' to true:

$('button#rejectWithdraw').prop('disabled', true);

Upvotes: 1

Related Questions