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

cs_frlobe 7 Messages postés mardi 30 mars 2010Date d'inscription 15 août 2010 Dernière intervention - 4 août 2010 à 06:08 - Dernière réponse : jdmcreator 656 Messages postés samedi 30 décembre 2000Date d'inscription 20 juillet 2012 Dernière intervention
- 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
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 5 août 2010 à 10:06
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)

Merci PetoleTeam 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 101 internautes ce mois-ci

Commenter la réponse de PetoleTeam
cs_DARKSIDIOUS 15838 Messages postés jeudi 8 août 2002Date d'inscription 4 mars 2013 Dernière intervention - 4 août 2010 à 08:08
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
cs_frlobe 7 Messages postés mardi 30 mars 2010Date d'inscription 15 août 2010 Dernière intervention - 4 août 2010 à 08:24
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
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 4 août 2010 à 20:36
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
cs_frlobe 7 Messages postés mardi 30 mars 2010Date d'inscription 15 août 2010 Dernière intervention - 5 août 2010 à 05:05
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
cs_frlobe 7 Messages postés mardi 30 mars 2010Date d'inscription 15 août 2010 Dernière intervention - 8 août 2010 à 01:24
0
Merci
Super, ça marche nickel !!! Merci beaucoup. Tu m'as sauvé mon WE
Commenter la réponse de cs_frlobe
jdmcreator 656 Messages postés samedi 30 décembre 2000Date d'inscription 20 juillet 2012 Dernière intervention - 9 août 2010 à 17:02
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.