appels séquentiels AJAX avec jQuery MVC

Question

J'ai une configuration étrange dans un projet MVC, où j'ai un @Ajax.BeginForm() avec les champs suivants: -

• Adresse Ligne 1
• Adresse Ligne 2
• ville
• County
• PostCode

Nous avons besoin d'aller Google Géocode avec cette adresse, et obtenir la latitude et la longitude sur le clic du bouton soumettre sur le formulaire Ajax. Alors: -

@using (Ajax.BeginForm("EditLocation", "Location", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "new-locations", OnBegin = "return OnBegin()", OnSuccess = "OnSuccess()", InsertionMode = InsertionMode.InsertBefore }, new { @id = "EditLocationForm" })) { 
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary(false) 
    <!-- Standard Text Fields --> 
    @Html.TextBoxFor(m => m.Latitude) 
    @Html.TextBoxFor(m => m.Longitude) 
    <input type="submit" class="btn btn--gradient btn--right" id="EditLocationSubmit" /> 
} 

function OnBegin() { 
    $.ajax({ 
     url: '/Location/CheckAddress/', 
     datatype: "json", 
     async: false, 
     data: { addressLine1: $("#BrandLocationAddress_AddressLine1").val(), addressLine2: $("#BrandLocationAddress_AddressLine2").val(), town: $("#BrandLocationAddress_Town").val(), county: $("#BrandLocationAddress_County").val(), postcode: $("#BrandLocationAddress_Postcode").val(), }, 
     type: "POST", 
     success: function (data) { 
      if (data !== "NORESULTS") { 
       $("#Latitude").val(data.Latitude); 
       $("#Longitude").val(data.Longitude); 
       return true; 
      } 
      else { 

      } 
     }, 
     error: function (response) { 
      console.log(response); 
      return false; 
     } 
    }); 
} 

Les résultats du/Lieu/CheckAddress/ramener une latitude et la longitude comme prévu, mais le Ajax.BeginForm() va dans la soumission du formulaire avant que les deux champs #Latitude et #Longitude sont peuplées. Quand je regarde dans le [HttpPost] du modèle, la latitude et la longitude sont 0.

Quand je publie une deuxième fois, les champs sont les valeurs correctes de latitude et de longitude. Je pense que cela pourrait être parce que OnBegin() permet à l'Ajax.BeginForm de faire ses choses avant la dernière ligne de la clause success a été exécuté, donc 0.

Quelqu'un peut-il conseiller sur un moyen de rendre la deuxième communication de retard de forme jusqu'à ce que je sais la dernière ligne de la clause success a été complétée?

Answer 1

Vous devez retourner false de votre fonction:

var allowSubmit = false; 
function OnBegin() { 
    if (allowSubmit == true) { return true; } 
    $.ajax({ 
     // ... code 
     success: function (data) { 
      // ... code 
      // here you need to submit the form using 
      $("#EditLocationForm").submit() 
      allowSubmit = true; 
     }, 
     error: function (response) { 
      // .. code 
     } 
    }); 

    return false; 
} 

En success, soumettez le formulaire comme indiqué dans le code ci-dessus.

Aussi, ne faites pas cela en utilisant async: false: vous ne voulez pas geler l'interface utilisateur pendant que cette opération est en cours. Ce que vous pouvez vouloir faire est de désactiver les contrôles afin que l'utilisateur ne puisse pas les changer et puis les réactiver dans success et error.