Discussion :

[tazamorte]

Bonjour

J'ai le problème suivant j'ai crée un composant javascript sous firefox car il était plus facile de débugger une fois fini je m'apercois qu'il marche tres bien sous firefox mais rien sous ie et pas de message d'erreur a signalé et je suis perdu c'est pourquoi je sollicite votre aide voici le code du composant

//---------------------------
//DESCRIPTION DU COMPOSANT:
//---------------------------
//Ce composant permet de gérer une liste de filtre un select selectionnnant
// le type de filtre et un composant filtre permettant de gérer le filtre
//Pour un filtre donnée les données sont stockés dans une liste
//l'ajout de ces données de filtre se fait soit par un select une combo pour une aide à la saisie
//ou par une zone de text selon option choisi au départ.
//La gestion des types de filtre se fait par le biais d'une liste de filtre après chaque selection
//un nouveau select apparait avec son filtre associé proposant les types de filtre non sélectionnés
//auparavant.


//--------------------------
//INCLUSION DE FICHIER
//--------------------------
//le composant requiert le fichier javascript aide_saisi.js pour le composant combobox
//le composant requiert le fichier javascript Filtre.js pour le composant Filtre

//--------------------------
//FONCTIONS DU COMPOSANT
//--------------------------
//Display : Fonction de lancement du composant en affichant le 1er select et son filtre associé
//Action : Fonction permettant de gérer sur le onchange les créations et desctructions des selects et filtres associés
//NewFiltre : Fonction permettant de créer un nouveau filtre
//NewSelect : Fonction permettant de créer un nouveau select
//SupprSelect : Fonction permettant de supprimer un select
//SupprFiltre : Fonction permettant de supprimer un filtre
//ResetDonneeSelect : Fonction permettant de supprimer les listes de gestion des selects
//MAJDonneesRestante : Fonction permettant de supprimer la valeur passé en param dans le tableau des données restantes
//AddDonneeSelect : Fonction permettant d'ajouter des données aux listes gérant les selects
//AddDonneeFiltre : Fonction permettant d'ajouter des données à la combo du filtre passé en params
//Afficher_Select : Fonction permettant d'afficher le select ayant le num passé en params
//Masquer_Select : Fonction permettant de masquer le select ayant le num passé en params
//Afficher_Filtre : Fonction permettant d'afficher le filtre ayant le num passé en params
//Masquer_Filtre : Fonction permettant de masquer le filtre ayant le num passé en params
//SetDimensionSelect : Fonction permettant de faire un autosize en fonction de la longueur


//Constructeur
function GroupeFiltre(div)
{
//pour la gestion des données du regroupement avec les selects
this.Donnees = new Array();
this.Donnees_restante = new Array();

//zone de reception du composant avec gestion du string ou du composant
if(typeof(div) == "string"){this.divEmplacement = document.getElementById(div);}
else{this.divEmplacement = div;}

//permet de sauver la taille maximun que le mot le plus long de liste donnée peut atteindre
this.maxlength = 0;
//gestion avec une ligne vide
this.option_vide=1;

//tableaux pour la gestion dynamique des composants
this.TabSelect = new Array();
this.TabFiltre = new Array();
this.TabType = new Array();//tableau contenant le code du select et le type associé

//Table de mise en forme
this.Table;
this.TabTr = new Array();
this.TabTd = new Array();

this.Debut=1;

if(typeof(div) == "string"){this.id = div+"_GF";}

//Type du composant
this.type="GroupeFiltre";
}

//Lance le premier select ET FILTRE
GroupeFiltre.prototype.Display = function()
{
var TrCourant;

//création de la table pour mettre en forme
this.Table = document.createElement("TABLE");
this.divEmplacement.appendChild(this.Table);

//création de 1ere ligne
TrCourant = document.createElement("TR");
this.TabTr[this.TabTr.length] = TrCourant;
this.Table.appendChild( TrCourant);

//création de la 2eme ligne
TrCourant = document.createElement("TR");
this.TabTr[this.TabTr.length] = TrCourant;
this.Table.appendChild( TrCourant);

//genere le 1er select et filtre
var nvselect;
var nvfiltre;

nvselect=this.NewSelect(this.TabSelect.length +1);
nvfiltre=this.NewFiltre(this.TabFiltre.length +1);

//mise a jour de la tab des select et des filtres
this.TabSelect[this.TabSelect.length] = nvselect;
this.TabFiltre[this.TabFiltre.length] = nvfiltre;

this.SetDimensionSelect();
}

