fonction $.ajax sous IE8

Version imprimable

Bonsoir,

Pour envoyer un simple mail via un formulaire j'utilise jquery et la fonction $.ajax.

Tout fonctionne bien sous Firefox, je reçoit bien le mail, alors que sous IE8 ça ne fonctionne pas.

Quelqu'un peux-t-il me donner une explication ? Ci-dessous mon code . Merci d'avance. Pascal

Pour info : ce code est tiré d'une page indépendant (ici contact.html) qui est chargée via une méthode jquery load() depuis une sorte de master page index.html. L'exemple online se trouve sur http://www.lemarcaire.fr/maquettes/jardins/ et le code correspond à la page http://www.lemarcaire.fr/maquettes/jardins/contact.html

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
<script type="text/javascript">
	   $("#envoi").click(function(){
 
			 $.ajax({
			   type: "POST",
			   url: "sendmail.php",
			   data: "nom="+$('[name=nom]').val()+"&tel="+$('[name=tel]').val()+"&courriel="+$('[name=courriel]').val()+"&message="+$('textarea').val(),
			   success: function(msg){
				 $("#formulaire").hide();
				 $("#info").empty();
				 if (msg=='ok')
					$("#info").append("<li>Votre message a bien été envoyé</li>");
				else 
					$("#info").append("<li>Une erreur a été rencontrée durant l'envoi du message. Merci de réessayer plus tard.</li>");
 
			   }
 
			 });
 
	   });
 
</script>
<h2>Contact</h2>
<p>Pour tout devis ou autre demande d'information, merci de compléter le fomulaire ci-dessous. Nous vous répondrons dans les plus brefs délais.</p>
<ul id="info" style="color : #900;margin-left : 30px"></ul>
 
	<table style="margin : 20px;border : 1px solid #b5ff1c;" cellspacing="10px" id="formulaire">
		<tr>
			<td><label>Nom ou raison sociale<sup>*</sup>  :  </label> </td>
			<td><input type="text" size="40" name="nom"/></td>
		</tr>
		<tr>
			<td><label>Courriel : </label></td>
			<td><input type="text" size="40" name="courriel"/></td>
		</tr>
		<tr>
			<td><label>Téléphone<sup>*</sup> : </label></td>
			<td><input type="text" size="40" name="tel"/></td>
		</tr>
		<tr>
			<td><label>Message<sup>*</sup>  : </label></td>
			<td><textarea type="text" rows="3" cols="31" name="message"/></td>
		</tr>
		<tr>
			<td></td>
			<td style="text-align : center">
 
				<button id="envoi" style="width : 100px">Envoyer</button>&nbsp
				<button id="reinit" style="width : 100px">Effacer</button>
			</td>
 
		</tr>
	</table>
 
<p>Vous pouvez également nous contacter par téléphone au <strong>03.88.55.42.41</strong> du lundi au vendredi de 9h00 à 18h00</p>
<p><sup>*</sup>  : champs obligatoires</p>

16/09/2009, 08h34
Tristan Zwingelstein

Citation:

ça ne fonctionne pas.

Tu ne reçois pas le mail ?
Tu as une erreur ?
16/09/2009, 08h38
ritpas

Oui je ne reçois pas le mail.
Ca échoue en silence, c'est comme si rien ne se passait en cliquant sur le bouton

(remarque : avec Firefox, le formulaire disparaît et un message s'affiche comme quoi le mail a bien été envoyé et le mail arrive ffectivement dans ma boîte)
16/09/2009, 09h09
Tristan Zwingelstein
Essaye en mettant :
Code:

1 2 <input type="submit" ....
à la la place de ton "button"

Je vois aussi que tu n'utilises pas de formulaire

Code:

<form ...

Je te conseilles de faire ça et d'ensuite associé un évènement non pas de type "click" sur le bouton mais de type "submit" sur ton formulaire.

Je l'avais déjà fait, là je l'ai refait et mis en ligne mais comme on peut le constater, non seulement avec IE8 ça ne marche pas (echec en silence, rien ne se passe) et avec Firefox ça ne marche plus non plus : il me recharge automatiquement la page d'accueil sans envoyer le mail...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
   $("form").submit( function() {
 
			 $.ajax({
			   type: "POST",
			   url: "sendmail.php",
			   data: "nom="+$('[name=nom]').val()+"&tel="+$('[name=tel]').val()+"&courriel="+$('[name=courriel]').val()+"&message="+$('textarea').val(),
			   success: function(msg){
				 $("#formulaire").hide();
				 $("#info").empty();
				 if (msg=='ok')
					$("#info").append("<li>Votre message a bien été envoyé</li>");
				else 
					$("#info").append("<li>Une erreur a été rencontrée durant l'envoi du message. Merci de réessayer plus tard.</li>");
 
			   }
 
			 });
 
	   });

16/09/2009, 11h42
Tristan Zwingelstein

Code:

<form onsubmit="return false;">

Pour empêcher la page de se recharger.

Ensuite fais un test pour voir si l'évènement est bien réceptionné lors du clic sur ton bouton sous ie.
16/09/2009, 12h20
ritpas

En fait, j'ai trouvé une solution, j'ai laissé comme j'avais fait, sans la balise form , par contre, j'ai mis le script de ma page contact.html sous la fonction $(document).ready et là ça marche sur FF et IE8.

Mais peut-être ta méthode marche-t-elle aussi...

Merci en tous cas .

Pascal