Discussion :

[ricobye]

Bonjour,

Je suis très embêté avec ma fenetre modale qui ne se ferme pas lorsque je la valide... Mon code est le suivant:

Code HTML :

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
<div id="contact"><button type="button" class="open-button" data-toggle="modal" 
	data-target="#contact-modal">Rappelez-moi</button>
</div>
<div id="contact-modal" class="modal fade" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h3>Mes contacts</h3><a class="close" data-dismiss="modal">X</a>
			</div>
			<form id="callbackForm" name="contact" role="form" class="form-container">
				<div class="modal-body">				
					<div class="form-group">
						<label for="name">Nom</label>
						<input type="text" name="name" class="form-control">
					</div>
					<div class="form-group">
						<label for="phone">Téléphone</label>
						<input type="number" name="phone" class="form-control">
					</div>				
				</div>
				<div class="modal-footer">													    
					<button type="button" class="btn cancel" data-dismiss="modal">Fermer</button>
					<button type="submit" class="btn" id="submit">Envoyer</button>
				</div>
			</form>
		</div>
	</div>
</div>

En cliquant sur le bouton "Envoyer", la fenêtre reste ouverte. Vraiment l'impression qu'il ne se passe rien. Aucun message d'erreur...
Pourrais-je avoir un coup de main s'il vous plait?

Cordialement

[Toufik83]

Bonjour,

Je viens de tester et le modal se ferme sans problème, vérifies s'il y'a un preventDefault() sur les <form> lors de la soumission.

[ricobye]

Bonjour,

Content de savoir que ce n'est pas ce code qui pose problème. Je n'utilise pas de preventDefault()...Jamais utilisé cette instruction. Est-ce lié à l'AJAX que j'utilise par derrière?

J'insère mon code dans ma page par un include:

Code HTML :

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

1
2
3
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
               <?php include('../../shared/callback.php') ?>
	  </div>

Et juste en dessous, j'ai ce script qui fait appel à l'AJAX

Code :

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

1
2
3
4
5
6
7
8
<script>
$(document).ready(function(){	
	$("#callbackForm").submit(function(event){
		submitForm();
		return false;
	});
});
</script>

La fonction submitForm() est

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function submitForm(){
	 $.ajax({
		type: "POST",
		url: "../../shared/service/userphone.php",
		cache:false,
		data: $('form#callbackForm').serialize(),
		success: function(response){
			$("#contact").html(response)
			$("#contact-modal").modal('hide');
		},
		error: function(){
			alert("Error");
		}
	});

Je teste et reteste mais rien à faire...

[Toufik83]

Bonjour,

Le comportement de return false; et preventDefault() est le même, ça empêche le rechargement de la page lors de la soumission du formulaire.

Pour t'assurer que la fonction s'exécute, ajoutes un simple console.log dans success et regarde la console du navigateur :

Code :

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

1
2
3
4
5
6
 
success: function(response){
        console.log("success ajax :",response);//tu vois cette ligne dans la console après la soumission ?
	$("#contact").html(response)
	$("#contact-modal").modal('hide');
}

Tu dois aussi utiliser l'onglet "Network", pour voir les détails de l'appel ajax.

[ricobye]

Bonjour,

Surprise, je ne vois pas le console.log. Et pire, l'Ajax n'est pas appelé...Je ne vois rien dans l'onglet Network. Il doit avoir une grosse erreur dans ce petit code...

[Toufik83]

Bonjour,

Alors là, il y'a quelque chose qui ne va pas.

Peut être que le code js d'ajax est ajouté avant que le <form> soit présent dans le DOM, et si tu modifies un peu la syntaxe :

Code :

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

1
2
3
4
5
6
7
 
$(document).ready(function(){	
	$("body").on("submit","#callbackForm",function(event){
		console.log("ajax lancée...");//toujours rien dans la console ?
                ....
	});
});

[ricobye]

J'ai bidouillé dans tous les sens mais rien à faire...Il y'a quelque chose qui m’échappe....Toujours rien d'afficher dans la console et le network...

[ricobye]

Bonjour,

Pour avancer j'ai utilisé une méthode de gangster...Je n'en suis pas fière mais bon...

Code HTML :

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

1
2
3
4
	  <div class="modal-footer">													    
               <button type="button" class="btn cancel" data-dismiss="modal">Fermer</button>
	       <button type="submit" class="btn" id="submit" onclick="return submitForm()" data-dismiss="modal">Envoyer</button>
	  </div>

Vraiment nul

[Toufik83]

Bonjour,

C'est surement la version bootstrap que tu utilises qui pose problème avec l'attribut data-dismiss="modal" que tu viens d'ajouter dans le dernier code.

Je me souviens d'un problème ressemblant à celui-là ..., essaies de garder $.ajax et supprime onclick et ajouter l'attribut data-dismiss="modal" au bouton id="submit" :

Code html :

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

1
2
 
<button type="submit" class="btn" id="submit" data-dismiss="modal">Envoyer</button>

Sinon vérifies aussi qu'il n'y a aucun stopPropagation() attaché à l'événement submit des <form> dans le code de la version bootstrap que tu utilises.