11550 sujets

JavaScript, DOM et API Web HTML5

Interactions entre fonctions

Bonjour,

je me mets doucement à l'AJAX pour élargie mes horizons en ce qui concerne l'interface utilisateur. J'ai donc décomposé mon nouveau projet en une structure fixe (un top menu et un bouton qui déplie un panneau latéral en jquery) et une div centrale qui accueille le contenu chargé dynamiquement via ce code : 

var api = $('.scroll-pane-arrows').jScrollPane(
		{
			showArrows:true,
			maintainPosition: false
		}
	).data('jsp');
	
	$('#menu a').bind(
		'click',
		function()
		{
		var url = $(this).attr('href');
			api.getContentPane().load(
				url + " #container",
				function()
				{
					api.reinitialise();
				}
        
			);
			return false;
		}
	);


Vous constaterez que j'ai choisi jScrollPane comme méthode de scroll pour mon contenu. Je charge donc le contenu et réinitialise le scroll grâce a l'api jScrollPane. Le contenu vient d'un fichier php dont je récupère la div #container qui contient parfois un menu contextuel comme ceci : 

<body>
  <div id="container">
  
  <div id="menuRight">
      <li><a class="actif" href="bill.php">Pr&eacute;sentation</a>
      </li>
      <li><a href="bill_serv.php">Services</a>
      </li>
  </div>
  
  <div class="scroll-pane-arrow" style="float:right; width:85%;">
   
   bill presentation
   </div>
   </div>
  </body>


Jusque là pas de soucis, le contenu s'affiche et le scroll se met à jour. Vient ensuite le callback via ajaxComplete() pour ajouter l'évènement click sur le menu contextuel fraîchement chargé : 

$('#menu a').ajaxComplete(function() {
      $('#menuRight a').click(function(event){ 
        var urlRight = $(this).attr('href'); 
        $('#container').load(urlRight + " #container"); 
        event.preventDefault(); 
      }); 
  });


Et la je bloque car le menu contextuel fonctionne très bien, mais mon top menu lui cesse de fonctionner... Il doit y avoir un conflit ou alors le callback annule la fonction à laquelle il correspond... Avez-vous une idée? Merci d'avance!
J'ai réussi à résoudre mon problème donc voici la solution pour ceux que ça pourrait aider. Au lieu de ce code :

$(document).ready(function(){
	$(".trigger").click(function(){
		$(".panel").toggle("fast");
		$(this).toggleClass("active");
		return false;
	});
	var api = $('.scroll-pane-arrows').jScrollPane(
		{
			showArrows:true,
			maintainPosition: false
		}
	).data('jsp');       
	
	$('#menu li a').bind(
		'click',
		function()
		{
		var url = $(this).attr('href');
			api.getContentPane().load(
				url + " #container",
				function()
				{
					api.reinitialise(); 
				}
        
			); 
			return false;
		}
	); 
	$('#menu a').ajaxComplete(function() {
  $('#menuRight a').click(function(event){ 
        var urlRight = $(this).attr('href'); 
        $('#container').load(urlRight + " #container"); 
        event.preventDefault(); 
        }); 
});


qui utilise .bind pour attacher l'événement click, j'ai utilisé .live sur 'li a' qui permet d'attacher l'événement click sur chaque élément 'li a' créé dynamiquement. Voici l'exemple : 


$(document).ready(function(){
	$(".trigger").click(function(){
		$(".panel").toggle("fast");
		$(this).toggleClass("active");
		return false;
	});
	var api = $('.scroll-pane-arrows').jScrollPane(
		{
			showArrows:true,
			maintainPosition: false
		}
	).data('jsp');       
	
	$('li a').live(
		'click',
		function()
		{
		var url = $(this).attr('href');
			api.getContentPane().load(
				url + " #container",
				function()
				{
					api.reinitialise(); 
				}
        
			); 
			return false;
		}
	); 
	/*$('#menu a').ajaxComplete(function() {
  $('#menuRight a').click(function(event){ 
        var urlRight = $(this).attr('href'); 
        $('#container').load(urlRight + " #container"); 
        event.preventDefault(); 
        }); 
});   */


J'ai donc mis le callback en commentaire car il est désormais inutile!
Voila merci quand même a ceux qui ont peut-être étudié le problème!
Sujet clos
Aller à