Fonction JS qui ne fonctionne pas sous Chrome

**hellsings** · 21/03/2012, 20h05

Bonjour à tous !

Je bloque depuis un moment et j'espère que vous pourrez m'aider.

J'ai créé une fonction afficher que voilà :

Code :

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

1
2
3
4
5
function afficher(data){
		$("#content").empty();
		$("#content").append(data);
		$("#content").fadeIn(1000);
}

Cette fonction fonctionne parfaitement sous Firefox et IE mais pas sous chrome !

Avez-vous une idée pour m'éclairer ?

Merci d'avance !

**Bovino** · 21/03/2012, 21h27

Avez-vous une idée pour m'éclairer ?

J'imagine que te dire d'allumer une lampe ne te conviendra pas...
Alors non, pas d'idée.

Maintenant, si tu en disais plus sur le contexte : comment cette fonction est appelée, quel est le code HTML en rapport, que te dis la console des outils de développeurs, etc. on pourrait certainement t'aider mieux !

**danielhagnoul** · 21/03/2012, 23h58

Bonsoir

Je ne suis pas plus éclairé

que Bovino, mais déjà : $( "#content" ).html( data ).fadeIn( 1000 );.

**hellsings** · 22/03/2012, 12h36

Bonjour et merci de vos réponses.

Cette fonction afficher(data) que je vous ai décrite est appelé ici :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() {
	$(".liens").click(function(){
		page = $(this).attr("href");
		$.ajax({
			url : "pages/"+page,
			cache:false,
			success:function(html)
			{	afficher(html);	},				  error:function(XMLHttpRequest,textStatus,errorThrown)
			{	alert("Une erreur est survenue pendant le chargement de la page demandée");	}
			})
		return false;
	})

Cette fonction me permet de naviguer sur les pages de mon site uniquement en rechargeant la partie <div id="content">...</div>.
Pour ça je récupère le lien de la page puis j'efface le content de la page en cours pour le remplacer par le content de la page nouvelle.
Sur Chrome, c'est la fonction append(data) qui ne marche pas puisque le content s'efface bien, mais il n'affiche pas le content de la nouvelle page.

J'espère avoir été plus clair !

(Effectivement, une lampe m'aidera pas plus que ça)

**danielhagnoul** · 22/03/2012, 23h08

Bonsoir

Le code de cette transaction AJAX est très approximatif (get ? post ? datatype ?, pourquoi cache false ?).

Je vous conseille la lecture de la FAQ et plus particulièrement : Comment dois-je formuler une requête AJAX ?

J'écrirais plutôt :

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
$( ".liens" ).click( function(){
	var monURL = "pages/" + $(this).attr("href"); // var ! 
 
	$.post( monURL, function( data, textStatus, jqXHR ) {
		// debug
		// console.log(data, textStatus, jqXHR);
 
		// succès de la transaction, on doit traiter le contenu de data
 
                                $( "#content" ).html( data ).fadeIn( 1000 );
 
	}, "html" ).error( function( jqXHR, textStatus, errorThrown ){
		// debug
		// console.log(jqXHR, textStatus, errorThrown);
 
		// échec de la transaction, gérer la catastrophe
 
                //alert( "Une erreur est survenue pendant le chargement de la page demandée" );
 
	});
 
	return false;
});

**hellsings** · 23/03/2012, 11h05

Merci danielhagnoul pour cette solution mais elle ne semble pas résoudre mon problème.

Sur Firefox et IE ça charge bien les pages demandées dans le content. Mais toujours pas sur Chrome... Il efface le contenu du #content mais n'affiche pas le nouveau.

Est-ce que Chrome gère le Ajax ?

**danielhagnoul** · 24/03/2012, 00h40

Est-ce que Chrome gère le Ajax ?

Bien entendu !

Comme toujours (on se lasse à le répéter) sans le contexte (HTML, CSS, JS ou un lien vers la page web) il est impossible d'examiner votre problème.

**hellsings** · 24/03/2012, 11h42

Pour le contexte, je vous ai déjà dit.

Dans mon HTML toutes mes pages sont de la forme :

Code :

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

1
2
3
4
5
6
7
8
<html>
...
<body>
<div id="content"> 
/*contenu*/
</div>
</body>
</html>

Niveau CSS pour ce content :

Code :

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

1
2
3
4
5
6
#content 
	{ 	width: 920px; 
		height: auto; 
		margin: 0 auto; 
		background: url(img/bg/content-2.png) repeat-y; 
		padding: 10px 25px 10px 25px; }

Rien de spécial donc. Les menus de ma page sont de la forme <a class="liens" href="..." title="...">Menu</a>

Il n'y a pas de CSS associé à .liens car mes menus sont dans des balises <ul> donc je les ai mis en forme avec ça. Puis dans une page liens.js que j'ai appelé dans la page HTML, j'ai inséré le code que j'avais déjà décris et que j'ai modifié avec vos conseils.

Cette fonction JS me permet d'éviter le chargement de toute la page puisque seul le #content change.

Donc après je sais pas quoi vous montrer de plus... Comme je l'ai dit, sur Firefox et sur IE il n'y a pas de problème. Au clic d'un lien du menu, le content change.
Sur Chrome, le content se vide et reste vide. Donc je ne sais pas du tout. Et je ne peux pas me permettre de rendre un code qui ne fonctionne pas sous Chrome. Mais j'avoue que je bloque. Ajax est tout nouveau pour moi.

Désolé si je ne suis pas assez clair. Je fais de mon mieux. Merci de l'attention que vous portez à mon problème.

Ps : Je travaille en local, je ne peux donc pas vous passer de lien vers les pages.

**Bovino** · 24/03/2012, 11h47

Il existe des outils de développeur sur Chrome (Outils > Outils de développement).
As-tu des messages d'erreur dans la console ?

Fonction JS qui ne fonctionne pas sous Chrome

jQuery

Discussions similaires

Partager

Partager