L'écran de bloc ne fonctionne pas avec plusieurs appels AJAX

Question

J'ai un bouton appelé "Submit Assessment". Là, j'essaie d'enregistrer l'image en utilisant l'appel ajax et dépend du résultat un autre appel ajax sera exécuté afin de publier des données sur le serveur. Structure de codage comme suit

code JS:

var isPostedImage=false; 
Submit Click function 
{ 
    //call to screen lock function 
    PostAssessmentData(); 
} 

function PostAssessmentData() 
{ 
    isPostedImage=PostImage(); 
    if (isPostedImage) 
    { 
     //AJAX call to post data to server 
     async:false; 
    } 
} 

PostImage=function() 
{ 
    //AJAX call to save Image in server 
    async:false; 
    //if it is successful 
    isPostedImage=true; 
} 

Ma question est j'ai appelé pour verrouiller la fonction d'écran comme première étape. Mais l'écran ne se verrouille pas avant que les appels ajax ci-dessus aient été exécutés. J'ai fait async: false aussi. Je pense que l'objet différé est un bon concept à cela. Mais je ne sais pas comment utiliser le concept d'objet différé dans ce scénario.

Quelqu'un peut-il m'aider s'il vous plaît.

Merci à l'avance

Answer 1

geler l'écran jusqu'à ce que l'appel ajax chaîne est complète se fait comme celui-ci

Ce que je l'ai fait:

• montrant une image du chargeur comme fileuse à l'écran avant de faire des appels ajax.
• Le deuxième appel ajax sera exécuté à l'intérieur du rappel de succès du premier appel ajax, de sorte que la réponse reçue du premier appel est envoyée au deuxième appel.
• Une fois que tous les appels sont terminés, masquer le compteur à partir de l'écran, permettant à l'utilisateur d'interagir avec l'écran.

code JS:

$('#loading').hide(); 

function p1() { 
    return $.post("/echo/html/", { 
    html: "Happy" 
    }); 
} 

function p2(firstCallData) { 
    var newData = firstCallData + " Coding :)"; 
    return $.post("/echo/html/", { 
     html: newData 
    }); 
} 

function clickHandler() { 
    $('#loading').show(); 
    $.when(p1()).then(function (firstCallResults) { 
     console.log(firstCallResults); 
     $.when(p2(firstCallResults)).then(function (secondCallResults)  { 
      console.log(secondCallResults); 
      alert("All ajax calls processed.\n" + secondCallResults); 
      $('#loading').hide(); 
     }); 
    }); 
} 

$(function() { 
    $("#go").click(clickHandler); 
}); 

Live Demo @ JSFiddle

Remarque: Au-dessus de solution est basée sur une idée générale et par conséquent cette solution ne doit pas être considérée comme une solution finale