Modifier le paramètre d'une fonction appelé par onclick dans un layer

jfmaze Messages postés 13 Date d'inscription mercredi 21 janvier 2004 Statut Membre Dernière intervention 16 juin 2006 - 1 août 2005 à 13:22
jfmaze Messages postés 13 Date d'inscription mercredi 21 janvier 2004 Statut Membre Dernière intervention 16 juin 2006 - 2 août 2005 à 16:39
J'ai un layer dont le cellules peuvent évoluer en valeur et aussi sur le paramètre de la fonction qui est appelée.
- lors de la création du layer le onclick fonctionne bien
- lorsque que je modifie les valeurs des cellules, il n'y a pas de problème, mais lorsque je modifie l'attribut onclick pour changer la valeur du paramètre à passer à la fonction (recup), alors les cellules ne click plus:

Voici un petit exemple de mon problème:

<html>


<head>


<style>


#csscontrole { HEIGHT: 105px; LEFT: 200px; BORDER: #000000 thin solid; POSITION: absolute; TOP: 20px; VISIBILITY: hidden; WIDTH: 20px; Z-INDEX: 1;}


</style>


<script language="JavaScript">


oTop=16;


oLeft=30;


var controle = new Controle();


function Controle() {


//alert("toto");


}


Controle.calculer = function() {


// fabrication du controle


html = "
";


html += "\";

html += \"----
A, \";

html += \"----
B, \";

html += \"</td>\";

html += \"----
C, \";

html += \"----
D, \";

html += \"</td>\";

html += \"----
";

html += ", \";

html += "

";


document.write(html);


document.all.csscontrole.style.visibility='hidden';


}


Controle.maj = function() {


// racine est le noeud TBODY dont les lignes du tableau sont les childNodes


var racine = document.getElementById("tidcontrole").lastChild;


var iligne = 0;


var ligne = racine.childNodes[iligne];


var cell = ligne.firstChild;


// modification des cellules


cell = ligne.childNodes[0];


var ch_var_long = "recup("E");";


cell.firstChild.nodeValue = "E";


//alert(cell.attributes["onclick"].nodeValue);


cell.removeAttribute("onclick");


//cell.attributes["onclick"].nodeValue = ch_var_long;


//cell.setAttribute("onClick", ch_var_long);


cell.onclick = ch_var_long;


//alert(cell.attributes["onclick"].nodeValue);


var iligne = 1;


var ligne = racine.childNodes[iligne];


var cell = ligne.firstChild;


cell = ligne.childNodes[0];


var ch_var_long = "recup("F");";


cell.firstChild.nodeValue = "F";


//alert(cell.attributes["onclick"].nodeValue);


cell.removeAttribute("onclick");


//cell.attributes["onclick"].nodeValue = ch_var_long;


//cell.setAttribute("onClick", ch_var_long);


cell.onclick = ch_var_long;


//alert(cell.attributes["onclick"].nodeValue);


var iligne = 2;


var ligne = racine.childNodes[iligne];


var cell = ligne.firstChild;


cell = ligne.childNodes[0];


var ch_var_long = "recup("G");";


cell.firstChild.nodeValue = "G";


//alert(cell.attributes["onclick"].nodeValue);


cell.removeAttribute("onclick");


//cell.attributes["onclick"].nodeValue = ch_var_long;


//cell.setAttribute("onClick", ch_var_long);


cell.onclick = ch_var_long;


//alert(cell.attributes["onclick"].nodeValue);


var iligne = 3;


var ligne = racine.childNodes[iligne];


var cell = ligne.firstChild;


cell = ligne.childNodes[0];


var ch_var_long = "recup("H");";


cell.firstChild.nodeValue = "H";


//alert(cell.attributes["onclick"].nodeValue);


cell.removeAttribute("onclick");


//cell.attributes["onclick"].nodeValue = ch_var_long;


//cell.setAttribute("onClick", ch_var_long);


cell.onclick = ch_var_long;


//alert(cell.attributes["onclick"].nodeValue);


}


function valid(nTop,nLeft,nHaut,nLarg)


{


//alert(document.all.controle.style.visibility);


var nTop=eval(nTop + nHaut + oTop + document.all.tdcontrole.offsetTop);


var nLeft=eval(nLeft + oLeft + document.all.tdcontrole.offsetLeft - document.all.tdcontrole.offsetWidth + nLarg);


document.all.csscontrole.style.pixelTop=nTop;


document.all.csscontrole.style.pixelLeft=nLeft;


document.all.csscontrole.style.visibility='visible';


}


function recup(MaValeur)


{


document.form1.idcontrole.value=MaValeur;


Controle.maj();


document.all.csscontrole.style.visibility='hidden';


}


</script>


</head>




<script language="JavaScript">


Controle.calculer();</script>


<form method=\"POST\" name=\"form1\" action=\"/Asp/test/Test.asp\">

----
Ouvir le contrôle,

, </form>




</html>

Merci pour votre aide

4 réponses

GhislainLavoie Messages postés 289 Date d'inscription vendredi 11 mars 2005 Statut Membre Dernière intervention 3 avril 2008 3
1 août 2005 à 20:43
Salut!

Je te propose d'utiliser l'évenement pour récuperer la valeur de la cellule.

Exemple :


<html>
<head>
<style>
#csscontrole { HEIGHT: 105px; LEFT: 200px; BORDER: #000000 thin solid; POSITION: absolute; TOP: 20px; VISIBILITY: hidden; WIDTH: 20px; Z-INDEX: 1;}
</style>

<script language= "JavaScript">
oTop=16;
oLeft=30;

var controle = new Controle();

function Controle() {

//alert("toto");

}

Controle.calculer = function() {

// fabrication du controle

html = "
";
html += "\";
html += \"----
;
html += " onclick='recup(event);' align='center' style='cursor: hand;'> A, \";
html += \"----
;
html += " onclick='recup(event);' align='center' style='cursor: hand;'> B, \";
html += \"</td>\";
html += \"----
;
html += " onclick='recup(event);' align='center' style='cursor: hand;'> C, \";
html += \"----
;
html += " onclick='recup(event);' align='center' style='cursor: hand;'> D, \";
html += \"</td>\";
html += \"----
";
html += ", \";
html += "

";

document.write(html);

document.all.csscontrole.style.visibility='hidden';

}

Controle.maj = function() {

// racine est le noeud TBODY dont les lignes du tableau sont les childNodes

var racine = document.getElementById("tidcontrole").lastChild;

// modification des cellules
var iligne = 0;
var ligne = racine.childNodes[iligne];
var cell = ligne.firstChild;
cell.firstChild.nodeValue = "E";
cell.onclick = recup;

var iligne = 1;
var ligne = racine.childNodes[iligne];
var cell = ligne.firstChild;
cell.nodeValue = "F";
cell.onclick = recup;

var iligne = 2;
var ligne = racine.childNodes[iligne];
var cell = ligne.firstChild;
cell.nodeValue = "G";
cell.onclick = recup;

var iligne = 3;
var ligne = racine.childNodes[iligne];
var cell = ligne.firstChild;
cell.firstChild.nodeValue = "H";
cell.onclick = recup;

}

function valid(nTop,nLeft,nHaut,nLarg)

{

//alert(document.all.controle.style.visibility);

var nTop =eval(nTop + nHaut + oTop + document.all.tdcontrole.offsetTop);

var nLeft= eval(nLeft + oLeft + document.all.tdcontrole.offsetLeft - document.all.tdcontrole.offsetWidth + nLarg);

document.all.csscontrole.style.pixelTop=nTop;

document.all.csscontrole.style.pixelLeft=nLeft;

document.all.csscontrole.style.visibility='visible';

}

function recup(ev)
{
MaCellule =ev&& ev.target?ev.target:event.srcElement;
MaValeur = MaCellule.firstChild.nodeValue;
document.form1.idcontrole.value=MaValeur;

Controle.maj();

document.all.csscontrole.style.visibility='hidden';

}

</script>

</head>

<script language ="JavaScript">

Controle.calculer();</script>

width=\"250\" class=\"table1\">

<form method=\"POST\" name=\"form1\" action=\"/Asp/test/Test.asp\">

----
width="50%">Ouvir le contrôle,

width="50%" id=tdcontrole>

, </form>

</html>

A+, Ghislain
0
jfmaze Messages postés 13 Date d'inscription mercredi 21 janvier 2004 Statut Membre Dernière intervention 16 juin 2006
2 août 2005 à 10:20
Bonjour et merci de ta réponse.
Je ne comprends pas bien le fonctionnement de ta solution. Je n'ai jamais utilisé event et target; je vais regarder dans les doc. Est-ce que celà peut me permettre de récupérer dans la fonction récup une valeur qui serait différente de celle qui est affichée dans le TD, et dont le calcul (fait dans la fonction maj) fait qu'il se peut qu'il n'y ait pas de relation.
Effectivement dans le script de test j'ai repris des valeurs identiques, mais dans mon appli elles sont toujours différentes, et je pensais pouvoir éviter de refaire le calcul lors de la récupération de la valeur clickée.
J'avais aussi une autre solution qui était de gérer un tableau caché des valeurs avec le même indice que le tableau affiché?
Qu'en penses-tu.
Je ne suis pas sûr d'avoir été très clair

A+,
Jean-François
0
GhislainLavoie Messages postés 289 Date d'inscription vendredi 11 mars 2005 Statut Membre Dernière intervention 3 avril 2008 3
2 août 2005 à 16:10
Salut!

Avec un setAttribute et getAttribute, tu devrais trouver ton compte.

A+, Ghislain


<html>
<head>

<style>
#
csscontrole
{
HEIGHT:
105px;
LEFT:
200px;
BORDER:
#000000
thin
solid;
POSITION:
absolute;
TOP:
20px;
VISIBILITY:
hidden;
WIDTH:
20px;
Z-
INDEX:
1;}

</style>

<script language= "JavaScript">
oTop
=16;
oLeft
=30;

var controle
=
new Controle
();

function Controle
()
{

//alert("toto");

}

Controle
.calculer
=
function()
{

// fabrication du controle

html
=
"
";
html
+=
"\";
html
+=
\"----
;
html +=
" onclick='recup(event);' align='center' style='cursor: hand;' value='AAA'> A, \";
html
+=
\"----
;
html +=
" onclick='recup(event);' align='center' style='cursor: hand;' value='BBB'> B, \";
html
+=
\"</td>\";
html
+=
\"----
;
html +=
" onclick='recup(event);' align='center' style='cursor: hand;' value='CCC'> C, \";
html
+=
\"----
;
html +=
" onclick='recup(event);' align='center' style='cursor: hand;' value='DDD'> D, \";
html
+=
\"</td>\";
html
+=
\"----
";
html
+=
", \";
html
+=
"

";

document
.write
(html
);

document
.all
.csscontrole
.style
.visibility
='hidden';

}

Controle
.maj
=
function()
{

// racine est le noeud TBODY dont les lignes du tableau sont les childNodes

var racine
= document
.getElementById
("tidcontrole").lastChild;

// modification des cellules

var iligne
=
0;

var ligne
= racine
.childNodes
[iligne
];

var cell
= ligne
.firstChild;
cell
.setAttribute
("value","EEE");
cell
.firstChild
.nodeValue
=
"E";
cell
.onclick
= recup;

var iligne
=
1;

var ligne
= racine
.childNodes
[iligne
];

var cell
= ligne
.firstChild;
cell
.setAttribute
("value","FFF");
cell
.firstChild
.nodeValue
=
"F";
cell
.onclick
= recup;

var iligne
=
2;

var ligne
= racine
.childNodes
[iligne
];

var cell
= ligne
.firstChild;
cell
.setAttribute
("value","GGG");
cell
.firstChild
.nodeValue
=
"G";
cell
.onclick
= recup;

var iligne
=
3;

var ligne
= racine
.childNodes
[iligne
];

var cell
= ligne
.firstChild;
cell
.setAttribute
("value","HHH");
cell
.firstChild
.nodeValue
=
"H";
cell
.onclick
= recup;

}

function valid
(nTop
,nLeft
,nHaut
,nLarg
)

{

//alert(document.all.controle.style.visibility);

var nTop
=eval
(nTop
+ nHaut
+ oTop
+ document
.all
.tdcontrole
.offsetTop
);

var nLeft
= eval
(nLeft
+ oLeft
+ document
.all
.tdcontrole
.offsetLeft
- document
.all
.tdcontrole
.offsetWidth
+ nLarg
);

document
.all
.csscontrole
.style
.pixelTop
=nTop;

document
.all
.csscontrole
.style
.pixelLeft
=nLeft;

document
.all
.csscontrole
.style
.visibility
='visible';

}

function recup
(ev
)

{
MaCellule
=ev
&& ev
.target?ev
.target
:event
.srcElement;
alert
(MaCellule
.getAttribute
("value"));
MaValeur
= MaCellule
.firstChild
.nodeValue;
document
.form1
.idcontrole
.value
=MaValeur;

Controle
.maj
();

document
.all
.csscontrole
.style
.visibility
='hidden';

}

</script>

</head>

<script language ="JavaScript">

Controle
.calculer
();
</script>

width=
\"250\"
class=
\"table1\">

<form method=
\"POST\" name=
\"form1\" action=
\"/Asp/test/Test.asp\">

----
width=
"50%">Ouvir le contrôle
,

width=
"50%"
id=
tdcontrole>

, </form>

</html>
0
jfmaze Messages postés 13 Date d'inscription mercredi 21 janvier 2004 Statut Membre Dernière intervention 16 juin 2006
2 août 2005 à 16:39
Salut Ghislain,
C'est exactement çà que je cherchais.
Je te remercie beaucoup
A+
0
Rejoignez-nous