Discussion :

[LE NEINDRE]

Bonjour à tous,

J'ai du mal, dans des pages aspx à mettre du code-behind javascript.
Je voudrais, par exemple, au survol de la souris au dessus d'une image contenu dans un datalist, changer mon style.
J'ai donc fait cela:

Code :

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

1
2
3
4
5
6
7
8
 
            <ItemTemplate>
                &nbsp;<asp:Label ID="ID_PHOTOLabel" runat="server" Text='<%# Eval("ID_PHOTO") %>' Visible="false"></asp:Label><br />
                <asp:Label ID="ID_ALBUMLabel" runat="server" Text='<%# Eval("ID_ALBUM") %>' Visible="false"></asp:Label><br />
                <asp:Image ID="NAMELabel" runat="server" Text='<%# Eval("NAME") %>' Height='100px' Width ='<%# 100 %>' ImageUrl='<%# Eval("NAME") %>' ToolTip='<%# Eval("NAME") %>' onMouseOver="this.className='test';"></asp:Image><br />
                &nbsp;<asp:Label ID="TAILLELabel" runat="server" Text='<%# Eval("TAILLE") %>' Visible="false"></asp:Label><br />
                <br />
            </ItemTemplate>

avec le stle test suivant:

Code :

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

1
2
3
4
5
6
7
 
