Appel de plusieurs fonction JS avec windows.onload [Résolu]

Messages postés
7
Date d'inscription
mardi 30 mars 2010
Dernière intervention
15 août 2010
- - Dernière réponse : jdmcreator
Messages postés
656
Date d'inscription
samedi 30 décembre 2000
Dernière intervention
20 juillet 2012
- 9 août 2010 à 17:02
Bonjour
j'ai un script d'autocompletion en JS qui fonctionne très bien. Il s'appelle de cette façon:
{body}


Et la fonction JS initiale est la suivante:
function	initMenuRightDiv()
{
completion				= document.getElementById('completionConteneur');
menuRightDiv			= document.createElement("div");
menuRightDiv.className	= 'hiddenDiv';
menuRightDiv.id			= 'menuRightHidden';
window.completion.appendChild(menuRightDiv);
}
window.onload = initMenuRightDiv; 

Sauf que je dois appeler ce script dans deux champs différents. Ca fonctionne sur le premier champs. Mais si je mets le même code d'appel sur mon 2ème champ, ça ne fonctionne pas sur ce 2ème champs.

Je pense à 2 causes mais je n'arrive à résoudre ni l'une ni l'autre ...
- soit le div pose problème (cette div gère l'affichage ou non des valeurs, fonction du texte tapé en autocompletion)
- soit le windows.onload ne peut être utilisé sur 2 champs différents.

Je vous remercie de vos idées et de votre aide pour m'aider à tordre le coup à ces 2 champs d'autocompletion !
Afficher la suite 

Votre réponse

7 réponses

Meilleure réponse
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
3
Merci
Bonjour,
...J'ai du rater quelque chose...
OUI, je ne trouve pas dans ton code la fonction initMenuDiv que tu appelles dans la fonction initMenu

ATTENTION : tu mets la même ID à 2 éléments de ton document, à ne pas faire...
concernant :
{body}

onkeyup="showValue(this);"
ça marche tel que ????? Jean doute moi aussi...

attendu que les fonctions d'initialisation ne seront pas de nouveau appelée, pas nécessaire de créer des fonctions nommées, on va les mettre directement dans une fonction anonyme sur le onload.
Cela va donner un truc du style
window.onload = function(){
  //-- Creation du 1st
  var O_Parent = document.getElementById( "completionConteneur");
  var O_Enfant = document.createElement( "div");
  O_Enfant.className = "hiddenDiv";
  O_Enfant.id = "menuRightHidden";                 // attention ID differente
  O_Enfant.innerHTML = "Creation menuRightHidden"; // pour test creation
  O_Parent.appendChild( O_Enfant);
  //-- Creation du 2nd
  O_Parent = document.getElementById( "completionConteneur1");
  O_Enfant = document.createElement( "div");
  O_Enfant.className = "hiddenDiv";
  O_Enfant.id = "menuRightHidden1";                 // attention ID differente
  O_Enfant.innerHTML = "Creation menuRightHidden1"; // pour test creation
  O_Parent.appendChild( O_Enfant);
}
tu peux passer à la trappe les fonctions initMenuRightDiv(),initMenuRightDiv1() et initMenu()

on verra après pour le reste éventuellement...
;O)

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 105 internautes nous ont dit merci ce mois-ci

Commenter la réponse de PetoleTeam
Messages postés
15838
Date d'inscription
jeudi 8 août 2002
Dernière intervention
4 mars 2013
0
Merci
Salut,

Fais une fonction qui va appeler les 2 fonctions :

function initMenu() {
initMenuRightDiv();
initMenuLeftDiv();
}
window.onload = initMenu;

______________________________________

AVANT de poster votre message, veuillez lire, comprendre, et appliquer notre réglement
Commenter la réponse de cs_DARKSIDIOUS
Messages postés
7
Date d'inscription
mardi 30 mars 2010
Dernière intervention
15 août 2010
0
Merci
Merci de ta réponse. Mais ça ne marche pas mieux, voire pire car le premier champ autocompletion ne fonctionne plus.
Je persiste !!!
Commenter la réponse de cs_frlobe
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Dernière intervention
14 janvier 2011
0
Merci
Bonjour,
Sauf que je dois appeler ce script dans deux champs différents.
il est peut être opportun de créer un fonction que tu appellera pour les 2 champs
//-------------------------------------------
function initMenuDiv( id_parent_, id_enfant_){
  var O_Parent = document.getElementById( id_parent_);
  var O_Enfant = document.createElement( "div");
  O_Enfant.className = 'hiddenDiv';
  O_Enfant = id_enfant_;
  O_Parent.appendChild( O_Enfant);
}
et de faire un appel du type de celui écrit par DARKSIDIOUS
//-----------------
function initMenu(){
  initMenuDiv( 'completionConteneur' ,'menuRightHidden');
  initMenuDiv( 'completionConteneur' ,'menuLeftHidden');
}
window.onload = initMenu;

