Discussion :

[Lapinpanda]

Bonjour


J'ai une question concernant les ID que l'on ajoute à une page via une WebPart.

Par exemple, une WebPart avec un bouton et un texte.

En code Behind,
demander à un bouton de modifier la valeur d'un label : je sais faire.

Mais quand on utilise du JavaScript, comment fait-on?

En effet quand je veux appeler un contrôles ASP.NET par son ID, je ne le trouve pas.

J'ai regardé sur la Source HTML et j'ai remarqué que tous les ID étaient modifié.
Exemple :
ID du contrôles dans la WebPart : monID.
ID du contrôles dans le rendu HTML: ct100_m_g_e02b56af_b6a...[etc]..._monID


C'est quoi le rôle de cette modification?
Et pourquoi cela fait cela?
Peut on l'empêcher?
Comment faire alors avec une fonction JS pour appeler un contrôle par son ID si l'ID est modifié?

Merci!

[s.sougnez]

Salut,

cette modification est fait automatiquement quand ton code ASP.NET est "transformé" en HTML. En fait, pour récupérer cette valeur, il te suffit d'accéder à la propriété ClientID de ton contrôle ASP.NET une fois qu'il a été ajouté à la page.

[Lapinpanda]

Hey merci de l'info

une fonction JS qui fait :
"document.getElementByID('monID');"

Va-t-elle fonctionner alors?
Si oui, comment?

[nonoxp]

Salut Lapinpanda,

Ceci correspond-il à ce que tu cherches par hasard ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 'La fonction centrale de ce script, permet de retrouver un objet javascript
// 'via le tagName (input, select), l'identifier (optionnel, voir plus bas), 
// 'et la propriété title du champ (attention aux caractères non-ascii)
function getTagFromIdentifierAndTitle(tagName, identifier, title) {
   var len = identifier.length;
   var tags = document.getElementsByTagName(tagName);
   for (var i=0; i < tags.length; i++) {
     var tempString = tags[i].id;
     if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len)) {
       return tags[i];
     }
   }
   return null;
}

Source

[s.sougnez]

mwai, je trouve cette solution un peu bancale, sauf ton respect nonoxp. Le truc c'est que tu peux jamais être sur à 100% que tu n'auras pas un autre contrôle portant le même title. Et mettre "IDENTIFIANT#TITRE" comme Title (par exemple), ca le fait pas vu que les utilisateurs le verront.

Je pense qu'une fonction JS bien foutue permettra de bien récupérer le contrôle identifié par le ClientID.

Lapinpanda : Cela dépend de la façon dont tu génères ta fonction JavaScript. Si tu la génères dans ton code C# et que tu y fais appel dans ton code C#, alors oui, il suffit de faire passer control.ClientID en tant que paramètre de ta fonction. Sans code, c'est difficile de t'aiguiller plus habilement

[nonoxp]

J'avoue que c'est pas ce qu'il y a de plus sûr et optimisé. Cependant ça remplit parfaitement son rôle dans mon script d'auto-remplissage de formulaires d'insertion.

Evidemment si la solution peut être construite à partir du code behind c'est toujours mieux.

Il me semble me souvenir que cet ID traine en commentaire html juste avant la balise qui définit le champ. Si tu arrives à adapter ma fonction pour filtrer non pas les tagname mais les commentaires, et jouer avec les relations parentnode/childnode il y a moyen d'avoir quelque chose de plus sûr.

[Lapinpanda]

En fait j'ai plusieurs façon de faire.
J'ai du script dans le code behind qui s'ajoute parfaitement dans la page SharePoint.

Mais j'ai aussi des fichier .JS que j'utilise. J'arrive à les appeler ce n'est pas un soucis.

Je ne pourrais sans doute pas utiliser .ClientID mais je vais voir si cette option est envisageable

Et pour la fonction JS de nonoxp; je ne suis pas sur de comprendre comment elle fonctionne. Mais je vais voir si je peux l'implémenter


Pour remettre dans le vrai contexte d'utilisation :
Je veux afficher un calendrier construit en JS. Je dois le mettre dans une div "contenant".
Je me sers du code behind pour appeler des fonctions qui sont dans mon fichier externe .JS
Seul soucis c'est que je travaille avec les ID, par exemple pour placer mon calendrier DANS la div "contenant" et pas ailleurs.

Ma WebPart utilisera énormément document.getElementByID(''); donc je vais vraiment plancher sur ce sujet car cela me parait cruciale!!!

[Lapinpanda]

Note : le ClientID joue bien son role, mais pas comme je le pensais
j'avais mal compris en fait ClientID c'est l'ID aprés transformation par SharePoint.

