11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
Je débute avec Jquery et j'essaye d'appliquer mes connaissances en mettant en place un systeme de chargement de page via .load()
J'ai réussi à mettre en place le systeme d'ouverture et chargement des pages externes cependant lorsque je charge ma page avec cette fonction, mes scripts embarqués au sein de cette page ne fonctionnent plus ( tinyscrollbar et une fonction perso d'affichage de bulle).

Mes deux div servant à recevoir la page sont les suivantes:

<div id="metier"><div class="charg" style="display:none;"></div></div>
<div id="profil"><div class="charg" style="display:none;"></div></div>


et voici la partie avec le .load() qui doit poser problème:


		$('#navigation li ul.pages a.metier').click(function(){
		//												 
		$("#logo").fadeOut("slow");

		$('#navigation').removeClass('color2');
		$('#navigation').addClass('color1');
		//ON CHARGE
		var url = $(this).attr('href');
		$('#metier div.charg').load( url + "#metier .content");	
		//DISPARITION DE LA DIV
		$("#profil div.charg").fadeOut("slow");
		
		
		//------
		$('#profil').animate({
    	width: "100%",
    	height: "0px"
		}, 400, 'linear', function() {
							//------------ A --------------
							$("#metier").animate({ 
        					width: "100%",
							height: "180%"
     						}, 800, function(){
									//APPARITION DE LA DIV
								     $("#metier div.charg").fadeIn("slow");
									 $('#logo a').addClass('blanc');
									 $("#logo").fadeIn("slow");

									}
								);
							}//fin fonction
							
		);

		//Masquer les CATEGORIES
		$('#navigation li ul.categories, #navigation li ul.other').slideUp("slow");
		//AFFICHER BOUTON PRECEDENT
		$('#navigation li.prec').fadeIn("slow");
		
		
	//On surpprime les classes active Precedentes
	$('#navigation li ul.pages li').removeClass('active');
	//On change la classe du LI, pour le passer en ACTIF
	$(this).parent().addClass('active');
	return false;
	});



J'ai mis en ligne mon test, si vous souhaitez jeter un coup oeil:
-page avec le chargement
http://www.whornat.com/test-load/
-page à charger
http://www.whornat.com/test-load/page-a-charger.php

Je vous remercie d'avance
J'ai fait comme ceci:


$('#navigation li ul.pages a.profil').click(function(){
		//ON CHARGE
		var url = $(this).attr('href');
		
		//UTILISATION DU CALL BACK
		$('#profil div.charg').load(url + "#profil .content" ,function(){
    		//alert('page profil');
			
		//DISPARITION DE LA DIV
		$("#metier div.charg").fadeOut("slow");
		//------
		$('#metier').animate({width: "0px", height: "100%"}, 400, 'linear', function() {
		//------------ A --------------
		$("#profil").animate({ width: "100%", height: "180%" }, 800, function(){
		//APPARITION DE LA DIV
		$("#profil div.charg").fadeIn("slow");
		$('#logo a').addClass('blanc');
		$("#logo").fadeIn("slow");
		//INITIALISATION DES SCRIPTS CONTENU DANS LA PAGE
		$('.scrollblock').tinyscrollbar();
		//
		$('.chronologie_formations .bulle').hide();
		$('.chronologie_formations h4').hover(
				function () {
				$(this).next().fadeIn();
				}, function () {
				//$(this).next().fadeOut();
				});
		}
		);
		}//fin fonction
		);

		});
		//FIN CALL BACK LOAD()

	return false;
	});


Et cela fonctionne!
Cependant cela m'impose de modifier le script de chargement chaque fois que j'insérerai un script dans la page cible.
Existe-t-il une astuce pour récupérer les fonctions de la page cible et les insérer dynamiquement dans le code?

Faut aussi que je pense à simplifier mon code...

En tout cas, merci pour cette réponse rapide.