Discussion :

[luunaz]

Bonjour,

Dans une page asp j'ai le checkbox suivante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<asp:CheckBox ID="ishazard" runat="server" OnCheckedChanged="ishazard_CheckedChanged" />

J'ai en dessous un fieldset comme suit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<fieldset id="panelhazard" runat="server">
  <legend>&nbsp;Al&eacute;a&nbsp;</legend>
  ...
</fieldset>

Je veux que lorsque je coche ma checkbox cela rend invisible le fieldset( propriété css visible = false) et quand je décoche il apparait, par défaut c'est en invisible.

J'ai réussis à faire quelque chose mais cela n'est pris en compte que lors de validation de la page.
Voici le code de la fonction ishazard_CheckedChanged associer a l'évenement OnCheckedChanged.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
protected void ishazard_CheckedChanged(object sender, EventArgs e)
{
  if (!((CheckBox)sender).Checked)
  {
    panelhazard.Visible = false;
  }
  else
  {
    panelhazard.Visible = true;
  }
}

Je voudrais que cela se face donc coté client et non serveur.

Pour cela j'ai tenté de faire une fonction javascript qui permet de le faire et avec:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ishazard.Attributes.Add("OnClick", "showHideHazardForm()");

J'ajoute ma fonction javascript a ma checkbox.
Dans mon code javascript j'ai voulu faire un getElementById, cela ce fonctionnait pas et en relisant la source de la page, je me suis aperçu que l'asp a changé les noms des id, il a rajouté dans le nom xxxcontentPlaceHolderxxx du au fait que ma page hérite d'une master page je suppose. Le fait est que... Je suis arrivé la et je ne sais pas quoi faire de plus à ce niveau la.

Est-ce qu'il y a un moyen de forcer l'éxécution de ma fonction ishazard_CheckedChanged cote client?
Sinon les ids générés automatiquement sont toujours les mêmes? car si je fais ma fonction javascript avec les ids recuperés de la source et qu'ils changent ensuite cela ne fonctionnera plus.

****************************

Aussi dans la continuité, j'ai deux textbox qui contiennent des nombres, et une troisième qui doit contenir le résultat d'une opération en fonction des deux premières. Je veux que l'affichage soit instantané lorsque l'on modifie l'une ou l'autre des texbox.
Je sais le faire en javascript, avec la propriété OnTextChanged de tête si je ne me trompe pas, appelé sur les deux textbox qui mettent à jour la troisième textbox.
Ma question concerne les ids des texbox qui sont générés par l'asp, puis-je faire ce que j'ai précisé au dessus avec de l'asp éxécuté coté client (ca reviendrait à ce que ce soit l'asp qui me génére le javascript, ca me semble pas super comme idée) ou bien alors comment être sûr des noms de mes ids pour pouvoir intégrer ma fonction depuis une page javascript.

Si je n'ai pas été assez clair n'hésitez pas à me poser des questions.

[Philippe Vialatte]

Salut,

Pour ton probleme, c'est a regler en javascript...

Plutot que de bidouiller les ids, le mieux est de faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('<%= panelhazard.ClientID %>')

Comme ca, tu auras le bon id a chaque fois

[luunaz]

Je ne connaissais pas le element.ClientID ^^

Par contre je suis obligé de mettre mon code javascript dans ma page asp avec ceci non ? Je ne peux pas mettre ma fonction javascript dans un fichier séparer?

[topolino]

Tu peux mettre ta fonction ds un fichier separer ayant comme paramettre le fieldset.ClientID

[Philippe Vialatte]

Ca depends de comment tu fais ta fonction js...

Si elle prends en parametre les controles, pas de pb.

Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
function triggerPanel(chkboxId, panelId){
 
  if (document.getElementById(chkboxId).checked){
      document.getElementById(panelId).style.display="none";
  }else{
      document.getElementById(panelId).style.display="visible"; 
  }  
}

Et dans ton code c# :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ishazard.Attributes.Add("OnClick", "triggerPanel('" + ishazard.ClientID + "', '" + panelhazard.ClientID + "')");

[luunaz]

Alors j'ai comme suis:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<asp:CheckBox ID="ishazard" runat="server" Checked="true" />
************
ishazard.Attributes.Add("OnClick", "showHideHazardForm('" + ishazard.ClientID + "', '" + panelhazard.ClientID + "')");
************
function showHideHazardForm(chkboxId, panelId){
    alert('appel fct'); //Pour etre sur que la fonction est bien appeler lors de mon click
    if (!document.getElementById(chkboxId).checked){
        document.getElementById(panelId).style.display="none";
    }else{
        document.getElementById(panelId).style.display="visible"; 
    }
}

Lorsque ma page se charge, ma checkbox est bien cochée.
Je clique pour la décocher, j'ai la popup je clique sur ok, rien de se passe.
Je reclique sur la checkbox, re-popup, et là le fieldset disparait et ma checkbox est donc cochée.
Après je peux cocher/décocher autant de fois que je veux plus rien ne se passe.
Il y a quelque chose qui doit m'échapper...

[luunaz]

Voila j'ai enfin réussis, après 2h de grosse prise de tête.
Déjà je me suis aperçu pour une raison inconnue pour le moment que mes fonctions javascript n'arrivait pas à récupérer les éléments de ma page si elles sont dans un fichier js séparé mais dans le corps de ma page c'est bon.
Donc pour l'instant je vais laisser comme ca, je regarderais cette partie plus tard (perdu beaucoup de temps à faire un truc très simple :p)

Voici mon code final:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
function ShowHideHazardForm(chkboxId, panelId)
{
  if (!document.getElementById(chkboxId).checked){
    document.getElementById(panelId).style.visibility="hidden";
  }else{
    document.getElementById(panelId).style.visibility="visible"; 
  }
}

Avec dans ma fonction Page_Load:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
panelhazard.Style.Add("visibility", "hidden");
ishazard.Attributes.Add("OnClick", "ShowHideHazardForm('" + ishazard.ClientID + "', '" + panelhazard.ClientID + "')");

Avec ceci mon fieldset disparait et réapparait à ma guise.
J'ai changer display pour visibility car ca ne fonctionnait pas.

Dans la foulée j'ai réussis la seconde partie de ma question originelle avec le même principe.

Un grand merci à vous deux pour les idées avec le ClientID passé en paramètre.