11544 sujets

JavaScript, DOM et API Web HTML5

[RESOLU] Problème appel fonction ajax sur hover - JQuery

Bonjour à tous,

Je réalise en ce moment un menu horizontal qui se déploie sur une large div où se situe les sous menu de mon site, j'aimerais que les sous menus soit générés via du javascript (JQuery + Ajax).

J'utilise pour cela la fonction .hover() de JQuery, le problème c'est que lorsque je passe la souris sur un de mes liens, mon fichier Ajax est appelé plusieurs fois, ce qui rend le script très lourd.
Voici mon bout de code javascript :

$('ul.menu_h li a.niv1').hover(function(){
	var id_menu = $(this).attr('id') ;
	if(id_menu != 0){
		$.ajax({
			type: "POST",
			data:{"id_menu": id_menu},
			url: "mon_url",
			success: function(xml){
				if($('infos',xml).find('retour').text() == "true"){
					var chaine = '' ;
					chaine += '<ul>' ;
					$('infos',xml).find('sous_cat').each(function(){
						chaine += '<li><a href="'+$(this).find('url').text()+'">'+$(this).find('nom').text()+'</a></li>' ;
					});
					chaine += '</ul>' ;
					$('div.bloc_menu_'+id_menu).append(chaine) ;
				}
			}
		});
	}
});


Le fichier appelé par la fonction Ajax va récupérer dans la base de données les sous menus du menu en question.

Comment je peux faire pour que ma fonction ajax ne soit appelé qu'une fois au survol de la souris ?

Merci de votre aide.
Modifié par Samantha66 (25 Jul 2011 - 18:14)
Bonjour,
Pourquoi ne construis-tu pas ton menu à l'affichage de ta page. et ensuite, avec les css, tu gères le survol de ton menu pour cacher et afficher ton menu déroulant?

est ce que c'est une solution que tu ne pourrais pas mettre en place?
Je vais juste préciser mes propos au cas ou je ne sois pas la pour répondre a ton prochain post.

Dans ton document.ready tu charges ton menu et plus au survol.

Dans ta page .css, tu définis le survol de ta liste pour enrouler et dérouler tes éléments de ta sous liste.

Je reste à ta dispo Smiley biggrin
Je viens de tester ta solution, ça fonctionne nickel !

J'ai d'abord créé une fonction qui va me récupérer tous mes sous-menus et sous-sous-menus et qui me génère le code HTML à placer dans mon menu :


function lancement_menu(){
	$.ajax({
		type: "POST",
		data:{},
		url: "mon_fichier",
		success: function(msg){
			var contenu = msg;
			$("#menu_h").append(contenu);
		}
	});
}


Ensuite je l'appel lors du chargement de la page :

$(document).ready(function(){
	lancement_menu();
});


Et du coup je fais mon hover juste pour l'affichage des blocs menu :


$('#menu_h ul li a').hover(function(){
		var id_cat = $(this).attr('id') ;
		
		$('#menu_h div.bloc_menu_'+id_cat).css('display','block') ;
});
$('#menu_h').mouseleave(function(){
	$('#menu_h div.bloc_sous_cat').css('display','none') ;
});



Merci pour ton aide !
Modifié par Samantha66 (25 Jul 2011 - 18:17)
Sujet clos
Aller à