mais sans plus d'info sur le
...Mais ça ne marche pas mieux,...
difficile de poursuivre...

;O)
Commenter la réponse de PetoleTeam
Messages postés
7
Date d'inscription
mardi 30 mars 2010
Dernière intervention
15 août 2010
0
Merci
Bonjour
je vais essayer de clarifier mon souci mais ça va être long
J'ai mon code d'autocompletion qui fonctionne sur un champ de mon formulaire:
/*
tableau des reponses necessaires à la correspondance entre la suggestion et les données
*/
suggests = new Array(
'ecole1',
'ecole2',
'ecole3'
);

/*
fonction de recalcul de l'offset top et left qui se refere à l'offsetParent pour palier au probleme de positionnement dans les tableaux
*/
function positionAbsolute(obj,mode)
{
currentValue = 0;
if (obj.offsetParent)
{
if (mode == 'top')
currentValue = obj.offsetTop;
else if (mode == 'left')
currentValue = obj.offsetLeft;
while (obj = obj.offsetParent)
if (mode == 'top')
currentValue += obj.offsetTop;
else if (mode == 'left')
currentValue += obj.offsetLeft;
}
return currentValue;
}

/*
la fonction principale qui remplit le div des differentes suggestions possibles en corrélation avec le champ input
*/
function	showValue(inside)
{
divDest						= document.getElementById('menuRightHidden');
divDest.innerHTML			= '';
valueOfElement				= '';
exist						= 0;
nbOfElement					= 0;
divDest.style.top			= positionAbsolute(inside,'top') + inside.offsetHeight;
divDest.style.left			= positionAbsolute(inside,'left');
divDest.style.width			= inside.offsetWidth - 3;

for (i = 0; i < suggests.length; i++)
{
if ((suggests[i].toLowerCase()).indexOf((inside.value).toLowerCase()) != -1 && inside.value != '') 
{
nbOfElement++;
exist					= 1;
valueOfElement			= suggests[i];
currentDiv				= document.createElement("div");
currentInner			= document.createTextNode(suggests[i]);
currentDiv.indice		= suggests[i];
currentDiv.className	= 'currentDiv';
currentDiv.onclick		= function()
{
inside.value = this.indice;
divDest.style.visibility = 'hidden';
}
currentDiv.appendChild(currentInner);
divDest.appendChild(currentDiv);
}
}
if (exist 0 || (valueOfElement.length  inside.value.length && nbOfElement == 1))
divDest.style.visibility = 'hidden'
else
divDest.style.visibility = 'visible';
}

/*initialisation de la div qui contiendra les differentes suggestions
*/
function initMenuRightDiv()
{
var completion = document.getElementById('completionConteneur');
var menuRightDiv = document.createElement("div");
menuRightDiv.className	= 'hiddenDiv';
menuRightDiv.id = 'menuRightHidden';
completion.appendChild(menuRightDiv);
}

window.onload = initMenuRightDiv();

L'appel du code JS se fait de cette façon:
{body}

onkeyup="showValue(this);"

Quand je tape "ecole", 3 choix s'affichent; si je tape "ecole1", un seul choix s'affiche. Tout est OK sur le champ ecole1.

Je cherche maintenant à mettre le même code d'autocompletion sur un 2ème champ de mon formulaire (ecole2). Mais ça ne fonctionne pas, c'est à dire que rien ne s'affiche quand je tape "ecole".

J'ai donc modifié le code de cette façon:

L'appel sur le champ "ecole1" se fait comme ça:
{body}

onkeyup="showValue(this);"

L'appel sur le champ "ecole2" se fait comme ça:
{body}

onkeyup="showValue1(this);"

J'ai donc créé 2 CSS completionConteneur et completionConteneur1, contenant la même chose.

Et le code JS est le suivant:
tableau des reponses necessaires à la correspondance entre la suggestion et les données
*/
suggests = new Array(
'ecole1',
'ecole2',
'ecole3'
);