//Permet d'ajouter des données
GroupeFiltre.prototype.AddDonneeSelect = function(valeur,code,typef)
{
this.Donnees_restante [this.Donnees.length] = new Array(valeur, code?code:valeur);
this.Donnees [this.Donnees.length] = new Array(valeur, code?code:valeur);

this.TabType[this.TabType.length] = new Array(code,String(typef));

//différente verif avant mettre a jour la taille des selects
if(valeur.length > 0)
{
nb_maj = (valeur.match(new RegExp("[A-Z][a-z][0-9]", "g")));
nb_maj = nb_maj ? nb_maj.length : 0;
nb_min = valeur.length - nb_maj;
taille = nb_maj * 10 + nb_min * 6;

//mise a jour de la taille du champ
if(taille > this.maxlength)
{
this.maxlength = taille;
this.SetDimensionSelect();
}
}
}

//Fonction permettant de créer le nouveau filtre et de le retourner
GroupeFiltre.prototype.NewFiltre = function(niveau)
{
var newfiltre;
//mise en forme
//recup du tr
var TrCourant = this.TabTr[1];
var TdCourant;
TdCourant = document.createElement("TD");
TdCourant.name=niveau+"filtre";

//mise a jour de la table des td
this.TabTd[this.TabTd.length] = TdCourant;
TrCourant.appendChild(TdCourant);

//mise a jour des filtres
newfiltre = new Filtre(TdCourant,this.TabType[niveau-1]);
newfiltre.Display();

return newfiltre;
}

//Fonction permettant de créer le nouveau select et de le retourner
GroupeFiltre.prototype.NewSelect = function(niveau)
{
var my_obj = this;
var nwselect = document.createElement("select");
//ajout de ActionBoutonSearch pour répondre au besoin de l'export
nwselect.onchange=function(event){eval(my_obj).Action(event, niveau);if(my_obj.TabFiltre[niveau-1].typesaisie!="TEXT")ActionBoutonSearch(my_obj.TabFiltre,my_obj.GetListSelectValue(),my_obj.Donnees.length);};

//recup de la ligne
var TrCourant = this.TabTr[0];

//création de la cellule
var TdCourant;
TdCourant = document.createElement("TD");
TdCourant.name=niveau+"select";

//mise a jour du tableau des cellules
this.TabTd[this.TabTd.length] = TdCourant;

//gestion des noeuds
TrCourant.appendChild(TdCourant);

//on met le select dans la cellule
TdCourant.appendChild(nwselect);

//création de l'option du select vide
//a virer si on ne fait pas une gestion avec une ligne vide
if(this.option_vide==1)
{
var cellulevide;
cellulevide = document.createElement("option");
cellulevide.innerHTML = "";
cellulevide.value = "";
nwselect.appendChild(cellulevide);
}

//boucle permettant de créer les options du select avec les valeurs du tableau des données restantes
for (var i = 0; i < this.Donnees_restante.length; i++)
{
var cellule;
cellule = document.createElement("option");
cellule.innerHTML = this.Donnees_restante[i][0];
cellule.value = this.Donnees_restante[i][1];
nwselect.appendChild(cellule);
}


//mis a jour des dimensions
this.SetDimensionSelect();
//retourne le select créer
return nwselect;
}


