Ex�cuter une fonction avant une autre

**islyoung2** · 21/07/2010, 09h52

Bonjour;
Je ne sais pas si j'ai bien choisi le titre pour mon probl�me ou non (merci de me diriger).
voila j'ai un formulaire qui contient deux select multiple, les deux contiennent beaucoup d'�l�ments (des milliers

) j'ai un bouton entre les deux select pour basculer les �l�ments entre les deux � travers une fonction qui est une peut couteuse en temps d'ex�cution, mais ce n'est pas sa le probl�me, mon probl�me c'est que je veux d�sactiver le bouton de validation du formulaire juste avant l'ex�cution de la fonction qui effectue le transfert d'�l�ments entre les deux select et le r�activer � nouveau apr�s que l'ex�cution de cette fonction soit terminer (puisque sont ex�cution prend de 4 � 5 sec).
en quelque sort, lorsque je clique sur le bouton qui effectue le transfert j'ex�cute ceci :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
 
fonction_desactiver_le_bouton_validation();
fonction_du_transfert() // fonction couteuse en temps d'éxecution
fonction_sactiver_le_bouton_validation();

mon probl�me c'est que malgr� mon ex�cution des trois fonction dans l'ordre mais la d�sactivation et l'activation du bouton validation ne s'effectuent qu'apr�s l'ex�cution de la fonction du transfert.
y a quelqu'un qui a une id�e comment je peux faire pour forcer l'ex�cution des trois fonction dans l'ordre que je veux???
merci

**tusssss** · 21/07/2010, 10h01

Une m�thode barbare :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
 
function fonction_du_transfert() {
 
  fonction_desactiver_le_bouton();
 
  ...code...
 
  fonction_activer_le_bouton();
}

Ceci devrait fonctionner en toute logique.

**islyoung2** · 21/07/2010, 11h08

Envoy� par tusssss

Une m�thode barbare :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
 
function fonction_du_transfert() {
 
  fonction_desactiver_le_bouton();
 
  ...code...
 
  fonction_activer_le_bouton();
}

Ceci devrait fonctionner en toute logique.

Merci pour ta r�ponse;
J'ai d�j� essayer cette m�thode mais sa ne marche pas, la desactivation et l'activation du bouton ne se fais qu'apr�s l'ex�cution du script de transfert je ne comprend pas.

**le_chomeur** · 21/07/2010, 11h19

alors le probl�me se situe ailleurs

montre nous le contenu de tes fonctions ^^

**islyoung2** · 21/07/2010, 11h26

Envoy� par le_chomeur

alors le probl�me se situe ailleurs

montre nous le contenu de tes fonctions ^^

voici mes fonctions:
1- la fonction qui d�sactive et active le bouton.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
function change_save_button(etat)
{
	if(etat == 'activate')
	{
		document.getElementById('submit_img').src 		= 'img/btn_enreg.gif';
		document.getElementById('submit_img').onclick	= "return do_post('data_selected','div');";
	}
	else if(etat == 'desactivate')
	{
		document.getElementById('submit_img').src 		= 'img/btn_enreg_desac.gif';
		document.getElementById('submit_img').onclick	= "";
	}
	//alert(document.getElementById('submit_img').onclick)
	return true;
}

2- la fonction de transfert.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
function ajouter_trier(src , dest ) 
{
	//alert('yes');
	change_save_button('desactivate');
	ajouter(src , dest);
	sortSelect (dest);
	change_save_button('activate');
}
 
function ajouter(src , dest ) {
 
    var src =  document.getElementById(src);
	var dest = document.getElementById(dest);
 
    for(i = (src.options.length-1);i >=0 ;i--)
    if(src.options[i].selected ){
    	dest.options[dest.options.length] = new Option(src.options[i].text,src.options[i].value);
    src.options[i] = null;
    }
 
	return false;
}
 
function sortSelect(selectToSort) 
{
 
	var selectToSort = document.getElementById(selectToSort);
	// copy options into an array
	var myOptions = [];
	for (var loop=0; loop<selectToSort.options.length; loop++) 
	{
		myOptions[loop] = 
		{ 
			optText:selectToSort.options[loop].text, 
			optValue:selectToSort.options[loop].value 
		};
	}
	// sort array
	myOptions.sort(sortFuncAsc);
 
	// copy sorted options from array back to select box
	selectToSort.options.length = 0;
	for (var loop=0; loop<myOptions.length; loop++) 
	{
		var optObj = document.createElement('option');
		optObj.text = myOptions[loop].optText;
		optObj.value = myOptions[loop].optValue;
		selectToSort.options.add(optObj);
	}
}

la fonction sortSelect c'est elle qui prend du temps et elle me bloque l'application pendant son ex�cution (elle fais la r�organisation des �l�ments du select par ordre alphab�tique), mais sa ne dois pas poser de probl�me si je peut seulement d�sactiver le bouton de validation avant que la fonction s'ex�cute comme sa l'utilisateur ne se trompe pas et sache qu'il ne peut pas encors valider le formulaire.

**le_chomeur** · 21/07/2010, 11h34

�trange

as tu test de faire uniquement :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

change_save_button('desactivate');

et voir si �a fonctionne ?

sinon petit truc :

stock la valeur de selectToSort.options.length dans une variable car si tu as des milliers d'�l�ments comme tu nous l'indique , tu perds �norm�ment de temps a tout recalculer

**islyoung2** · 21/07/2010, 11h41

Envoy� par le_chomeur

�trange

as tu test de faire uniquement :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

change_save_button('desactivate');

et voir si �a fonctionne ?

oui j'ai d�ja essayer sa, elle d�sactive le bouton � la fin.
merci pour ton conseil voici ma nouvelle fonction :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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
26
27
28
29
30
 
function sortSelect(selectToSort) 
{
 
	var selectToSort 	= document.getElementById(selectToSort);
	var length			= selectToSort.options.length;
	// copy options into an array
	var myOptions = [];
	for (var loop=0; loop<length; loop++) 
	{
		myOptions[loop] = 
		{ 
			optText:selectToSort.options[loop].text, 
			optValue:selectToSort.options[loop].value 
		};
	}
	// sort array
	myOptions.sort(sortFuncAsc);
	MyOption_legth = myOptions.length;
 
	// copy sorted options from array back to select box
	selectToSort.options.length = 0;
	for (var loop=0; loop<MyOption_legth; loop++) 
	{
		var optObj = document.createElement('option');
		optObj.text = myOptions[loop].optText;
		optObj.value = myOptions[loop].optValue;
		selectToSort.options.add(optObj);
	}
}

HEUUUH juste pour info mon bouton de validation en faite c'est un input type image, je ne sais pas si sa peut aider cette information ???

**le_chomeur** · 21/07/2010, 11h50

en fait un boutton image se comporte comme un bouton de type submit ,
il faut donc que tu d�sactives le submit de ton formulaire :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.getElementById(tonformulaire).onsubmit = return false;

puis pour r�activer

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.getElementById(tonformulaire).onsubmit = return true;

en faisant cela ton bouton sera cliquable , mais ne postera pas le formulaire
(si c'est bien l'effet escompt� ?? )

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
 
function ajouter_trier(src , dest ) 
{
	//alert('yes');
	change_save_button('desactivate');
	ajouter(src , dest);
	sortSelect (dest);
	change_save_button('activate');
}

va effectuer le traitement souhait�

**sekaijin** · 21/07/2010, 11h52

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
document.getElementById('submit_img').disabled=true;
... //your code
document.getElementById('submit_img').disabled=false;

**le_chomeur** · 21/07/2010, 11h58

aussi

en g�n�ral je pr�f�re d�sactiver le formulaire, car l'appuis sur la touche entr�e peut provoquer le submit

**islyoung2** · 21/07/2010, 12h00

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.getElementById(tonformulaire).onsubmit = return false;

