Reliably barfs on '<pre>&lt;link&gt;</pre>'

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Create page containing "<pre>&lt;link&gt;</pre>"
2. Translate ('en' to 'ja' in the example)
3. Observe error in js console:
Error: elem is undefined
Source File: http://localhost/jquery-1.2.6.min.js
Line: 19

What is the expected output? What do you see instead?
Expected entire page to be translated, but translation stopped at this
point after a dozen or so successful chunks.

What version of the product are you using? On what operating system?
1.2.6 on Firefox 3.1b2 on OS X 10.5.6

Please provide any additional information below.
Nice work!

Original issue reported on code.google.com by s...@samj.net on 31 Jan 2009 at 8:22

[GoogleCodeExporter]

Ok so I boiled it down to as small a tag as I could (guess there's something up 
with the parsing), but it seems 
this will affect many <pre> tags on my site which contain such example XML code.

Oh well, it was worth a try. I guess this need is pretty non-standard... I 
wonder if it would be possible just to 
translate, say, the h* and p tags and leave the rest alone? Or conversely, 
translate the body and exclude the pre 
and code tags? I guess I could just iterate over the DOM...

Original comment by s...@samj.net on 31 Jan 2009 at 8:28

[GoogleCodeExporter]

This worked better for me:

<script type="text/javascript" src="/static/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" 
src="/static/js/jquery.translate-1.2.6.min.js"></script>
<script type="text/javascript">
  google.load("language", "1");
  $(document).ready(function(){
    /* $('#content').translate('en', 'ja'); */
    $('p').translate('en', 'es');
    $('li').translate('en', 'es');
  });
</script>

Original comment by s...@samj.net on 31 Jan 2009 at 8:40

[GoogleCodeExporter]

Excluding tags is basically very easy: `$('#content').translate('en', 'ja', 
{not:'pre'});`

But if there's some text around it then it won't help:
{{{
<p>
 Here's an example:
 <pre><link></pre>
</p>
}}}

because in this case the whole paragraph is translated to preserve the context. 
And this why the new 
translation is set with `.html()`, which causes `"<link>"` to become a 
DOMElement. Also, the 
`elem is undefined` error is triggered when the plugin tries to re-bind event 
handlers attached to 
nodes inside the paragraph but the new `link` element exists only in the 
translation, not in the 
source, so it will be undefined.

The solution is not quite trivial: I could make it "remember" when to use 
`.text()` and when 
`.html()` but that won't help in my example above as I have no choice but 
setting the new content 
with `.html()` because there are other real tags in it.

But if you want the content to be translated inside the `pre` tags you can put 
it in a textarea 
instead, because the plugin uses `.val()` for that, which handles this case 
nicely. Or just translate 
it separately:

{{{
$('#content').translate('en', 'ja', {not:'pre'});

$.translate( $("pre#id").html(), 'en', 'ja', {
  complete:function(){
    $("pre#id")[0].innerHTML = this.translation;
  }
})
}}}

Hope that helps!

Original comment by balazs.endresz on 31 Jan 2009 at 12:05

[GoogleCodeExporter]

Original comment by balazs.endresz on 10 Feb 2009 at 5:26

• Changed state: WontFix