test
{
    background-color:Black;
    border:[solid][10px][#ff0000];
    cursor:crosshair;
}

Mais pas de changement !!

D'autre part, j'en profite car c'est le même sujet je pense !!
Comment récupérer l'id de l'image sélectionner, du côté client ...
un document.getElementByID() fonctionnerait bien mais je sais pas quoi mettre entre les parenthèses !!!!!! (vu que que je ne sais pas comment est générer l'id de mes images dans la datalist ...)

[guitoux1]

De mémoire mais j'en suis pas sur, je crois qu'il faut écrire :

Code :

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

onmouseover="this.style.classename='test'"

un document.getElementByID() fonctionnerait bien mais je sais pas quoi mettre entre les parenthèses !!!!!!

Faut créer ton JavaScript xôté server avec Page.RegisterClientScriptBlock et ainsi tu ausra accès au bon ID (monControle.UniqueID)

[aphykite]

Je ne connais pas le javascript côté serveur, donc côté client, je ferais :
- soit tu passes l'id en paramètre, ce qui te donne :

Code :

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

onmouseover="test('NAMELabel');"

puis

Code :

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

1
2
3
4
5
 
test(champ)
{
...
}

- soit tu utilises event

Code :

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

onmouseover="test();"

et la fonction

Code :

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

1
2
3
4
5
6
 
test()
{
      var idSrc = event.srcElement.id;				
	document.getElementById(idSrc ).checked=true;			
}

Par contre, ce code ne fonctionne que sous IE ... il existe un équivalent pour les autres navigateurs, mais je ne le connais pas.

[LE NEINDRE]

Guitoux,

J'ai fait ceci:
du côté serveur:

Code :

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

1
2
3
4
5
6
7
8
 
    public void ImageClicked()
    {
        string script="";
        script+=DataList1.UniqueID.ToString();
        Page.RegisterClientScriptBlock("ID", script);
 
    }

Et du côté client:

Code :

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

1
2
3
 
 
<asp:Image ID="NAMELabel" runat="server" Text='<%# Eval("NAME") %>' Height='100px' Width ='<%# 100 %>' ImageUrl='<%# Eval("NAME") %>' ToolTip='<%# Eval("NAME") %>' onMouseOver="alert(<%#ImageClicked() %>)"></asp:Image><br />

Mais évidemment , ça ne marche pas ...

Est-ce que l'appel du côté client est bien fait ? Je crois que cela cloche.
Sinon, du côté serveur, c'est ça ?

[guitoux1]

okok, quand je disait "JavaScript côté server" je voulais dire écrire le code de ton javascript côté server, dans une string quoi. Ce qui donnerais pour par exemple une checkbox :

Code :

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

1
2
string js = "<script type=\"text/javascript\">alert('cochée ?' + document.getElementById('" + maCheckBox.UniqueID + "').checked);</script>"
Page.RegisterClientScriptBock(js, this);

C'est de tête, ya peut-êter des petites erreurs

[LE NEINDRE]

ok,
je dois plus être très loin du résultat:

Code :

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

1
2
3
4
5
6
7
8
 
    public void ImageClicked()
    {
        string script="";
        script+="<script language='javascript'>alert('"+DataList1.UniqueID.ToString()+"')</script>";
        Page.RegisterClientScriptBlock("ID", script.ToString());
 
    }

ça je pense que c'est bon.

Mais l'appelle de la fonction côté client est fause ...

Code :

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

1
2
3
 
 
<asp:Image ID="NAMELabel" runat="server" Text='<%# Eval("NAME") %>' Height='100px' Width ='<%# 100 %>' ImageUrl='<%# Eval("NAME") %>' ToolTip='<%# Eval("NAME") %>' onMouseOver="<%# ImageClicked() %>"></asp:Image>

[guitoux1]

si c'est une fonction, faut la créer en javascript :

Code :

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

1
2
3
4
5
6
 
public void ImageClicked() 
{ 
  string script=""; script+="<script language='javascript'>function tada() {alert('"+DataList1.UniqueID.ToString()+"');}</script>"; 
Page.RegisterClientScriptBlock("ID", script.ToString()); 
}

puis dans le code client :

Code :

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

<asp:Image ID="NAMELabel" runat="server" Text='<%# Eval("NAME") %>' Height='100px' Width ='<%# 100 %>' ImageUrl='<%# Eval("NAME") %>' ToolTip='<%# Eval("NAME") %>' onMouseOver="<%# tada() %>"></asp:Image>

[LE NEINDRE]

désolé, je dois paraître long à la détente ...

côté serveur:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
     public void ImageClicked()
    {
 
        string script = ""; 
        script += "<script language='javascript'>function tada() {alert('" + DataList1.UniqueID.ToString() + "');}</script>";
        Page.RegisterClientScriptBlock("ID", script.ToString()); 
 
 
    }

je me suis permis d'appeler ImageClicked dans la fonciton OnLoad côté serveur...

côté client:

Code :

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

1
2
3
4
 
 
 
<asp:Image ID="NAMELabel" runat="server" Text='<%# Eval("NAME") %>' Height='100px' Width ='<%# 100 %>' ImageUrl='<%# Eval("NAME") %>' ToolTip='<%# Eval("NAME") %>' onMouseOver="<%# tada() %>"></asp:Image><br />

Et l'erreur:

Code :

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

1
2
3
 
 
Erreur	1	Le nom 'tada' n'existe pas dans le contexte actuel	C:\Inetpub\wwwroot\MySite\album.aspx	36

[guitoux1]

a oui pardon, me suis planté, c'est :

Code :

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

<asp:Image ID="NAMELabel" runat="server" Text='<%# Eval("NAME") %>' Height='100px' Width ='<%# 100 %>' ImageUrl='<%# Eval("NAME") %>' ToolTip='<%# Eval("NAME") %>' onMouseOver="tada()"></asp:Image><br />

ce qui est logique vu ke tada est une fonction cliente

[LE NEINDRE]

Ah ba oui, suis-je bête ...
Voilà ça marche maintenant, du moins l'appel de la fonction.

Il me reste un dernier souci...
Quand je clique sur l'image, j'appelle la fonction tada(), mais elle n'a pas l'air de me retrouner l'ID de l'item sur lequel j'ai cliqué.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
 
 
    public void ImageClicked()
    {
 
        string script = ""; 
        script += "<script language='javascript'>function tada() {alert('" + DataList1.SelectedItem.UniqueID.ToString() + "');}</script>";
        Page.RegisterClientScriptBlock("ID", script.ToString()); 
 
 
    }

Datalist1.SelectedItem.UniqueID.ToStrin() me génère une erreur ...

[guitoux1]

a bah oui c sur, ca pourra pas marcher :

La création sdu Javascript ce fait avant celle du gridview, donc il n'as pas encore de ligne sélectionnée. De plus, avec cette méthode tu ne récupère l'id que d'une ligne !!

essaie alors ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
public void ImageClicked()
    {
 
        string script = ""; 
        script += "<script language='javascript'>function tada(monID) {alert('" + DataList1.UniqueID.ToString() + "_' + monID);}</script>";
        Page.RegisterClientScriptBlock("ID", script.ToString()); 
 
 
    }

je suis pas certain de _ mais je crois que c'est ça


et dans la page aspx :

Code :

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

1
2
 
<asp:Image ID="NAMELabel" runat="server" Text='<%# Eval("NAME") %>' Height='100px' Width ='<%# 100 %>' ImageUrl='<%# Eval("NAME") %>' ToolTip='<%# Eval("NAME") %>' onMouseOver="tada(this.id)"></asp:Image><br />

Je suis pas certain du this.id, mais bon je crois que c'est ça

[LE NEINDRE]

Super !!
ça marche !! du premier coups !!!
Meric beaucoup Guitoux !

je vais maintenant m'atteler à récupérer le chemin de l'image cliquée .....

!!!

Merci encore

[LE NEINDRE]

oups j'ai peut-être crié victoire un peu trop vite

Le résultat afficher par la boite de dialogue alert() me donne:

DataList1_DataList1_ctl02_NAMELabel

or le véritable ID de la case cliquée est:

DataList1_ctl02_NAMELabel

mmmm bizarre ...

[LE NEINDRE]

Ah ba oui mais c'est mon en fait !!!

Code :

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

1
2
3
4
 
 
 
script += "<script language='javascript'>function tada(monID) {alert(monID);}</script>";

Et en fait, je dois pouvoir le faire directement ....

[guitoux1]

effectivement, c'est bizare ça. vérifie bien ton code...

[guitoux1]

et oui j'suis con moi !! effectivemen,t en faisant onmouseover="tada(this.id)" t'as directement le BON id !! putain c fou ce con peu passer à coté de truc évidents quand on regarde pas au bon endroit !!

dsl pour tout ce foutoir, la solution été si simple !!!

[LE NEINDRE]

Bah au moins, grâce à toi, j'ai vu qu'on pouvait générer du script client côté serveur avec Page.RegisterClientScriptBlock qui me servira très probablement plus tard !

Donc merci et je t'en prie ne t'excuse pas, franchement tu m'aides trop !!!