jQuery dans jQuery - pas trouvé mieu comme titre

Version imprimable

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:

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:

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:

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:

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

06/02/2009, 12h37
Bovino

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

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 :P), le nouveau code :

JavaScript :

Code:

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:

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.

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:

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; });

06/02/2009, 13h51
SpIrIt505050

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 ?

Code:

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;
	});
}

06/02/2009, 14h09
SpIrIt505050

Cela donne ne fonctionne pas.

Merci pour la rapidité de vos réponses.

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

Code:

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); 
}

06/02/2009, 14h18
SpIrIt505050

Ca ne marche pas ...

Code:

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); 
}

06/02/2009, 14h37
SpIrIt505050

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