SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Oct 2008
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery localization problem.

    Hi,
    I am trying to implement language choosing system into existing pages made in php. And I am really having some difficulties to picture how I should do this with jQuery. To mention that I am quite a noob with jQuery still.

    So what I would like to have is a form select box with a list of available languages, ok this is no problem. Languages list come from database. Also the main page template is loaded from db.

    So I want that the user is able to select language from the list and with ajax the main template/page is loaded from database with correct language and shown to user in this language he chose. Any ideas how to do it?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Each section of text on the page would need to be stored in the database. A common way to do this is as an english library, or a french library.

    Wherever on the page you want to place some text, you will need to access the appropriate piece of text from the chosen languages library.

    For example, in the English library, you could have a database entry for the product name, and the product description.

    The following screencast about internationalization shows how this is done with Ruby on Rails. Similar techniques can be used with php or other server-side languages, but as you can imagine, there's quite a lot of work involved in the translation process.

    If you want to cheat, you can have google provide an appropriately translated version of your website for your visitors.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Oct 2008
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe I explained it a bit confusing way. So the problem is not that I dont know the techniques of localization or what localization/internationization means and I dont need translations or anything like that. Problem has actually nothing to do itself with the localization. But the problem is that how I get the user chosen language variable value to the front controller with jQuery so I can reload the main page with the user chosen language? Problem is with my jQuery skills. I dont know how to do about anything with it. I have read jQuery's homepage, documentation and tuts from google without success.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    How do you intend to use the language choice? If it's the server that will be doing something with it, then you can place the language choice in the querystring.

    For that you don't need jQuery. You don't even need javascript, just submit the select box choice back to the same page and you're set.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Oct 2008
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats the whole point. It should be done "on-the-fly" without users need to press submit. Just select the language and vola language changed without submits.

  6. #6
    SitePoint Addict
    Join Date
    Oct 2008
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okey problem solved. And the solution was uber simple but I just didnt realize it because I dont know much of javascript. This did the trick I was looking for:

    HTML Code:
    <form method="get" action="">
    <select name="lang" onchange="this.form.submit();">
      <option value="fi">Suomi
      <option value="se">Svenska
      <option value="en">English
    </select>
    </form>

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You do realise that all users who don't have javascript enabled will now to completely unable to set their language preference.

    The way to fix this is to include a submit button with the language form, and then to use javascript to hide it. That way the non-javascript situations will still have the submit button available.

    You could even do the right thing and shift the javascript from out of the html content
    Code javascript:
    <form id="selectLanguage" method="get" action="">
        <select name="lang">
        ...
        <input id="submitLanguage" type="submit" value="Choose this language">
    </form>

    And then place this script at the end of the body, just before the </body> tag.

    Code javascript:
    var form = document.getElementById('selectLanguage');
    var submit = document.getElementById('submitLanguage');
    submit.style.display = 'none';
    form.elements.lang.onchange = form.submit;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •