jQuery dans jQuery - pas trouvé mieu comme titre

**SpIrIt505050** · 06/02/2009, 12h12

Bonjour,
Je suis en train de développer un site qui contiendra de la musique, j'ai donc fais le choix de AJAX et jQuery afin de ne pas recharger la page et donc le jukebox.

Je posséde un menu :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="AjaxPage" class="header_menu">
	<ul id="menu">
		<li id="tab1" class="current"><a title="Accueil" href="index.php" onclick="change_current_tab('tab1')">Accueil</a></li>
		<li id="tab2"><a title="News" href="news.php" onclick="change_current_tab('tab2')">Actualités</a></li>
		<li id="tab3"><a title="Artistes" href="artistes.php" onclick="change_current_tab('tab3')">Artistes</a></li>
		<li id="tab4"><a title="Informations Pratiques" href="infos.php" onclick="change_current_tab('tab4')">Infos</a></li>
		<li id="tab5"><a title="Historique" href="historique.php" onclick="change_current_tab('tab5')">Historique</a></li>
		<li id="tab6"><a title="Forums" href="forums.php" onclick="change_current_tab('tab6')">Forums</a></li>
		<li id="tab7"><a title="Liens" href="liens.php" onclick="change_current_tab('tab7')">Liens</a></li>
		<li id="tab8"><a title="Contacts" href="contact.php" onclick="change_current_tab('tab8')">Contacts</a></li>
	</ul>
</div>

Lors du clic sur un des éléments du menu, je recharge que le contenu <div id="content"> de mes pages grâce à ce code javascript.

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
/* Fonction de chargement de page */
function ajax_page(ele,msg,url){
	$(ele).html(msg);
	setTimeout(function(){
		$(ele).load(url+" "+ele);
	}, 500)
}
 
/* Affichage de la page */
$(document).ready(function(){
	$("#AjaxPage a").click(function(){
		ajax_page('#content','<p style="text-align: center; font-weight : bold; margin-top: 30px;">Chargement... <br /><br /><img src="./template/orange/images/loading.gif"></p>',this.href);
		return false;
	});
});

Le problème est que la page de news possède une pagination (avec des liens), j'aimerais pouvoir ainsi effectuer ce même chargement de page avec ces liens, mais ça ne marche pas.

En effet, lorsque je clique sur news (news.php) il me charge le contenu du bloc #content :

Code :

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

1
2
3
4
5
6
- News 1
- News 2
- News 3
- News 4
- News 5
Aller à la page : [1] 2 3 4

en HTML :

Code :

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

1
2
3
4
5
6
7
8
9
10
<div id="content">
	<h2>{TITLE}</h2>
	- News 1
	- News 2
	- News 3
	- News 4
	- News 5	
 
	<div id="AjaxPage">Aller à la page : [1] <a href="news.php?page=2">2</a> <a href="news.php?page=3">3</a></div>
</div>

Et donc, le clic sur un des liens 2 3 4 recharge intégralement la page et non seulement le bloc #content.

Si quelqu'un a une solution ...

Merci d'avance.

Cordialement.

Spirit

**Bovino** · 06/02/2009, 12h37

Tu as deux id identiques sur ta page ? C'est mal, en changeant l'un des deux, ça devrait aller mieux.

**SpIrIt505050** · 06/02/2009, 13h39

Merci pour ta réponse, j'ai donc changer cette erreur et étrangement ça marche mais totalement aléatoirement (en tout cas, ça a l'air). Un coup il charge la page par AJAX et l'autre coup il charge la page par le navigateur.

Pour vous aider (à m'aider

), le nouveau code :

JavaScript :

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
/* Fonction de chargement de page */
function ajax_page(ele,msg,url){
	$(ele).html(msg);
	setTimeout(function(){
		$(ele).load(url+" "+ele);
	}, 500)
}
 
/* Affichage de la page */
$(document).ready(function(){
	$("#AjaxPage a").click(function(){
		ajax_page('#content','<p style="text-align: center; font-weight : bold; margin-top: 30px;">Chargement... <br /><br /><img src="./template/orange/images/loading.gif"></p>',this.href);
		return false;
	});
 
	$("#news a").click(function(){
		ajax_page('#content','<p style="text-align: center; font-weight : bold; margin-top: 30px;">Chargement... <br /><br /><img src="./template/orange/images/loading.gif"></p>',this.href);
		return false;
	});
});