//Fonction permettant de gérer sur le onchange les créations et desctructions des selects
GroupeFiltre.prototype.Action = function(ev, num_select)
{
var objet;

//recup de l'objet en cours
if(!ev){objet = window.event.srcElement;}
else{objet=ev.target;}

if (document.all)
{
this.value = objet.options[objet.selectedIndex].value;
}
else
{
//init
var valeur=objet.value;
var nvselect;
var nvfiltre;

if(this.TabSelect.length > num_select)
{
//suppression des selects qui se trouve au dela du select selectionné
this.SupprSelect(num_select);
//suppression des filtres qui se trouve au dela du select selectionné
this.SupprFiltre(num_select);

//empeche la création d'un option vide apres les suppressions
this.option_vide=0;

//recupere le selectcourant dans le tableau ds select
var selectcourant;
selectcourant=this.TabSelect[num_select-1];
//recupere les options du select courant
var tab_temp= new Array();
for(var i=0;i<selectcourant.options.length;i++)
{
tab_temp[i]= new Array(selectcourant.options[i].text,selectcourant.options[i].value);
}
//mise a jour du tableau des données restantes par les options du select courant
this.Donnees_restante=tab_temp;

//afin de pouvoir avoir qu'un select apres une suppression sinon on ajoute un nouveau select
//if(num_select>1)
this.Action(ev,num_select);
}
else
{
//si la nombre de select est inférieur aux nombres de données à exploiter
//on crée un nouveau select contenant la liste du selectcourant moins sa valeur selectionné
if( this.TabSelect.length < this.Donnees.length)
{
//mise a jour des données restantes
this.MAJDonneesRestante(valeur);
var typef=this.GetType(valeur);
filtrecur=this.TabFiltre[this.TabFiltre.length-1] ;
filtrecur.ChangeType(typef);
//création du select
nvselect=this.NewSelect(this.TabSelect.length + 1);
//création du filtre
nvfiltre=this.NewFiltre(this.TabFiltre.length + 1);

//on le rajoute au tableau des selects
this.TabSelect[this.TabSelect.length] = nvselect;

//on le rajoute au tableau des filtres
this.TabFiltre[this.TabFiltre.length] = nvfiltre;
}
}
}
}
// Fonction permettant de récuperer le type du filtre
GroupeFiltre.prototype.GetType= function (valeur)
{
for (var i = 0; i < this.TabType.length; i++)
{
if(this.TabType[i][0]==valeur)
return this.TabType[i][1];
}
return 0;
}
// Fonction permettant de récuperer un tableau ou la première valeur sera la valeur du select et es suivantes
//Les valeurs de la liste du filtre pour un nivo passé en params
GroupeFiltre.prototype.GetNiveau= function (nivo)
{
var TabNivo = new Array();
for (var i = 0; i < this.TabSelect.length; i++)
{
if(i==nivo)
{
TabNivo[TabNivo.length]=this.TabSelect[i].value;
TabNivo[TabNivo.length]=this.TabFiltre[i].GetListeValue();
}
}
return TabNivo;
}
//Fonction permettant de récupérer la liste ordonnée des valeurs des selects
GroupeFiltre.prototype.GetListSelectValue = function()
{
var Tab=new Array();
for (var i=0; i < this.TabSelect.length;i++)
{
if(this.TabSelect[i].value!="")
Tab[Tab.length]=this.TabSelect[i].value;
}
return Tab;
}

//Fonction permettant de supprimer les select au delà du select passé en params par son num
GroupeFiltre.prototype.SupprSelect = function(num)
{
//recup de la cellule
var TdCourant;
//recup de la ligne
var TrCourant = this.TabTr[0];

for(var i=this.TabSelect.length-1; i>num-1; i--)
{
//recup de la cellule select dans le tableau des td
//l'indice est i(nb de select restant * 2 car il y a aussi les filtres dans le tableau des cellules)
TdCourant=this.TabTd[i*2];

//on enleve le select courant dans la cellule
TdCourant.removeChild(this.TabSelect[i]);

//suppression dans le tab des selects
this.TabSelect.splice(i,1);

//on enleve la cellule de ligne
TrCourant.removeChild(TdCourant);

//suppression dans le tab des td
this.TabTd.splice(i*2,1);
}
}

