jQuery: While ajax request block element

Question

J'ai donc cette fonction dans JS, en envoyant une requête pour insérer un nouveau message d'état dans la base de données.

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

Avec ce formulaire:

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

Maintenant, je veux faire quelque chose comme bloquer le bouton d'envoi ou le champ de message à « lecture seule » jusqu'à ce que vous recevez une réponse/succès, de sorte que vous n » J'ai l'occasion d'aimer la presse de soumettre beaucoup de fois ainsi il insère beaucoup .. (je sais que vous pourriez faire un php pour vérifier après double dans DB)

Ainsi: quand vous cliquez sur soumettre alors il fait un message champ et/ou soumettre le bouton pour lire seulement

Comment dois-je le faire?

Answer 1

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

activé et de désactiver le bouton. agréable et facile :)

Answer 2

Mes pensées initiales seraient insérer

$ ('entrée [type = soumettre]', this) .attr ('handicapé', 'handicapé');

avant l'appel ajax est démarré puis supprimé l'attribut désactivé avec la fonction de succès de la demande ajax.

Answer 3

Lors de l'appel de la fonction, définissez la propriété disabled du bouton, puis rétablissez-la en cas de succès.

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

Answer 4

manuellement l'état basculer désactivé du bouton fonctionne assez bien, mais jQuery a un événement d'aide couple pour faire un peu plus agréable que: .ajaxStart() et .ajaxStop(). Vous pouvez utiliser ces deux gestionnaires sur votre bouton de soumission et ne pas avoir à vous soucier de maintenir ce code manuel autour de votre requête $ .ajax().

Il suffit de jeter ce avec votre autre code d'initialisation, probablement $ (document) .ready():

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

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

Answer 5

Vous pouvez par exemple utiliser jQuery BlockUI Plugin de http://jquery.malsup.com/block/ (voir démo sur http://jquery.malsup.com/block/#element et http://jquery.malsup.com/block/#demos) .

Si un div avec tous vos éléments de formulaire que vous devez bloquer a id formDiv alors vous pouvez appeler

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

avant jQuery.ajax et appeler

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

la première ligne à la fois success et error gestionnaire du jQuery.ajax.