Submit event.preventDefault() bloque la reponse ajax success

Version imprimable

Bonjour,

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
	$("form").submit(function(event) {
		var partenaireId = "<?php echo $partenaireId; ?>";
		var montant_remise = $('input#remise_montant_calcul').val();
		var observation = $('input#remise_justification').val();
		// On construit le Json :
		var remise = JSON.stringify({ 
			partenaireId:partenaireId,
			montant_remise: montant_remise,
			observation: observation
		});
		// appel ajax :
		$.ajax({
			url: 'script-offres.php',
			method: 'POST',
			data: { remise: remise },
			dataType: "json",
			success: function(code_html, statut){
				$('#remise_form').hide();
				$('#panier').replaceWith(code_html).slideDown();
			},
		});
		// Empêche le formulaire de se poster normalement
		event.preventDefault();
    });

Le souci est que event.preventDefault() bloque aussi les evenements de mon "success"...

Je fouine un peu partout pour trouver la solution mais je tourne en rond :/

Merci d'avance pour vos lumières !

21/08/2020, 02h10
Toufik83
Bonjour,

Comment sais-tu que les actions de succès sont bloquées ? tu as un message d'erreur dans la console ?

Puis après l'appel d'ajax est censée récupérer du json, alors que la ligne 19 dans le code n'est pas bonne :
Code:

1 2 $('#panier').replaceWith(code_html).slideDown();
Tu remplace un élément du DOM #panier par un objet json :weird: ?

à mon avis commence par ajouter la fonction de rappel error pour voir d'abord s'il y'a des erreurs ou pas :
Code:

1 2 3 4 5 success:function(json,statut){....}, error:function(err){ alert("Erreur ajax :"+err.responseText); }
Remarque : il faut remplacer les fonctions de rappel success et error par done et fail car selon la documentation elles sont dépréciées et supprimées de jQuery version 3+:

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

Un grand merci Toufik83 !

J'ai tendance à apprendre JQuery par les exemples piochés ici et là... et du coup je choppe des bouts obsolètes.
Pareil un grand merci sur l'éclairage sur le "dataType", j'étais persuadé que ça déclarait le type de données envoyées et non reçues.. c'était donc le problème de mon code.
Enfin j'utilise bien la console Chrome pour debbuguer et mets des 'alert' mais connaissais pas "error:function(err)", ça m'a permis de confirmer que le success était correct !
Et enfin... je viens d'updater mon code avec "done".

Merci pour toutes ces infos !
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 $("form").submit(function(event) { // Empêche le formulaire de se poster normalement event.preventDefault(); var partenaireId = "<?php echo $partenaireId; ?>"; var montant_remise = $('input#remise_montant_calcul').val(); var observation = $('input#remise_justification').val(); // On construit le Json : var remise = JSON.stringify({ partenaireId:partenaireId, montant_remise: montant_remise, observation: observation }); // appel ajax : $.ajax({ url: 'script-offres.php', method: 'POST', data: { remise: remise }, dataType: 'html', }) .done(function(html) { $('#remise_form').hide(); $('#panier').replaceWith(html).slideDown(); });