HTML :

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
	<div id="header">
		<div id="AjaxPage" class="header_menu">
			<ul id="menu">
				<li id="tab1" class="current"><a title="Accueil" href="index.php" onclick="change_current_tab('tab1')">Accueil</a></li>
				<li id="tab2"><a title="News" href="news.php" onclick="change_current_tab('tab2')">Actualités</a></li>
				<li id="tab3"><a title="Artistes" href="artistes.php" onclick="change_current_tab('tab3')">Artistes</a></li>
				<li id="tab4"><a title="Informations Pratiques" href="infos.php" onclick="change_current_tab('tab4')">Infos</a></li>
				<li id="tab5"><a title="Historique" href="historique.php" onclick="change_current_tab('tab5')">Historique</a></li>
				<li id="tab6"><a title="Forums" href="forums.php" onclick="change_current_tab('tab6')">Forums</a></li>
				<li id="tab7"><a title="Liens" href="liens.php" onclick="change_current_tab('tab7')">Liens</a></li>
				<li id="tab8"><a title="Contacts" href="contact.php" onclick="change_current_tab('tab8')">Contacts</a></li>
			</ul>
		</div>
	</div>
 
	<div id="content">
		<h2>{TITLE}</h2>
		- News 1
		- News 2
		- News 3
		- News 4
		- News 5	
 
		<div id="news">Aller à la page : [1] <a href="news.php?page=2">2</a> <a href="news.php?page=3">3</a></div>
	</div>

Voila, merci encore.

**Bovino** · 06/02/2009, 13h47

Normal, dans la mesure où tu mets à jour ta div "content", les liens qui s'y trouvent sont aussi actualisés et ne possèdent plus les gestionnaires que tu as définis au chargement de la page.
Il faut donc relancer

Code :

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

1
2
3
4
$("#news a").click(function(){
	ajax_page('#content','<p style="text-align: center; font-weight : bold; margin-top: 30px;">Chargement... <br /><br /><img src="./template/orange/images/loading.gif"></p>',this.href);
	return false;
});

**SpIrIt505050** · 06/02/2009, 13h51

Je m'excuse d'avance, car étant débutant en AJAX.

Mais, je ne comprend pas le relancer, enfin je ne vois pas où le relancer ?

**Bovino** · 06/02/2009, 13h53

Code :

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

1
2
3
4
5
6
7
8
9
10
function ajax_page(ele,msg,url){
	$(ele).html(msg);
	setTimeout(function(){
		$(ele).load(url+" "+ele);
	}, 500); 
	$("#news a").click(function(){
		ajax_page('#content','<p style="text-align: center; font-weight : bold; margin-top: 30px;">Chargement... <br /><br /><img src="./template/orange/images/loading.gif"></p>',this.href);
		return false;
	});
}

**SpIrIt505050** · 06/02/2009, 14h09

Cela donne ne fonctionne pas.

Merci pour la rapidité de vos réponses.

**Bovino** · 06/02/2009, 14h12

Ah ben oui, ça marchera mieux en mettant cela dans le setTimeout

Code :

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

1
2
3
4
5
6
7
8
9
10
function ajax_page(ele,msg,url){
	$(ele).html(msg);
	setTimeout(function(){
		$(ele).load(url+" "+ele);
	$("#news a").click(function(){
		ajax_page('#content','<p style="text-align: center; font-weight : bold; margin-top: 30px;">Chargement... <br /><br /><img src="./template/orange/images/loading.gif"></p>',this.href);
		return false;
	});
	}, 500); 
}

**SpIrIt505050** · 06/02/2009, 14h18

Ca ne marche pas ...

**Bovino** · 06/02/2009, 14h31

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function ajax_page(ele,msg,url){
	$(ele).html(msg);
	setTimeout(function(){
		$(ele).load(url+" "+ele, function(){
			$("#news a").click(function(){
				ajax_page('#content','<p style="text-align: center; font-weight : bold; margin-top: 30px;">Chargement... <br /><br /><img src="./template/orange/images/loading.gif"></p>',this.href);
				return false;
			});
        });
	}, 500); 
}

**SpIrIt505050** · 06/02/2009, 14h37

Génial ! ça marche, je te remercie !!!

jQuery dans jQuery - pas trouvé mieu comme titre

jQuery

Discussions similaires

Partager

Partager