Contexte
Pour un site web, j’ai développé un calendrier et un planning. J’ai donc une requête AJAX qui est envoyée au serveur lorsque je clique sur une date de mon calendrier afin de modifier mon planning en conséquence.
De plus, il faut pour mon projet que lorsque l’utilisateur fasse une action sur la page, enregistrer son choix afin qu’il n’ai pas à tout refaire si il change de page. J’ai donc fait une seconde requête AJAX pour enregistrer l’information dans la session de l’utilisateur.
Problème
Il semble qu’envoyer deux requêtes AJAX en simultané ne soit pas une bonne idée.. Mon planning est bien mis à jour mais le serveur n’enregistre pas correctement l’information dans la session de mon utilisateur.
$.ajax({
type: 'GET',
url: '/sessiondata',
data: { 'date': newDate },
});
$.ajax({
type: 'GET',
url: pageURL,
data: { 'date': newDate, 'page': page },
success: function(data) {
var container_planning = $(data).find('.container-planning').html();
$('.container-planning').html(container_planning);
}
})
Solution
Il fallait trouver un moyen que mes requêtes soient envoyées les unes après les autres dans l’ordre. Donc mettre “async:true” n’est pas une solution.
J’ai simplement fait comme ceci :
$.ajax({
type: 'GET',
url: '/sessiondata',
data: { 'date': newDate },
success: function(data) {
updatePlanning();
}
});
function updatePlanning() {
$.ajax({
type: 'GET',
url: pageURL,
data: { 'date': newDate, 'page': page },
success: function(data) {
var container_planning = $(data).find('.container-planning').html();
$('.container-planning').html(container_planning);
}
})
}
De cette manière, updatePlanning() s’exécute seulement après que la date soit enregistrée dans la session de l’utilisateur.