[Resolu][JQuery]Ordre d'execution des actions

Bonjour à tous,

j'utilise JQuery(ajax) pour gérer l'affichage de tableaux d'informations au parcours des champs d'un formulaire. Au focus, j'affiche le tableau, au blur, j'affiche une page vide.

$("input#Types_clients_id").focus(function(){
	jQuery.ajax({
		url:"/cdl/Fichier/infotypesclients",
		success:function(msg){
			$("div#aide").html(msg);
		}
	});
});
$("input#Types_clients_id").blur(function(){
	jQuery.ajax({
		url:"/cdl/Index/vide",
		success:function(msg){
			$("div#aide").html(msg);
		}
	});
});

Mon soucis est que lorsque que je passe d'un champ à un autre, j'ai (théoriquement) mon tableau du champ courant d'afficher, puis la page vide, puis le tableau du champ suivant.

Or, il arrive que cet ordre ne soit pas respecté et que j'ai mon tableau du champ courant d'afficher, puis le tableau du champ suivant, puis la page vide (donc pas le tableau souhaité d'afficher).

Est-il possible possible de gérer l'ordre d'execution des action JQuery(ajax)?
Modifié par matdev (05 Jun 2009 - 11:01)

Pourquoi faire simple quand on peut faire compliqué ... ben parce que simple ça marche lol

Merci masseuro

En fait je reviens sur mes pas, certes cela règle le problème d'ordre d'affichage mais m'en créer un nouveau.

quand je suis sur le champ un tableau de choix s'affiche et quand je clique sur un de ces champs la valeur est insérer dans le champ et le tableau reste visible.

Mais avec la solution de masseuro, quand je clique sur une ligne du tableau, il disparait et la valeur de la ligne n'est pas placée dans le champ.

Je suis toujours sur mon petit problème avec jquery. J'ai une petite astuce mais qui à aussi son défaut donc si quelqu'un voit une solution je suis preneur.

Donc pour rappel:
quand je suis sur un champ de mon formulaire, un tableau de choix s'affiche et quand je clique sur un de ces choix la valeur est insérée dans le champ et le tableau reste visible. Lorsque je quitte le champ, le tableau disparé.

Voici mon code pour l'affichage des tableau et leur retrait

$("input#Types_clients_id").focus(function(){
	jQuery.ajax({
		url:"/cdl/Fichier/infotypesclients",		
                success:function(msg){
			$("div#aide").html(msg);
		}
	});
});
$("input#Types_clients_id").blur(function(){
	$(this).delay(1000,function(){
		$("div#aide").html("");
	});
});
$("input#Formes_juridiques_id").focus(function(){
	jQuery.ajax({
		url:"/cdl/Fichier/infoformesjuridiques",
		success:function(msg){
			$("div#aide").html(msg);
		}
	});
});
$("input#Formes_juridiques_id").blur(function(){
	$(this).delay(1000,function(){
		$("div#aide").html("");
	});
});

Voici mon code pour l'insertion des valeurs du tableau dans mes champs

var champ=null;
function setCaretToEnd (input) {
	setSelectionRange(input, input.value.length, input.value.length);
}
function champsur(obj){
	champ=obj;
}
function choisi(val){
	champ.value=val;
	champ.focus();
	setCaretToEnd(champ);
}

J'ai mis en place une temporisation car lorsque je clique sur un choix d'un tableau, je perd le focus et le tebleau disparaissé avant d'insérer le choix dans le champ.

La tempo me permet maintenant de bien insérer mon choix dans le champ mais lorsque je passe d'un champ à un autre mon nouveau tableau s'affiche puis disparait à cause de la tempo de fermeture du tableau précédannt.

Serait-il possible lorsque je me positionne sur un nouveau champ d'interrompre la temporisation et l'action de fermeture du blur du champ précédant ?
Modifié par matdev (05 Jun 2009 - 10:05)

La réponse était sous mon nez, il suffisait de définir également une temporisation pour l'ouverture des tableaux légérement supérieur à celle des fermetures.

C'est peut être un peu lourd en code mais au moins je sai qu'elles action s'execute dans quel ordre.

Voici la source pour un champ

$("input#Types_clients_id").focus(function(){
	$(this).delay(125,function(){
		jQuery.ajax({
			url:"/cdl/Fichier/infotypesclients",
			success:function(msg){
				$("div#aide").html(msg);
			}
		});
	});
});
$("input#Types_clients_id").blur(function(){
	$(this).delay(100,function(){
		$("div#aide").html("");
	});
});