CODEWITHSUNDEEP
javascriptjquery
Karem
Karem

Reputation: 18103

jQuery: While ajax request block element

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?

Upvotes: 1

Views: 2668

Answers (5)

Oleg
Oleg

Reputation: 221997

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.

Upvotes: 0

Dave Ward
Dave Ward

Reputation: 60580

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

Upvotes: 0

Matt
Matt

Reputation: 1267

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

Upvotes: 1

Patricia
Patricia

Reputation: 7802

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 :)

Upvotes: 2

simnom
simnom

Reputation: 2620

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.

Upvotes: 0

Related Questions