Discussion :

[guillaume40]

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

[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 :

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

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

[guillaume40]

Bonjour,
Le problème ne vient pas de là : le "return false;" y 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
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;
	});
});

[SpaceFrog]

plusieurs id produits sur la page ?

[guillaume40]

Non un seul <div id="produits"> et dans la page il n'y a que 2 <div id="*"></div>

[SpaceFrog]

essaye de rajouter live() sur ton

Code :

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

$("#produits")

[guillaume40]

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

Code :

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

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 :

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
 
$(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]"

[danielhagnoul]

Bonsoir.

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
$(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 :

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

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 :

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

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

[guillaume40]

En fait çà :

Code :

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

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 :

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

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

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