HEUUUUUUH sa retourne une erreure de syntaxe

**le_chomeur** · 21/07/2010, 12h48

au temps pour moi

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.getElementById(tonformulaire).onsubmit = function(){return false};

**islyoung2** · 21/07/2010, 13h09

c'est toujour pareil !!!!
le bouton de se desactive pas, et si je clique sur lui avant que l'execution de la fonction ne soit terminer le formulaire se poste � la fin de l'�x�cution, je ne comprend pas ce qui se passe

**le_chomeur** · 21/07/2010, 13h21

ta m�thode est bien comme �a :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function change_save_button(etat)
{
	if(etat == 'activate')
	{
document.getElementById(tonformulaire).onsubmit = function(){return true};
		document.getElementById('submit_img').src 		= 'img/btn_enreg.gif';
		document.getElementById('submit_img').onclick	= "return do_post('data_selected','div');";
	}
	else if(etat == 'desactivate')
	{
document.getElementById(tonformulaire).onsubmit = function(){return false};
		document.getElementById('submit_img').src 		= 'img/btn_enreg_desac.gif';
		document.getElementById('submit_img').onclick	= "";
	}
	//alert(document.getElementById('submit_img').onclick)
}

si oui le probl�me vient forc�ment d'ailleurs

**islyoung2** · 21/07/2010, 13h31

Envoy� par le_chomeur

ta m�thode est bien comme �a :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function change_save_button(etat)
{
	if(etat == 'activate')
	{
document.getElementById(tonformulaire).onsubmit = function(){return true};
		document.getElementById('submit_img').src 		= 'img/btn_enreg.gif';
		document.getElementById('submit_img').onclick	= "return do_post('data_selected','div');";
	}
	else if(etat == 'desactivate')
	{
document.getElementById(tonformulaire).onsubmit = function(){return false};
		document.getElementById('submit_img').src 		= 'img/btn_enreg_desac.gif';
		document.getElementById('submit_img').onclick	= "";
	}
	//alert(document.getElementById('submit_img').onclick)
}

si oui le probl�me vient forc�ment d'ailleurs

oui ma fonction est comme sa.
et le probl�me vient dans l'ordre de l'ex�cution, si je fais une alerte apr�s l'appel de cette fonction et avant l'appel de la fonction de transfert d'�l�ments LA l'image change de source et l'alerte surgit et apr�s validation de l'alerte que le transfert d'�l�ments s'effectue, sinon c'est toujours le transfert qui vient en 1er et c'est lui qui me bloque l'application

**le_chomeur** · 21/07/2010, 13h39

si tu fais �a :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
function ajouter_trier(src , dest ) 
{
 
	change_save_button('desactivate');
alert('yes');
	ajouter(src , dest);
	sortSelect (dest);
	change_save_button('activate');
}

�a fonctionne mais si tu enl�ves l'alerte , �a ne marche plus ??

**tusssss** · 21/07/2010, 13h40

C'est pas le chargement de l'image qui prend trop de temps?

Du coup en chargeant tes images dans le page avant, �a devrait mieux fonctionner, non ?

Ou alors un onload sur ton image ?

Je lance des id�es en l'air, d�sol�.

**Watilin** · 21/07/2010, 13h48

Probl�me de reflow �a ^^

C�est quoi le reflow ? C�est une r�organisation des �l�ments visibles de la page apr�s une modification JavaScript. Le probl�me se situe au niveau du mot � apr�s ��

Parce que le navigateur est une feignasse, il va essayer de regrouper les modifications visibles pour faire le moins de reflows possibles. J�imagine que c�est ce qui se passe dans le cas pr�sent : il a un attribut src � changer deux fois, et il fait les deux en m�me temps. Et il est carr�ment gagnant car en fin de compte il n�a rien � faire�

