jQuery: While ajax request block element

Question

So i have this function in JS, sending a request to insert a new Status message to the database.

function DoStatusInsert(){
  var wrapperId = '#statusResponseNow';
    $.ajax({ 
       type: "POST",
       url: "misc/insertStatus.php",
    data: {
    value: 'y',
    uID : $('#uID').val(),
    message : $('#message').val() 
    },
       success: function(msg){
     $('#message').val("");
     $('#statusResponse').toggle(); 
     $(wrapperId).prepend(msg);
     $(wrapperId).children().first().fadeIn('slow');
        }
     });
}

With this form:

<input name="message" type="text" id="message" value="" size="60">  
<input type="hidden" name="uID" id="uID" value="<?php echo $v["id"]; ?>">
<input name="submit" type="submit" id="submit" value="Spara">
<div id="statusResponseNow"></div>

Now I wish to do something like blocking the submit button or the message field to "read-only" until you receive response / success, so you don't have the opportunity to like press submit alot of times so it inserts alot.. (i know you could make a php for checking after double´s in DB)

So: when you click on submit then it makes either message field and/or submit button to read only

How should i do it?

Patricia · Accepted Answer · 2010-08-18 15:51:03Z

2

function DoStatusInsert(){
  $('#IdOfYourSaveButton').attr('disabled', 'disabled');
  var wrapperId = '#statusResponseNow';
    $.ajax({ 
       type: "POST",
       url: "misc/insertStatus.php",
       data: {
       value: 'y',
       uID : $('#uID').val(),
       message : $('#message').val(),
       success: function(msg){
          $('#IdOfYourSavebutton').removeAttr('disabled');
          $('#message').val("");
          $('#statusResponse').toggle(); 
          $(wrapperId).prepend(msg);
          $(wrapperId).children().first().fadeIn('slow');
        }
  });
}

enabled and disable the button. nice and easy :)

answered Aug 18, 2010 at 15:51

Patricia

7,8024 gold badges40 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt · Accepted Answer · 2010-08-18 15:51:47Z

1

On calling the function, set the disabled property of the button, and then set it back on success.

function DoStatusInsert(){
 $('#submit').attr("disabled", "true");

 var wrapperId = '#statusResponseNow';
    $.ajax({ 
       type: "POST",
       url: "misc/insertStatus.php",
    data: {
    value: 'y',
    uID : $('#uID').val(),
    message : $('#message').val() 
    },
       success: function(msg){
         $('#message').val("");
         $('#statusResponse').toggle(); 
         $(wrapperId).prepend(msg);
         $(wrapperId).children().first().fadeIn('slow');
         $('#submit').attr("disabled", "false");
        }
     });
}

answered Aug 18, 2010 at 15:51

Matt

1,2678 silver badges16 bronze badges

Comments

simnom · Accepted Answer · 2010-08-18 15:50:14Z

0

My initial thoughts would be to insert

$('input[type=submit]', this).attr('disabled', 'disabled');

before the ajax call is started and then removed the disabled attribute with the success function of the ajax request.

answered Aug 18, 2010 at 15:50

simnom

2,6201 gold badge25 silver badges35 bronze badges

Comments

Dave Ward · Accepted Answer · 2010-08-18 15:58:41Z

0

Manually toggling the disabled state of the button works well enough, but jQuery has a couple helper events to make that a bit nicer: .ajaxStart() and .ajaxStop(). You can use those two handlers on your submit button and not have to worry about maintaining that manual code around your $.ajax() request.

Just throw this in with your other initialization code, probably in $(document).ready():

$('#submit').ajaxStart(function() { this.disabled = true; });

$('#submit').ajaxStop(function() { this.disabled = false; });

answered Aug 18, 2010 at 15:58

Dave Ward

60.7k14 gold badges119 silver badges134 bronze badges

Comments

Oleg · Accepted Answer · 2010-08-18 16:01:36Z

0

You can use for example jQuery BlockUI Plugin from http://jquery.malsup.com/block/ (see demo on http://jquery.malsup.com/block/#element and http://jquery.malsup.com/block/#demos).

If a div with all your form elements which you need to block has id formDiv then you can call

jQuery('#formDiv').block({ message: '<h1>Just a moment...</h1>' });

before jQuery.ajax and call

jQuery('#formDiv').unblock();

as the first line in both success and error handler of the jQuery.ajax.

answered Aug 18, 2010 at 16:01

Oleg

222k36 gold badges414 silver badges826 bronze badges

Collectives™ on Stack Overflow

jQuery: While ajax request block element

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related