Du coup pas besoin de savoir quel sera l'ID quand il sera transformé, on sans soucis plus

Je vais voir si cela peut me sauver la vie

[s.sougnez]

Salut,

en effet, c'est bien cela. Vu ton explication, je pense que c'est parfaitement utilisable. Dans ton fichier js, imagine tu as cette fonction

Code :

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

1
2
3
function changeContent(id, content) {
   document.getElementById(id).innerHTML = content;
}

Ensuite, dans ton code behind qui appelle ta fonction js, tu fais un simple

Code :

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

"changeContent(" + control.ClientID + ", \"contenu\");";

Un truc du genre

La fonction js de nonoxp est pas très compliquée mais pas performante. Dans le sens que si tu veux chercher un div avec un ID spécial, sa fonction va récupérer tous les div de ta page, les parcourir et comparer leur ID et Title aux paramètres. Mais bon, regarde le code d'une page SP, tu verras vite que des div, c'est pas ça qui manque, donc tu perds en performance le temps qu'il parcourt toute la liste...

D'autant plus que le risque de collision est à prendre en compte, si deux div on le même title, ca peut créer des soucis...

[Lapinpanda]

Hey

Merci ton explication m'a éclairé sur le sujet
Je pense que cette manière de faire est trés facilement exploitable, je vais tâcher de fonctionner ainsi!



Merci encore à vous deux pour me sauver la vie

[Lapinpanda]

B'jour

Je reviens à la charge.

function changeContent(id, content) {
document.getElementById(id).innerHTML = content;
}

J'ai utilisé cette méthode pour des HtmlInputButton. Cela fonctionne bien.

La j'essaye d'utiliser cette méthode pour des DropDownList, et ca ne veut vraiment pas.

