AJAX KO sur chrome, OK sous FireFox

phenix4 · 01/07/2011, 15h53

Bonjour tout le monde !

Je réalise un projet assez gros dans le cadre de mon stage, et je réalise la partie 'récupération de donnée' avec AJAX.

J'utilise Django ( framework web Python) pour gérer la partie donnée et une interface html/javascript utilisant jQuery pour rendre tout ça jolie et efficace.

Le problème que je rencontre est l'appel AJAX lui même. Je m'explique :
Quel que soit le type d'appel AJAX que j'effectue je me retrouve forcément avec un retour d'erreur sous Chrome, et une bonne réponse sous firefox.

Ma requete AJAX fonctionne sous firefox parfaitement, mais pas sous chrome ...
Je ne comprend pas bien d'où viens le problème surtout que je travail sur un exemple extrêmement bateau d'AJAX !

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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Demo ajax</title>
		<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
		<script type="text/javascript">
 
			$(function(){
 
					$( "a" ).click(function( objEvent ){
							$("#ajax-status").empty();
							$.ajax(
								{
									url: $(this).attr( "href" ),
									type: "get",
									dataType: "html",
									error: function(){
										ShowStatus( "AJAX - error()" );
										$("#content").html( "<p>Page Not Found!!</p>" );
									},
									beforeSend: function(){
										ShowStatus( "AJAX - beforeSend()" );
									},
									complete: function(){
										ShowStatus( "AJAX - complete()" );
									},
									success: function( strData ){
										ShowStatus( "AJAX - success()" );
										$("#content").html( strData );
									}
								}			
								);
							return( false );	
						});
				});
 
			function ShowStatus( strStatus ){
				var jStatusList = $("#ajax-status");
				jStatusList.append( "<p>" + strStatus + "</p>" );
			}
		</script>
</head>
 
<body>
	<p>
		<a href="./test/about.htm">About</a> -
		<a href="./test/contact.htm">Contact</a> -
		<a href="./test/office.htm">Office</a> - 
	</p>
 
	<div id="content" style="float: left ; width: 50% ;">
		<p>
			Pas de contenu
		</p>	
	</div>	
	<div id="ajax-status" style="float: right ; width: 45% ;">
	</div>
 
 
</body>
 
</html>

A la racine de ce fichier se trouve bien évidement un répertoire 'test' contenant les fichier about.htm, contact.htm et office.htm contenant chacun un petit morceau de html à récupérer en AJAX.

Aprés plusieurs heures de recherches, je ne trouve toujours pas d'explication je m'en remet donc à vous.
Merci d'avance.

danielhagnoul · 02/07/2011, 11h42

Bonjour

Dans $(this).attr( "href" ), la valeur de this m'inquiète !

Je suggère de tester avec une variable, var theURL = $(this).attr( "href" ); et $.ajax({url: theURL, ...

phenix4 · 04/07/2011, 14h49

Cela ne change rien.
La requête AJAX me retourne systématiquement en erreur ...

Je suis dans le flou total !

danielhagnoul · 04/07/2011, 21h25

Bonsoir

Je vous suggère de remplacer l'ensemble de votre code par la méthode simplifiée $.get(), et d'examiner les résultats.

Voir : Comment dois-je formuler une requête AJAX ?

Je vois que vos liens "a" ne contiennent pas un fichier serveur (PHP par exemple). Sans serveur pour traiter la demande c'est l'échec assuré.

02/07/2011, 11h42	#2
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonjour Dans $(this).attr( "href" ), la valeur de this m'inquiète ! Je suggère de tester avec une variable, var theURL = $(this).attr( "href" ); et $.ajax({url: theURL, ... __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

04/07/2011, 14h49	#3
phenix4 Invité de passage Inscription : avril 2009 Messages : 22 Détails du profil Informations forums : Inscription : avril 2009 Messages : 22 Points : 0 Points : 0	Cela ne change rien. La requête AJAX me retourne systématiquement en erreur ... Je suis dans le flou total !
	00

04/07/2011, 21h25	#4
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonsoir Je vous suggère de remplacer l'ensemble de votre code par la méthode simplifiée $.get(), et d'examiner les résultats. Voir : Comment dois-je formuler une requête AJAX ? Je vois que vos liens "a" ne contiennent pas un fichier serveur (PHP par exemple). Sans serveur pour traiter la demande c'est l'échec assuré. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email