//Fonction permettant de supprimer les select au delà du select passé en params par son num
GroupeFiltre.prototype.SupprFiltre = function(num)
{
//recup de la cellulle
var TdCourant;
//recup de la ligne
var TrCourant = this.TabTr[1];
//mise a jour de la table des td
for(var i=this.TabFiltre.length-1; i>num-1; i--)
{
//recup de la cellule filtre dans le tableau des td
//l'indice est i(nb de filtre restant + num(nombre de select restant dans le tab des td)
TdCourant=this.TabTd[i+num];

//destruction du filtre
this.TabFiltre[i].Remove();

//suppression dans le tab des filtres
this.TabFiltre.splice(i,1);

//on enleve la cellule de ligne
TrCourant.removeChild(TdCourant);

//suppression dans le tab des td
this.TabTd.splice(i+num,1);
}

}

//Fonction permettant de supprimer la valeur passé en param dans le tableau des données restantes
GroupeFiltre.prototype.MAJDonneesRestante = function(valeur)
{
var tab_temp= new Array();
for (var i=0; i<this.Donnees_restante.length; i++)
{
if (this.Donnees_restante[i][1] != valeur)
{
tab_temp[tab_temp.length] = this.Donnees_restante[i];
}
}
this.Donnees_restante=tab_temp;
}


//Permet d'ajouter des données
GroupeFiltre.prototype.AddDonneeFiltre = function(num,valeur,code)
{
this.Donnees_restante [this.Donnees.length] = new Array(valeur, code?code:valeur);
this.Donnees [this.Donnees.length] = new Array(valeur, code?code:valeur);

//différente verif avant mettre a jour la taille des selects
if(valeur.length > 0)
{
nb_maj = (valeur.match(new RegExp("[A-Z][a-z][0-9]", "g")));
nb_maj = nb_maj ? nb_maj.length : 0;
nb_min = valeur.length - nb_maj;
taille = nb_maj * 10 + nb_min * 6;

//mise a jour de la taille du champ
if(taille > this.maxlength)
{
this.maxlength = taille;
this.SetDimensionSelect();
}
}
}


//Fonction permettant supprimer les tableaux des donnees
GroupeFiltre.prototype.ResetDonneeSelect = function ()
{
var tab_temp=new Array();
this.Donnees_restante=tab_temp;
this.Donnees =tab_temp;
}

//Fonction permettant de rendre visible le select passé en param par son numéro
GroupeFiltre.prototype.Afficher_Select = function(num)
{
var selectcourant=this.TabSelect[num];
selectcourant.style.visibility = "visible";
}
//Fonction permettant de rendre non visible le select passé en param par son numéro
GroupeFiltre.prototype.Masquer_Select = function(num)
{
var selectcourant=this.TabSelect[num];
selectcourant.style.visibility = "hidden";
}

//Fonction permettant de rendre visible le select passé en param par son numéro
GroupeFiltre.prototype.Afficher_Filtre = function(num)
{
var filtrecourant=this.TabFiltre[num];
// filtrecourant.style.visibility = "visible";
}

//Fonction permettant de rendre non visible le select passé en param par son numéro
GroupeFiltre.prototype.Masquer_Filtre = function(num)
{
var filtrecourant=this.TabFiltre[num];
// filtrecourant.style.visibility = "hidden";
}

//Fonction permettant de rendre visible le select passé en param par son numéro
GroupeFiltre.prototype.SetDimensionSelect = function()
{
for (var i =0 ; i < this.TabSelect.length ;i++)
{
this.TabSelect[i].style.width = parseInt(this.maxlength ? this.maxlength : 30) + 40;

}
}

Merci d'avance

[FremyCompany]

Utilise un débugger (voici des exemples)
(pour IE)
- Microsoft Visual Studio Web Developper Express (gratuit)
- Microsoft Office FrontPage (payant)
- ...
(pour FF)
- FireBug
- ...

[tazamorte]

j'ai utilisé (pour FF)
- FireBug
c'est pour cela que je l'ai validé

sous ie cela ne marche pas j'ai installé debugger script for windows le deboggueur officiel pour ie mais pas de bug ou d'erreur detecté je vais essayer le Microsoft Visual Studio Web Developper Express mais je ne suis pas sur que cela explique pourquoi mon composant ne s'affiche pas

[tazamorte]

je crée un site je lance le démarrage du debug mais rien ne se passe je ne vois pas comment résoudre mon pb

[SpaceFrog]

le debbuggeur de script de microsoft te donnera la solution (cf FAQ)
ton script utilise des fonctionc uniquement reconnues par moz ff ...

[tazamorte]

j'ai regardé dans la faq je n'ai trouvé que "Comment débugger un script javascript ?" mais cela ne m'apporte aucune réponse car je n'ai pas d'erreur approprement dit dans le script

Je suis d'accord sur le fait que je dois utiliser des fonctions qui ne marche que sous firefox mais je ne sais pas lesquels pouvez vous m'aider en me disant lesquels ou du moins me donnant un lien vers un tableau des fonctions marquant sur quel navigateur elle existe et si elles ont le meme fonctionnement

[SpaceFrog]

tu auras plus vite fait de placer un alert à différents endroits de ton code pour voir où il plante ...

[tazamorte]

C'est la que ca ne marche pas.

Je peux mettre autant d'alert qe je veux ils apparaissent partout comme il faut car mon script NE PLANTE PAS j'ai un problème d'affichage

je pense que mon problème doit se situer dans ma fonction display sur les appenchild ou sur la gestion de la table

car si dans ma fonction NewSelect je fais l'appendchild sur this.divEmplacement mon select apparait ce qui montre bien que ma gestion avec une table ne doit pas marcher de la meme facon avec firefox et que ie
mais je ne sais pas pk

[SpaceFrog]

peut un problè-me d'interprétation du DOM entre IE et FFX ...
as tu inséré un NodeCleaner dans le code ... ?

[tazamorte]

non pas de NodeCleaner

Pour le code je l'ai mis en quote dans mon 1er message
si tu pouvais y jeter un coup d'oeil spécialement dans les fonctions

Display
Newselect
Newfiltre

[tazamorte]

Il semblerait que ce soit le fait d'encapsuler mes sous composants (filtre et select ) dans une table qui fout la merde sous ie sans notion de taille firefox se démerde pour afficher par contre si je lui donne une taille il ne m'affiche plus rien (toujours sans erreur) comme ie. j'ai regardé sur les msdn les propriété de table td et tr mais je ne vois de propriété d'autosize ni de remarque pouvant expliquer la chose
je nage merci de votre aide

[SpaceFrog]

utilise un css pour fixer les largeurs ... ?

[tazamorte]

Non je n'utilise pas de css dans ce cas

ce que j'ai remarqué pour firefox "this.Table" a ces attributs là:
...
offsetWidth = 106
offsetHeight = 105
scrollHeight = 105
scrollWidth = 106
clientHeight = 105
clientWidth = 106
tabIndex = -1
...
Tandis que Internet explorer :
tabIndex = 0
clientLeft = 0
clientWidth = 0
scrollHeight = 0
scrollWidth = 0
offsetHeight = 0
offsetWidth = 0

[SpaceFrog]

essaye avec computedstyle ...

[tazamorte]

Voila la réponse apres avoir pas mal galérer en fait il faut rajouter une notion intermédiaire qu'est le tbody pour faire afficher mes lignes pas besoin sous firefox mais cela ne le dérange pas

var oTBody0 = document.createElement("TBODY");
this.Table.appendChild(oTBody0);
var oTBody1 = document.createElement("TBODY");
this.Table.appendChild(oTBody1);

//création de 1ere ligne
TrCourant = document.createElement("TR");
this.TabTr[this.TabTr.length] = TrCourant;
oTBody0.appendChild(TrCourant);

//création de la 2eme ligne
TrCourant = document.createElement("TR");
this.TabTr[this.TabTr.length] = TrCourant;
oTBody1.appendChild(TrCourant);