/*
fonction de recalcul de l'offset top et left qui se refere à l'offsetParent pour palier au probleme de positionnement dans les tableaux
*/
function positionAbsolute(obj,mode)
{
currentValue = 0;
if (obj.offsetParent)
{
if (mode == 'top')
currentValue = obj.offsetTop;
else if (mode == 'left')
currentValue = obj.offsetLeft;
while (obj = obj.offsetParent)
if (mode == 'top')
currentValue += obj.offsetTop;
else if (mode == 'left')
currentValue += obj.offsetLeft;
}
return currentValue;
}

/*
la fonction principale qui remplit le div des differentes suggestions possibles en corélation avec le champ input
*/
function	showValue(inside)
{
divDest						= document.getElementById('menuRightHidden');
divDest.innerHTML			= '';
valueOfElement				= '';
exist						= 0;
nbOfElement					= 0;
divDest.style.top			= positionAbsolute(inside,'top') + inside.offsetHeight;
divDest.style.left			= positionAbsolute(inside,'left');
divDest.style.width			= inside.offsetWidth - 3;

for (i = 0; i < suggests.length; i++)
{
if ((suggests[i].toLowerCase()).indexOf((inside.value).toLowerCase()) != -1 && inside.value != '') 
{
nbOfElement++;
exist					= 1;
valueOfElement			= suggests[i];
currentDiv				= document.createElement("div");
currentInner			= document.createTextNode(suggests[i]);
currentDiv.indice		= suggests[i];
currentDiv.className	= 'currentDiv';
currentDiv.onclick		= function()
{
inside.value = this.indice;
divDest.style.visibility = 'hidden';
}
currentDiv.appendChild(currentInner);
divDest.appendChild(currentDiv);
}
}
if (exist 0 || (valueOfElement.length  inside.value.length && nbOfElement == 1))
divDest.style.visibility = 'hidden'
else
divDest.style.visibility = 'visible';
}

function	showValue1(inside)
{
divDest						= document.getElementById('menuRightHidden');
divDest.innerHTML			= '';
valueOfElement				= '';
exist						= 0;
nbOfElement					= 0;
divDest.style.top			= positionAbsolute(inside,'top') + inside.offsetHeight;
divDest.style.left			= positionAbsolute(inside,'left');
divDest.style.width			= inside.offsetWidth - 3;

for (i = 0; i < suggests.length; i++)
{
if ((suggests[i].toLowerCase()).indexOf((inside.value).toLowerCase()) != -1 && inside.value != '') 
{
nbOfElement++;
exist					= 1;
valueOfElement			= suggests[i];
currentDiv				= document.createElement("div");
currentInner			= document.createTextNode(suggests[i]);
currentDiv.indice		= suggests[i];
currentDiv.className	= 'currentDiv';
currentDiv.onclick		= function()
{
inside.value = this.indice;
divDest.style.visibility = 'hidden';
}
currentDiv.appendChild(currentInner);
divDest.appendChild(currentDiv);
}
}
if (exist 0 || (valueOfElement.length  inside.value.length && nbOfElement == 1))
divDest.style.visibility = 'hidden'
else
divDest.style.visibility = 'visible';
}

/*initialisation de la div qui contiendra les differentes suggestions
*/
function initMenuRightDiv()
{
var completion = document.getElementById('completionConteneur');
var menuRightDiv = document.createElement("div");
menuRightDiv.className	= 'hiddenDiv';
menuRightDiv.id = 'menuRightHidden';
completion.appendChild(menuRightDiv);
}
function initMenuRightDiv1()
{
var completion = document.getElementById('completionConteneur1');
var menuRightDiv = document.createElement("div");
menuRightDiv.className	= 'hiddenDiv';
menuRightDiv.id = 'menuRightHidden';
completion.appendChild(menuRightDiv);
}

function initMenu()
{
  initMenuDiv( 'completionConteneur' ,'menuRightHidden');
  initMenuDiv( 'completionConteneur' ,'menuLeftHidden');
}
window.onload = initMenu;


J'ai du rater quelque chose, c'est sur, mais quoi ? Je sèche
Commenter la réponse de cs_frlobe
Messages postés
7
Date d'inscription
mardi 30 mars 2010
Dernière intervention
15 août 2010
0
Merci
Super, ça marche nickel !!! Merci beaucoup. Tu m'as sauvé mon WE
Commenter la réponse de cs_frlobe
Messages postés
656
Date d'inscription
samedi 30 décembre 2000
Dernière intervention
20 juillet 2012
0
Merci
Tu peux mettre Sujet Résolu ;)


JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
fr.jsinfo.wikia.com
Commenter la réponse de jdmcreator

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.