Appel de plusieurs fonction JS avec windows.onloadRésolu

Question

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 !

PetoleTeam · Accepted Answer

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)

cs_DARKSIDIOUS · Answer

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

cs_frlobe · Answer

Merci de ta réponse. Mais ça ne marche pas mieux, voire pire car le premier champ autocompletion ne fonctionne plus. 
Je persiste !!!

PetoleTeam · Answer

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)

cs_frlobe · Answer

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

cs_frlobe · Answer

Super, ça marche nickel !!! Merci beaucoup. Tu m'as sauvé mon WE

jdmcreator · Answer

Tu peux mettre Sujet Résolu ;)


JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
fr.jsinfo.wikia.com

Appel de plusieurs fonction JS avec windows.onload

7 réponses

Votre réponse

Discussions similaires