sourceText modifiable en production

**jp_leroy** · 21/08/2012, 20h33

Bonjour,

Je bute sur une difficulté et je sollicite votre aide. Dans le cadre d'un projet, je souhaite que l'utilisateur final dans l'environnement de production puisse taper le texte qu'il souhaite et que ce texte soit reconnu en tant que "sourceText". Actuellement, si je modifie le texte en environnement de production (voir ci-après le texte >essai1<), l'action ne se produit pas.

La ligne de code concernée :

Code :

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

<textarea name="Action" cols="20" rows="1" id="sourceText">essai1</textarea>

Merci beaucoup.

Jean-Pierre

**Muchos** · 21/08/2012, 22h52

Yo JP! Ça boume ?

Bon, je n'ai personnellement pas tout compris, mais j'imagine que vous voulez que l'utilisateur rentre du code dans votre textarea et que ce soit interprété comme du code source de la page, comme sur le site du W3schools.

Si c'est le cas, il faut sans doute plus qu'un textearea

**jp_leroy** · 21/08/2012, 23h40

Ca va bien, merci!
En effet, c'est tout à fait ça : le texte saisit sur la page web doit être compris comme du code faisant référence au "sourcetext".

Si je tape "hello" dans le code source, c'est hello qui va s'afficher sur la page web mais l'utilisateur ne pourra pas changer le texte. Or, ce que je souhaite est que l’utilisateur puisse modifier le texte.

Ci-dessous le code que j'ai pu élaborer jusqu'ici. C'est un projet API Google Translate. La clé API est volontairement désactivée alors le code ci-dessous ne permet pas d'afficher la traduction. Mais, par exemple, avec la clé API activée ça donne cela : http://imageshack.us/photo/my-images...etrnslate.jpg/ Hallo est le résultat de la traduction en allemand.

Merci pour votre aide.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
  <head>
    <title>Exemple traduction</title>
  </head>
  <body>
 <form onsubmit="return false">
 <p>Entrée du mot souhaité</p>
 <textarea name="Translate" cols="20" rows="1" id="sourceText">hello</textarea>
 <br />
<select name="langpair">
  <option value="en|de">English to German</option></select>
      <input type="button" value="Traduire" onclick="submit()" />
    <div id="translation"></div>
    <script>
      function translateText(response) {
        document.getElementById("translation").innerHTML += "<br>" + response.data.translations[0].translatedText;
      }
    </script>
    <script>
      var newScript = document.createElement('script');
      newScript.type = 'text/javascript';
      var sourceText = escape(document.getElementById("sourceText").innerHTML);
      // WARNING: be aware that YOUR-API-KEY inside html is viewable by all your users.
      // Restrict your key to designated domains or use a proxy to hide your key
      // to avoid misuage by other party.
      var source = 'https://www.googleapis.com/language/translate/v2?key=MY-API-KEY=de&callback=translateText&q=' + sourceText;
	  sourceText;
newScript.src = source;
      newScript.src = source;
 
      // When we add this script to the head, the request is sent off.
      document.getElementsByTagName('head')[0].appendChild(newScript);
    </script>
 </form>
 
 
</body>
</html>

**thelvin** · 22/08/2012, 11h12

Faudrait quand même que tu te rendes compte que ça veut rien dire, tes histoires. C'est quand même pas compliqué : explique ce que tu essaies de faire.

**jp_leroy** · 22/08/2012, 19h02

Envoyé par thelvin

Faudrait quand même que tu te rendes compte que ça veut rien dire, tes histoires. C'est quand même pas compliqué : explique ce que tu essaies de faire.

Ce que je veux c'est avoir un champ de texte libre, que ce texte soit envoyé à distance pour traduction (via l'api Google) et que le texte traduit revienne. Jusqu'à présent, je ne peux pas avoir de saisie libre à cause de l'id=sourcetext qui m'oblige à passer par le code pour mettre le mot à traduire.

**Bovino** · 23/08/2012, 08h59

à cause de l'id=sourcetext qui m'oblige à passer par le code pour mettre le mot à traduire.

Euh... toujours pas bien compris

Tu veux que le mot se traduise tout seul sans que tu n’aies à coder quoi que ce soit ?

