Ajax fonctionne une fois sur deux

Version imprimable

01/07/2010, 13h37
guillaume40

Ajax fonctionne une fois sur deux

Bonjour,
Alors je souhaite utiliser la fonction ajax de jQuery pour faire une navigation sans recharger les pages.
Cependant je le fait de façon à ce que même JavaScript désactivé çà fonctionne.

Donc quand j'arrive sur ma page je clique sur un lien de la pagination, là c'est OK sa rafraichit que les éléments voulus .

Mais après si je clique à nouveau sur un lien de la pagination la navigation Ajax ne marche pas et sa va à l'URL en rechargeant la page.

J'ai donc comparé les deux pages : la page quand çà marche et la page quand çà marche pas.

Mais la seule différence que je vois c'est :
<div style="display: block;" id="produits"> ( dans la page chargé via Ajax)
et
<div id="produits"> ( dans la page en accés direct, et c'est cette ligne dans mon fichier php)

D'où çà peut venir ?

Merci d'avance
01/07/2010, 23h39
danielhagnoul
Bonsoir.

Il manque un return false pour éviter le traitement par défaut et la propagation de l'événement dans le DOM :
Code:

1 2 3 4 $("monID").click(function(){ --- return false; });

Bonjour,
Le problème ne vient pas de là : le "return false;" y est.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function(){
	$(".paginate").click(function() {
		var page = $(this).attr("href");
		page = page.replace("index.php","produits.php");
		$.ajax({
			url: page,
			cache: false,
			success: function(html){
				$("#produits").fadeOut(300, function(){
					$("#produits").empty().append(html).fadeIn(500);
				});
			},
			error: function(XMLHttpRequest, textStatus, errorThrown){
				alert(textStatus);
			}
		});
		return false;
	});
});

02/07/2010, 08h40
SpaceFrog

plusieurs id produits sur la page ?
02/07/2010, 09h18
guillaume40

Non un seul <div id="produits"> et dans la page il n'y a que 2 <div id="*"></div>
02/07/2010, 09h25
SpaceFrog

essaye de rajouter live() sur ton

Code:

$("#produits")

Donc maintenant j'ai mis dans la partie success de la requete Ajax ceci :
Code:

1 2 3 4 $("#produits").live('click', function(){ $("#produits").empty().append(html).fadeIn(500); });
En contrôlant avec Firebug quand je clique sur les liens de pagination je vois bien que les requêtes sont envoyées.
Cependant elles ne sont pas chargé dans le div #produits

Alors qu'avant sans le live() avec Firebug je ne voyais la requête faite par Ajax que une fois, la 2éme fois c'était tout le temps un rechargement total de la page.

##EDIT##
J'ai une information qui peut être est importante.
Dans mon fichier .js j'ai essayé autre chose.
J'ai mis :
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 $(document).ready(function(){ $(".paginate").click(function() { var page = $(this).attr("href"); page = page.replace("index.php","produits.php"); $.ajax({ url: page, cache: false, success: function(html){ alert(html); $("#produits").empty().append(html); $("#produits").live('click', function(content){ alert(content); $("#produits").empty().append(html); }); /*$("#produits").fadeOut(300, function(){ $("#produits").empty().append(html).fadeIn(500); });*/ }, error: function(XMLHttpRequest, textStatus, errorThrown){ alert(textStatus); } }); return false; }); });
Premiere fois que je clique sur un lien j'ai un alert qui s'ouvre avec le contenu de la page chargé, je re-clique sur un autre lien et la dans l'alert j'ai "[object Object]"

Bonsoir.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function(){
	$(".paginate").click(function() {
		var page = $(this).attr("href");
		page = page.replace("index.php","produits.php");
		$.ajax({
			url: page,
			cache: false,
			success: function(html){
				$("#produits").html(html);
			},
			error: function(XMLHttpRequest, textStatus, errorThrown){
				alert(textStatus);
			}
		});
		return false;
	});
});

Je ne comprends pas bien le but final de :

Code:

1
2
		var page = $(this).attr("href");
		page = page.replace("index.php","produits.php");

S'il s'agit de modifier le lien dans this, il faut écrire :

Code:

$(this).attr("href", "produits.php");

02/07/2010, 23h42
guillaume40
En fait çà :
Code:

1 2 3 var page = $(this).attr("href"); page = page.replace("index.php","produits.php");
çà me permet de récupérer uniquement le contenu de la page produits.php pas de <head> etc...
Car dans index.php j'ai le <html><head>..... et aprés j'inclu produits.php

Même en remplaçant par :

Code:

$("#produits").html(html);

J'ai toujours le même problème.