Appel AJAX dans la fonction de soumission de formulaire jQuery

Question

J'utilise ASP.NET MVC. J'ai donc une forme sur ma page:

<form id="MyForm" name="MyForm" method="post" action="http://www.mysite.com"> 
    <input id="hdnType" name="hdnType" type="hidden" /> 
</form> 

J'utilise jQuery soumettre des mesures pour faire une validation avant que le formulaire est affiché. Je dois aussi faire un appel AJAX pour définir « hdnType » basé sur d'autres valeurs de plusieurs listes déroulantes que je ne mentionnaient pas dans cet exemple:

$('#MyForm').submit(function() 
{ 
    if (!ValidForm()) 
     return false; 

    $.ajax({ 
     type: "POST", 
     url: '/Home/GetType', 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function(response) 
     { 
      $('#hdnType').val(response); 
     } 
    }); 

    return true; 
} 

Tout dans la fonction submit() est censé courir avant la former des messages. Cela fonctionnait correctement avant que j'ai ajouté cet appel AJAX, mais maintenant lorsque le code atteint mon appel AJAX, les messages de formulaire avant de pouvoir définir "hdnType".

Y a-t-il un moyen de contourner cela?

Answer 1

L'appel ajax a un paramètre async. Par défaut c'est vrai. Cela empêche l'exécution et la fonction de terminer. Essayez de le changer pour

$.ajax({ 
    async:false, 
    type: "POST", 
    url: '/Home/GetType', 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    success: function(response) 
    { 
     $('#hdnType').val(response); 
    } 
}); 

Cela peut être une mauvaise pratique car il va geler le navigateur jusqu'à ce que ce soit fait. Pensez à utiliser une fonction de rappel asyc comme le suggère Dave.

Answer 2

La fonction de succès est appelée de manière asynchrone, après que l'appel ajax a reçu une réponse. Si vous souhaitez définir hdnType avant la publication du formulaire, vous devez déplacer cet appel en dehors de l'appel $ .ajax. Il semble que vous deviez d'abord obtenir le résultat pour hdnType de votre action POST, dans une fonction distincte, puis appelez submit sur le formulaire.