EDIT : en tout état de cause, tu seras obliger de passer par un script JavaScript pour faire ta traduction, ne serait-ce que pour utiliser l'API Google.

**jp_leroy** · 23/08/2012, 12h31

En fait, ce que je veux est:
1. L'utilisateur tape un texte
2. L'utilisateur sélectionne la langue de traduction
3. L'utilisateur appuie sur le bouton pour envoyer la demande de traduction au serveur de Google
4. La traduction s'affiche

Avec ce que j'ai écrit actuellement, j'ai mon champ pour saisir le texte (1), le sélecteur de langue (2), le bouton d'envoi (3) et l'affichage de la traduction (4).

Le problème survient quand l'utilisateur tape le texte de son choix pour traduction : la traduction ne se réalise pas.

A mon sens, le problème vient de la ligne <textarea name="Translate" cols="20" rows="1" id="sourceText">hello</textarea>.
Là, le mot >hello< est le mot qui va être traduit. J'ai essayé de laisser vide (comme ça ><) mais ça ne marche pas. En l'état, je dois passer par le code pour traduire le mot voulu. Mais ce n'est pas le but car l'utilisateur doit pouvoir choisir le mot qu'il veut traduire.

Merci pour votre aide.

**thelvin** · 23/08/2012, 12h57

C'est vrai qu'il vaut mieux utiliser .value que .innerHTML

**jp_leroy** · 23/08/2012, 14h04

Envoyé par thelvin

C'est vrai qu'il vaut mieux utiliser .value que .innerHTML

J'ai essayé de remplacer .innerHTML par le .value mais ça ne marche pas.

**Bovino** · 23/08/2012, 14h44

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <script>
      var newScript = document.createElement('script');
      newScript.type = 'text/javascript';
      var sourceText = escape(document.getElementById("sourceText").innerHTML);
      // WARNING: be aware that YOUR-API-KEY inside html is viewable by all your users.
      // Restrict your key to designated domains or use a proxy to hide your key
      // to avoid misuage by other party.
      var source = 'https://www.googleapis.com/language/translate/v2?key=MY-API-KEY=de&callback=translateText&q=' + sourceText;
	  sourceText;
newScript.src = source;
      newScript.src = source;
 
      // When we add this script to the head, the request is sent off.
      document.getElementsByTagName('head')[0].appendChild(newScript);
    </script>

Je n'ai pas l'impression que tu aies bien compris ce qu'est une API et comment on l'utilise...

**jp_leroy** · 23/08/2012, 14h56

Si, l'appel à l'API fonctionne. J'ai juste enlevé la clé d'API quand je l'ai mise sur le forum (du coup, si tu essaies avec le code chez toi ça ne marchera pas) car l'API translate est désormais un service payant, je paye en fonction du nombre de caractère traduit. Du coup, je n'ai pas envie de me faire pirater.

**Bovino** · 23/08/2012, 15h03

Ca, je l'avais bien compris !

Ce que je veux dire, c'est que dans ton code, le script que j'ai recopié est exécuté au chargement de la page uniquement, pas lorsque tu en as besoin !
Donc c'est sûr que quand tu modifies la valeur de l'input, ça change rien au niveau de l'exécution.
Une API sert à te fournir des méthodes qui vont te permettre d'appeler le service quand tu en auras besoin et de te renvoyer le résultat.

**jp_leroy** · 23/08/2012, 16h06

D'accord! Merci beaucoup pour ta réponse. Si je comprends bien, il faut que je modifie le script de façon à programmer l'appel de l'API après un input. Je vais travailler ça.

**Bovino** · 23/08/2012, 16h16

Disons que je n'ai jamais utilisé cette API et je ne sais pas comment elle fonctionne (voir pour ça le forum APIs Google).
En regardant rapidement sur https://developers.google.com/transl...etting_started, on voit que tu as juste copié / collé le code, mais celui proposé ne fait que traduire le texte au démarrage, pas sur une action de l'utilisateur. Pour ce dernier cas, tu devras exécuter le code lors du clic, donc le mettre dans une fonction...

sourceText modifiable en production

APIs Google

Discussions similaires

Partager

Partager