Discussion :

[jd_83]

Bonjour,

Schématiquement, je tente de sauvegarder les données d’un formulaire avant de changer de page, avec un lien ou autre.

J’ai donc écrit une fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function save_page(){
	var fd = new FormData();
	fd.append('num',$("#num").val());
...
	$.ajax({
		url:'ajax_page_update.php',
		type:'post',
		data:fd,	
		dataType:'json',
		contentType: false,
		processData: false,
		success:function(response){
			if(response != ""){
				if(response.res==1){	...
				}
		}		// fin de success
	});		// fin de $.ajax 
}

Fonction que j'appelle par

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href='autre_page.php?num=...' onClick='return save_page()' >autre page</a>

Le problème est que, si je termine la fonction par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function save_page(){
...
	$.ajax({
...
	});		// fin de $.ajax 
        return true;
}

la sauvegarde ne s'exécute pas...

Alors que si je mets return false; } la sauvegarde s'exécute correctement ; mais, évidemment, le lien ne s'exécute pas...

Si je place une alerte avant $.ajax :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function save_act(){
	..
	alert("ll");
	$.ajax({
        ...
	});		// fin de $.ajax         
        return true;
}

l'alerte s'affiche, même avec return true;.

Je pense donc qu'il y a conflit entre les deux opérations. La fonction ajax n'a pas le temps de s'exécuter avant le chargement de la nouvelle page.

J'ajoute que j'ai aussi essayé de remplacer le lien par un bouton submit dans un form, et d'utiliser

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
...
event.preventDefault();
...
$(this).unbind('submit').submit();

mais le comportement est exactement le même.

Désolé si cette question a déjà été traitée.
Merci pour toutes vos réponses.

[darkstar123456]

Bonjour,

Il faut bien comprendre que par défaut, JS tentera d'exécuter tout ce qui lui est possible de faire.

Donc au lancement de la requête AJAX, c'est une requête non bloquante donc JS va continuer son petit bonhomme de chemin et va donc aller lire ce qu'il se passe après. C'est la qu'il trouve true et donc va suivre le lien cliqué
Lorsque alert() est appelé, il s'agit d'une méthode bloquante et donc là tout fonctionne ! Car il a probablement de faire tout le call AJAX le temps qu'on click sur "OK"

Le mieux est alors de tout bloquer par défaut, et de n'envoyer la réponse qu'au moment où on le souhaite, à savoir à la réponse AJAX.
En réalité, on ne pourra pas utiliser true/false à ce moment, il s'agira donc de sauvegarder le lien et de simuler le changement d'URL au moment voulu (si et seulement si, tout s'est bien passé évidemment )

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// Si c'est un lien ou n'importe quoi, on utilise preventDefault()
// S'il s'agit d'un formulaire, il faut écrire return false;
 
 
// J'ai fait 2 versions :
 
// 1 s'il s'agit d'un lien ou d'un bouton
$('body').on('click', '.mon-bouton', function(e) {
	e.preventDefault();
	var success_url = $(this).attr('href'); // On va sauvegarder l'URL qu'on souhaite suivre
	save_page(success_url);
});
 
// 2 s'il s'agit d'un formulaire
$('body').on('submit', '#my-form', function() {
	var success_url = $(this).attr('action'); // On va sauvegarder l'URL qu'on souhaite suivre
	save_page(success_url);
	return false;
});
 
 
function save_page(success_url){
...
	$.ajax({
		method: 'POST',
		url: 'blbala.php',
		data: {}
		success: function(response) {
			// C'est dans la réponse qu'on va décider ce qu'on fait !
			if(response.success) {
				// Si tout est OK, on redirige le navigateur vers l'URL finale
				window.location.href = success_url;
			}
		}
	});		// fin de $.ajax 
}

[jd_83]

Ton explication est claire et nette. Une action asynchrone ne peut être bloquante !

Partant de là, je teste plusieurs solutions.
Celle-ci par exemple paraît fonctionner :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<button onClick='save_page($num)' >précédent</button>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function save_page(numpage){
	var fd = new FormData();
	fd.append('num',$("#num").val());
...
	$.ajax({
		url:'ajax_page_update.php',
		type:'post',
		data:fd,	
		dataType:'json',
		contentType: false,
		processData: false,
		success:function(response){
			if(response != ""){
				if(response.res==1){	...
				}
                       window.location.href="autrepage.php?num="+numpage;
		}		// fin de success
	});		// fin de $.ajax 
}

Et c'est plus simple que tout ce que j'avais fait jusqu'ici.

Merci bien, et bonne journée.