$.ajax({ qui ne s'exécute pas

Version imprimable

Bonjour.

Je m'initie à Ajax.

J'ai un script php qui génère une liste, avec un lien 'supprimer' pour chaque élément.
Grace à javascript/jquery, je souhaite d'une part effacer dynamiquement l'élément de la page sans la recharger, d'autre par lancer une requête pour effacer l'enregistrement dans la base de données.

J'ai pour cela le script :
Code:

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 <script src="./lib/jquery-3.2.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $(".delete").click(function() { var element = $(this); var del_id = element.attr("id"); var del_name = element.attr("name"); var info = 'id=' + del_id ; if(confirm("Etes-vous sûr de vouloir effacer : " + del_name +" ?")) { $.ajax({ type: "POST", url: "supprimer.php", dataType : 'html', data: info }); $(this).parents(".show").animate({ backgroundColor: "#003" }, "fast") .animate({ opacity: "hide" }, "fast"); } return false; }); }); </script>
La partie effacement "graphique" dynamique s'exécute bien. J'ai ma boite d'alerte qui me demande une confirmation, et si confirmation la ligne s'efface à l'écran avec la petite animation.

Par contre "supprimer.php" ne s'exécute pas.
(je suis allé jusqu'à faire un fopen et fputs dans un fichier texte pour être sûr de la non exécution de ce fichier).

Rien dans la console.

J'ai essayé "./supprimer.php" ou avec le chemin complet d'accès (les deux fichiers sont dans le même répertoire).

Je ne sais pas comment continuer à debugguer ce problème. Si vous avez des suggestions.

Je vous remercie d'avance.

essaie ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<script type="text/javascript">
	$(function() 
	{
		$(".delete").click(function()
		{
			var element = $(this),del_id = element.attr("id"),del_name = element.attr("name"),info = {id : del_id };
 
			if(confirm("Etes-vous sûr de vouloir effacer : " + del_name  +" ?"))
			{
	 			$.ajax({
					url: "supprimer.php",
					type: "POST",
					data: info,
					dataType : 'JSON',
					success : function(){
						element.parents(".show").animate({ backgroundColor: "#003" }, "fast").animate({ opacity: "hide" }, "fast");	
					}
				});
	 		}
		});
	});
</script>

05/08/2017, 06h52
mkdir

Bonjour.
Merci pour ces éléments de réponse.
J'avais déjà essayé de supprimer dataType mais pas le paramétrer en JSON.
J'ai apporté les modifications suggérées.
$.ajax() ne s'exécute toujours pas (la boite d'alerte apparaît, mais la fonction success n'est pas exécutée, c'est à dire que contrairement à l'état initial, la suppression visuelle ne fonctionne plus).
05/08/2017, 08h26
mkdir

Avec un nom de fichier php appelé incorrect, la console me renvoie bien une erreur :

Citation:

POST
XHR
http://localhost/supprimer.php [HTTP/1.1 404 Not Found 0 ms]

En indiquant le bon nom de fichier, pas d'erreur, donc le fichier est bien accessible et son appel n'est pas en soi la cause du problème.

A noter que mon script est exécuté dans un template Twig, je ne sais pas si cela peut interférer.
06/08/2017, 07h12
mkdir

Citation:

Envoyé par mkdir

A noter que mon script est exécuté dans un template Twig, je ne sais pas si cela peut interférer.

Testé hors template Twig, dans html brut. Comportement similaire.

Voici un fichier html, générant le contenu graphique, avec le script intégré
Ne marche pas.
Si on déplace "element.parents(".show").." hors de la fonction success() après $.ajax, la suppression graphique s'effectue, mais le script php n'est pas exécuté.

NB : jquery-3.2.1.min.js est copié en local, si à partir du source html je clique sur le lien, le fichier est bien accessible. Il n'y a pas d'erreur à ce sujet.

Code:

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<html>
	<head>
	</head>
	<body>
          	<script src="./lib/jquery-3.2.1.min.js" type="text/javascript"></script>
			<script type="text/javascript">
                                $(function()
                                {
                                        $(".delete").click(function()
                                        {
                                                var element = $(this),del_id = element.attr("id"),del_name = element.attr("name"),info = {id : del_id };
                                                if(confirm("Etes-vous sûr de vouloir effacer : " + del_name  +" ?"))
                                                {
                                                        $.ajax({
                                                                url: "supprimer.php",
                                                                type: "POST",
                                                                data: info,
                                                                dataType : 'JSON',
                                                                success : function(){
                                                                        element.parents(".show").animate({ backgroundColor: "#003" }, "fast").animate({ opacity: "hide" }, "fast");
                                                                }
                                                        });
                                                }
                                        });
                                });
                        </script>
					<table>
							<tr class="show">
								<td>
									 										fiche 1
															 		</td>
						 		<td>
									<a href="fiche.php?id=1117">
								  		Voir la fiche
									</a>
								</td>
								<td>
																			En stock
																	</td>
								<td>
										<a href="#" id="1117"  name="fiche 1" class="delete" title="Delete">Supprimer </a>
								</td>
							</tr>
							<tr class="show">
								<td>
									 										fiche 2
															 		</td>
						 		<td>
									<a href="fiche.php?id=553">
								  		Voir la fiche
									</a>
								</td>
								<td>
																			En stock
																	</td>
								<td>
										<a href="#" id="553"  name="fiche 2 " class="delete" title="Delete">Supprimer </a>
								</td>
							</tr>
							<tr class="show">
								<td>
									 										fiche 3
															 		</td>
						 		<td>
									<a href="fiche.php?id=400">
								  		Voir la fiche
									</a>
								</td>
								<td>
																			En stock
																	</td>
								<td>
										<a href="#" id="400"  name="fiche 3" class="delete" title="Delete">Supprimer </a>
								</td>
							</tr>
					</table>
		</body>
</html>