Mon code behind dans la WEBPART:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
sub CreateChildControls()
 
      dim maCombo as new DropDownList
      maCombo.ID ="cbxActions"
      maCombo.Items.add(New ListItem("Choisissez une action","Defaut")
      maCombo.Items.add(New ListItem("Ajouter une ressource","ajouter")
 
      maCombo.Attributes.add("onchange","javascript:appellermafonction(' " & maCombo.CLientID & "');")
 
     me.controls.add(maCombo)
end sub

Mon code Javascript dans un fichier .JS :

Code :

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

1
2
3
4
5
6
 
function appellermafonction(idCbx)
{
     var valeurCbx = document.getElementByID(idcbx).value;
     alert(valeurCbx);
}

Le soucis ici c'est que "idCbx" vaut "cbxActions" et non "azeqsd_645az_etc..._cbxActions" donc il le trouve pas...



SI cela fonctionne avec l'élément HtmlInputButton c'est que j'écris mon code JS directement dans le code behind.
Avec les combobox, le soucis c'est que il me récupère bien le .value mais la valeur est toujours la même.
Que je sélectionne la première "option" ou la deuxième, il me renvoi toujours la value de la "première"

[s.sougnez]

Salut,

déjà, je te conseille d'ajouter l'attribut JavaScript après avoir ajouté ta combo aux controles.

Ensuite, pour une combobox c'est assez différent. Si tu veux récupérer la valeur sélectionnée, tu devrais faire quelque chose du genre :

Code :

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

1
2
3
4
 
var Cbx = document.getElementByID(idcbx);
var valeurCbx = Cbx.options[Cbx.selectedIndex].value;
var textCbx = Cbx.options[Cbx.selectedIndex].text;

[Lapinpanda]

Hey

Merci pour ton idée, je ne me rappelais plus de cette syntaxe pour les combobox !

Mais mon problème patine toujours autant, je n'arrive pas à travailler sur l'objet en question, vive sharepoint

J'aimerais simplement dire à sharepoint que lorsque je sélectionne quelque chose dans ma combo qu'il fasse une action en conséquence...

Pourquoi tout est toujours si compliqué avec SharePoint...

[s.sougnez]

Tu sais, si le principe est d'intéragir sur ta combo quand on changement est fait dans celle-ci, je te conseille de ne pas passer le ClientID pour faire un document.getElementById... Fait plutot passer this, ainsi tu auras directement l'objet et tu pourras directement exécuter des instructions JS lors du changement de sélection d'un élément ;-)

[Lapinpanda]

Mais c'est pas bête ca didons !!

Je suis passé par une autre alternative pour mon problème avec les ComboBox; j'utilise un Delegate Control sur le SelectedIndexChanged qui lui même appelle ma fonction JS. Et ça marche...
Le soucis c'est que je dois utiliser le AutoPostBack qui me gène, surtout quand je rafraichi toute ma page juste pour ouvrir une pop up

Je garde ton idée sous le coude elle va m'aider pour la suite


Merci s.sougnez encore une fois

[Lapinpanda]

C'est l'histoire du type qui revient à la charge

Petite question concernant le "this".

En effet this fait référence à l'objet en court. Que se soit le This c# ou JS ou bien le Me VB

Cependant je me demande comment je peux indiquer à ma fonction js que le this fait référence à la combobox et pas n'importe quoi.


Par exemple sur ce code :

Code :

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

maCombo.Attributes.Add("onchange","javascript:appellerUneFonction(this);")

Cette méthode ne fonctionne pas et c'est bien normal.


De plus, est-il possible de placer des objets en paramètre d'une fonction,en JS?
Parce que moi je trouve cette solution superbe mais je ne saisi pas comment

Merci

[s.sougnez]

Salut,

en fait, je n'ai jamais fait ce que tu me demandes, mais j'ai du mal à comprendre pour ton code ci-dessus ne fonctionne pas. Le fait est que pour moi, quand tu fais :

Code :

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

maCombo.Attributes.Add("onchange","javascript:appellerUneFonction(this);")

Le code généré va simplement se voir modifié avec l'ajout de :

Code :

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

onchange="javascript:appelerUneFonction(this);"

Et à ce moment là, le this prend tout son sens. Peux tu repérer le code de ta combo dans la source de ta page et me dire ou intervient l'ajout de l'attribut onchance (copie/colle moi le code de la balise <select> générée).

Quand tu dis que ca ne fonctionne pas, c'est-à-dire ? Si tu fais un alert() dans ta fonction, il n'est même pas appelé ?

[Lapinpanda]

Quand tu dis que ca ne fonctionne pas, c'est-à-dire ? Si tu fais un alert() dans ta fonction, il n'est même pas appelé ?

Pour moi cela devient logique que cela ne fonctionne pas car je met un "this" je me demande comment il va savoir quel objet je lui demande de référencé.

en faisant :

Code :

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

onchange="javascript:appelerUneFonction(this);"

la fonction n'est pas appeller

Code :

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

1
2
3
4
5
6
 
function appelerUneFonction(monObj)
{
alert(monObj.ID);
' même alert('aaa'); ne fonctionne pas
}

Quand je fais

Code :

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

onchange="javascript:alert(this);"

On obient [Object]
et

Code :

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

onchange="javascript:alert(this.ID);"

On obient [Undefined]



EDIT: Oubliez le copier/coller de la source.

Code :

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

1
2
3
4
<select name="........$monID" onchange="javascript:appelerUneFonction(this);setTimeOut.................."
id="..........._monID">
<option>....</option>
</select>

Je travail sur 2 pc. Mon environnement de développement n'a pas internet donc j'allège le code...

[s.sougnez]

Salut,

pour moi c'est pas logique que :

Code :

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

onchange="javascript:appelerUneFonction(this);"

ne fonctionne pas. Tu oublies quelque chose, le code JS est interpreté du niveau client, donc c'est pas parce que tu vois "this" dans la fonction js que le navigateur va comprendre "this". Effectivement, quand tu appelles une fonction js depuis un événement d'un contrôle html et que tu fais passer this, c'est directement la référence au select qui est passé...

Par contre c'est pas normal que ca fonctionne pas. Si j'étais toi, voici ce que je ferai...

Premièrement je ferais mon ajout d'attribut en mettant :

Code :

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

maCombo.Attributes.Add("onchange","javascript:appellerUneFonction();")

Bien entendu, tu modifies la signature de ta fonction pour qu'elle n'attende aucun paramètre. Dans le corps de ta fonction tu fais un bête "alert('foo');". Tu vérifies si 'foo' apparait. Si il n'apparait pas, tu sais déjà que le soucis ne viens pas de "this".

Ensuite, tu refais la manip, mais tu essayes bien de passer "this" en paramètre (en modifiant la signature de la fonction et le Attributes.Add). Si le 'foo' n'apparait pas, effectivement, c'est qu'il y a un soucis avec this, mais là je vois pas pourquoi...

Ensuite, si this.ID ne fonctionne pas, c'est à cause de la casse je pense, essaye this.id pour voir...

Tiens moi au courant de tes manip'

[Lapinpanda]

Ensuite, si this.ID ne fonctionne pas, c'est à cause de la casse je pense, essaye this.id pour voir...

Tiens moi au courant de tes manip'

Je confirme

J'ai fait des test en parallèle avant que tu post; j'étais pourtant sur que c'était "ID" et non "id".
Edit : je viens de me rendre compte que sous VB on écrit .ID; bourrage de crane

C'est ma faute



J'ai fait mes test sur autre chose que SharePoint, je recommence sur mon serveur et je tiens au courant de la suite

En tout cas merci !