Dans les frameworks on trouve des fonctions du genre delay ou defer. Le principe est toujours le m�me : on retarde le code JavaScript avec un setTimeout pour � laisser respirer � le navigateur. Comme il n�a pas de code � traiter, il fait les reflows en attente.

Donc � moins que je raconte des conneries depuis le d�but, ceci devrait r�soudre ton probl�me :

Code js :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
 
fonction_desactiver_le_bouton_validation();
// et là on fait une pause
window.setTimeout(function() {
	fonction_du_transfert();
	fonction_activer_le_bouton_validation();
}, 10); // t’as 10ms pour faire ton reflow, feignasse

Pour le second reflow, je connais pas le reste de ton code mais j�imagine qu�il n�y a pas besoin de refaire une pause. Sinon, tu sais comment faire�

**islyoung2** · 21/07/2010, 13h48

Envoy� par tusssss

C'est pas le chargement de l'image qui prend trop de temps?

Du coup en chargeant tes images dans le page avant, �a devrait mieux fonctionner, non ?

Ou alors un onload sur ton image ?

Je lance des id�es en l'air, d�sol�.

Merci pour votre r�ponse;
Non ce n'est pas le changement de l'image qui prend du temps du coup qui pose probl�me car j'ai fais cette approche aussi :
j'ai ajouter un champ de texte � cot� de mon submit:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
<input onclick="" id="submit_txt"  value="ACTIVATE" type="text" />

puis j'ai modifier cette fonction :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
function change_save_button(etat)
{
	if(etat == 'activate')
	{
		document.getElementById('submit_img').src 		= 'img/btn_enreg.gif';
		document.getElementById('submit_txt').value 	= 'ACTIVATE';
 
		//document.getElementById('submit_img').onclick	= "return do_post('data_selected','div');";
		//document.getElementById('submit_img').onsubmit 	= do_post('data_selected','div');
	}
	else if(etat == 'desactivate')
	{
		document.getElementById('submit_img').src 		= 'img/btn_enreg_desac.gif';
		document.getElementById('submit_txt').value 	= 'DESACTIVATE';
		//document.getElementById('submit_img').onclick	= "";
		//document.getElementById('submit_img').onsubmit 	= function(){return false};
	}
	//alert(document.getElementById('submit_img').onclick)
	return true;
}

et la fonction principal :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
 
function ajouter_trier(src , dest ) 
{
	change_save_button('desactivate');
	ajouter(src , dest);
	sortSelect (dest);
	//change_save_button('activate');
}

et c'est toujours le m�me probl�me, je dois attendre la fin de l'ex�cution de cet derni�re pour que mon champs de texte change de contenu, et le changement de contenu d'un texte sa m'�tonnerai qu'il prennent du temps surtout que je le change avant l'ex�cution de ma fonction gourmande.

**islyoung2** · 21/07/2010, 13h54

Envoy� par Watilin

Probl�me de reflow �a ^^

C�est quoi le reflow ? C�est une r�organisation des �l�ments visibles de la page apr�s une modification JavaScript. Le probl�me se situe au niveau du mot � apr�s ��

Parce que le navigateur est une feignasse, il va essayer de regrouper les modifications visibles pour faire le moins de reflows possibles. J�imagine que c�est ce qui se passe dans le cas pr�sent : il a un attribut src � changer deux fois, et il fait les deux en m�me temps. Et il est carr�ment gagnant car en fin de compte il n�a rien � faire�

Dans les frameworks on trouve des fonctions du genre delay ou defer. Le principe est toujours le m�me : on retarde le code JavaScript avec un setTimeout pour � laisser respirer � le navigateur. Comme il n�a pas de code � traiter, il fait les reflows en attente.

Donc � moins que je raconte des conneries depuis le d�but, ceci devrait r�soudre ton probl�me :

Code js :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
 
fonction_desactiver_le_bouton_validation();
// et là on fait une pause
window.setTimeout(function() {
	fonction_du_transfert();
	fonction_activer_le_bouton_validation();
}, 10); // t’as 10ms pour faire ton reflow, feignasse