JQuery i18n implémentation

**abel.ludba** · 10/07/2012, 21h10

Bonjour
J'essaie de faire une page bilingue. Je voudrais utiliser JQuery i18n pour ce faire.
Comme je n'ai pas acces à un serveur, alors, j'ai essayé de faire fonctionner cet exemple exemple dans ma machine.
Seulement, en l'essayant au local, j'ai une erreur. Ce que j'ai fait, j'ai copié le code source et ai essayé de le faire fonctionner en important les librairies correspondantes dans me disque dur.
Voila une copie ecran de l'erreur:

Message: 'msg_hello' is undefined
Line: 86
Char: 4
Code: 0
URI: file:///D:/Documents%20and%20Settings/AbelLudba/My%20Documents/Downloads/MySandBox/JS/Bilingual/index.html

Auriez-vous une idée de la cause?
Y a-t-il une alternative? autres exemple?
Merci
Abel

**SpaceFrog** · 10/07/2012, 22h00

un souci d'arborescence ?
un src ne pointant pas sur le bon fichier => un script js pas chargé

cette variable elle est dans ton code ou celui de jquery ?

**abel.ludba** · 10/07/2012, 22h37

Salut
Je ne penserais pas que ce soit lié à un problème d'arborescence ou de chemin : ni les CSS ni les JS.
Cette variable devrait etre une instance renvoyée comme réponse à requete du JQuery.
Voici le code de la page principale. S'il faut je peux envoyer les CSS et les librairies.

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
      <title>jQuery.i18n.properties: Demo</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta http-equiv="content-script-type" content="text/javascript" />
 
      	<!-- JS -->
      	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      	<script type="text/javascript" src="jquery.i18n.properties.js"></script>
 
      	<!-- CSS -->
        <link rel="stylesheet" href="screen.css" type="text/css" media="screen, projection">
		<link rel="stylesheet" href="print.css" type="text/css" media="print">	
		<!--[if lt IE 8]><link rel="stylesheet" href="ie.css" type="text/css" media="screen, projection"><![endif]-->
      	<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection">
 
 
      <script type="text/javascript">
      	// load I18N bundles
		var varExamples;
		jQuery(document).ready(function() {
			loadBundles('pt_PT');
 
			// configure language combo box
			jQuery('#lang').change(function() {
				var selection = jQuery('#lang option:selected').val();
				loadBundles(selection != 'browser' ? selection : null);
				jQuery('#langBrowser').empty();
				if(selection == 'browser') {
					jQuery('#langBrowser').text('('+jQuery.i18n.browserLang()+')');
				}
			});
 
			// load files just for display purposes...
			jQuery('h4').each(function() {
				var file = 'bundle/' + jQuery(this).text();
				var code = jQuery(this).next().next('code');
				jQuery.get(file, function(data) {
					data = data.replace(/\n/mg, '<br/>');
					code.html(data);
				});
			});
			// ... and configure links to show/hide them
			jQuery('a.toggle').bind('click', function() {
			  jQuery(this).next('code').slideToggle();
				return false;
			});
		});
 
		function loadBundles(lang) {
			jQuery.i18n.properties({
			    name:'Messages', 
			    path:'bundle/', 
			    mode:'both',
			    language:lang, 
			    callback: function() {
			        updateExamples();
			    }
			});
		}
 
		function updateExamples() {
			// Accessing values through the map
			var ex1 = 'msg_hello';
			var ex2 = 'msg_complex'; var ex2P = 'John';
			var ex3 = 'msg_url'; var ex3P = 'solution_1';
			var ex4 = 'inexistent_key';
            var ex5 = 'msg_multi_placeholder'; var ex5P1 = 'beautiful'; var ex5P2 = 'fishing';
            var ex6 = 'msg_multi_placeholder_corrected'; var ex6P1 = 'beautiful'; var ex6P2 = 'fishing';
			jQuery('#mapExamples')
				.empty()
				.append('<li><code class="i18n">jQuery.i18n.prop(\''+ex1+'\')</code>  -->  '+jQuery.i18n.prop(ex1)+'</li>')
				.append('<li><code class="i18n">jQuery.i18n.prop(\''+ex2+'\',\''+ex2P+'\')</code>  -->  '+jQuery.i18n.prop(ex2, ex2P)+'</li>')
				.append('<li><code class="i18n">jQuery.i18n.prop(\''+ex3+'\',\''+ex3P+'\')</code>  -->  '+jQuery.i18n.prop(ex3, ex3P)+'</li>')
				.append('<li><code class="i18n">jQuery.i18n.prop(\''+ex4+'\')</code>  -->  '+jQuery.i18n.prop(ex4)+'</li>')
                .append('<li><code class="i18n">jQuery.i18n.prop(\''+ex5+'\',\''+ex5P1+'\',\''+ex5P2+'\')</code>  -->  '+jQuery.i18n.prop(ex5, ex5P1, ex5P2)+'</li>')
                .append('<li><code class="i18n">jQuery.i18n.prop(\''+ex6+'\',\''+ex6P1+'\',\''+ex6P2+'\')</code>  -->  '+jQuery.i18n.prop(ex6, ex6P1, ex6P2)+'</li>');
 
 
			// Accessing values through a JS variable
			var ex21 = 'msg_hello';
			var ex22 = 'msg_world';
			var ex23 = 'msg_complex'; var ex23P = 'John'; 
			var ex24 = 'inexistent_key';
			jQuery('#varExamples')
				.empty()
				.append('<li><code class="i18n">'+ex21+'</code>  -->  '+eval(ex21)+'</li>')
				.append('<li><code class="i18n">'+ex22+'</code>  -->  '+eval(ex22)+'</li>')
				.append('<li><code class="i18n">'+ex23+'(\''+ex23P+'\')</code>  -->  '+eval(ex23+'(\''+ex23P+'\')')+'</li>')
				.append('<li><code class="i18n">'+ex24+'</code>  -->  <small><i>(browser would report a missing JS symbol)</i></small></li>');
		}
      </script>
   </HEAD>
 
   <BODY>
      <h2>jQuery.i18n.properties :: Demo</h2>
 
      <div class="left">
        <h3>I18N Bundles</h3>
        <h4>Messages.properties</h4>
  	    <a href="#" class="toggle">[toggle contents]</a>
        <code class="files"></code><br/>
 
        <h4>Messages_pt.properties</h4>
        <a href="#" class="toggle">[toggle contents]</a>
        <code class="files"></code><br/>
 
        <h4>Messages_pt_PT.properties</h4>
        <a href="#" class="toggle">[toggle contents]</a>
        <code class="files"></code><p/><p/><p/>
 
 
        <h3>Examples</h3>
        <div id="langBox">
  	      Language:
  	      <select id="lang">
  			<option value="browser">Indicated by the browser</option>
  			<option value="en">en</option>
  			<option value="pt">pt</option>
  			<option value="pt_PT" selected>pt_PT</option>
  		  </select>
  		  <span id="langBrowser"></span>
  	  </div>
 
        <h4>Accessing values through the map</h4>
        <ul id="mapExamples"></ul>
 
        <h4>Accessing values through a JS variable</h4>
        <ul id="varExamples"></ul>
      </div>
   </BODY>
</HTML>

Merci
Abel

JQuery i18n implémentation

jQuery

Vue hybride

Discussions similaires

Partager

Partager