Internationalizaton of HTML Files

Question

I am developing a project and uses HTML files (not JSP or any other technology at client side). I use JQuery for scripting. I have tables, columns, and many fields that have "text" on them. How can I internationalize my web page with JQuery? I mean I will load a file _tr.extension and my web page will be Turkish, _swe.extension will be Swedish etc.

Any ideas?

EDIT1: For example I will write a code like that:

<div>${name}</div>
<div>${surname}</div>

and there will be a _tr.properties file like that:

name = isim
surname = soyisim

and there will be a _swe.properties file like that:

name = namn
surname = efternamn

And if I change the imported file that texts inside that divs will be at different language per pages.

EDIT2: That functionality is enough for me I don't want more I need a speedy and lightweight plug-in (Maybe feeding from JSON can be an additional specialty).

Answer 1

I can strongly recommend Globalize as an translating and formatting solution.

To translate you would use the code similar to that:

<script type="text/javascript" src="globalize.js"></script>
<script type="text/javascript" src="cultures/globalize.cultures.js"></script>
<script type="text/javascript">
  Globalize.addCultureInfo( "tr", {
    messages: {
      "name" : "isim",
      "surname" : "soyisim"
    }
  });
  // Swedish language code is actually sv
  Globalize.addCultureInfo( "sv", {
    messages: {
      "name" : "namn",
      "surname" : "efternamn"
    }
  });

  $(document).ready(function() {
    // you need somehow know what language to use
    // but it is out of scope of this answer
    $( "name" ).val( Globalize.localize( "name", "tr" ) );
    $( "surname" ).val( Globalize.localize( "surname", "tr" ) );
  });
</script>

To use this script you would need to modify your html as follows:

<!-- DIV is just a container, P (paragraph) or SPAN 
     are more suitable for the job. Also this shows
     neutral language texts.
     Be sure to use unique IDs -->
<div><p id="name">name</p></div>
<div><p id="surname">surname</p></div>