Désactiver le bouton avec jQuery tout en continuant à déclencher l'événement côté serveur

Question

Je sais que des questions similaires ont déjà été posées auparavant, mais je n'en ai pas vu une avec certaines des exigences ci-dessous.

Dans mon balisage, j'ai un div qui contient un champ de saisie et un bouton ASP.NET. Le bouton dispose d'un gestionnaire d'événement OnClick côté serveur qui effectue des actions diverses. travail.

Voici le balisage:

<div id="contactForm"> 
    <input type="text" id="email" runat="server" class="email" name="Email" placeholder="Email *" /> 
    <asp:Button ID="plhButton" class="submit-btn" runat="server" OnClick="Submit_Click" Text="Request Information" /> 
</div> 

et le gestionnaire d'événements:

protected void Submit_Click(object sender, EventArgs e) 
{    
    if (Page.IsValid) 
    { 
     EmailPost(); 
     //Do other stuff 
    } 
} 

Je voudrais également les éléments suivants:

• Désactiver le bouton pendant 4 secondes
• Change le texte du bouton est désactivé
• Revert le texte du bouton après sa réactivée
• Vérifier la validation

Ceci est mon script pour gérer que:

<script> 
jQuery(document).ready(function ($) { 

    var fewSeconds = 4; 
    $(".submit-btn").click(function() { 
     if (Page_ClientValidate()) { 
      var btn = $(this); 
      btn.prop('disabled', true); 
      setTimeout(function() { 
       btn.prop('disabled', false); 
       btn.prop('value', 'Request Information'); 
      }, fewSeconds * 1000); 

      btn.prop('value', 'Sending...'); 
     } 
    }); 

}); 
</script> 

Tout fonctionne très bien, sauf que la désactivation du bouton empêche mon événement côté serveur de tir. Donc, j'ai ajouté UseSubmitBehavior = « false » à mon bouton:

<asp:Button ID="plhButton" class="submit-btn" runat="server" OnClick="Submit_Click" Text="Request Information" UseSubmitBehavior="false" /> 

Maintenant, l'événement se déclenche du côté du serveur normalement, mais le code dans le script (c.-à-désactiver le bouton, basculer le texte du bouton) ne fonctionne que la première fois que le bouton est cliqué.

Des idées pour faire fonctionner le code de script plus d'une fois?

Answer 1

<script> 
jQuery(document).ready(function ButtonDisable($) { 
    var fewSeconds = 4; 
     if (Page_ClientValidate()) { 
      var btn = $(this); 
      btn.prop('disabled', true); 
      setTimeout(function() { 
       btn.prop('disabled', false); 
       btn.prop('value', 'Request Information'); 
      }, fewSeconds * 1000); 

      btn.prop('value', 'Sending...'); 
     } 
}); 
</script> 

dans votre code côté serveur d'appel cette fonction javascript en utilisant ScriptManager

protected void Submit_Click(object sender, EventArgs e) 
{    
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "ButtonDisable", "ButtonDisable()", false); 
    if (Page.IsValid) 
    { 
     EmailPost(); 
     //Do other stuff 
    } 
} 

si cela ne vous travaille peut-être utiliser avec le constructeur de chaîne dans votre code côté serveur

Answer 2

@epascarello m'a fait dans la bonne direction; Je suis passé $(document).ready avec function pageLoad() et qui l'a fait:

<script> 
    function pageLoad(){ 
     var fewSeconds = 4; 
     $(".submit-btn").click(function() { 
      if (Page_ClientValidate()) { 
       var btn = $(this); 
       btn.prop('disabled', true); 
       setTimeout(function() { 
        btn.prop('disabled', false); 
        btn.prop('value', 'Hmm.. Try again'); 
       }, fewSeconds * 1000); 

       btn.prop('value', 'Sending...'); 
      } 
     }); 

    }; 
</script>