Django internationalization with i18n: choosing language in template using jQuery

Question

For the internationalization of my django project, I'm using django's i18n, and I love it.

For setting the language in the template, instead of using forms like in this example :

  <form action="{{site_url}}i18n/setlang/" method="post">
    <input name="next" type="hidden" value="" />
    <select name="language">
      {% for language in languages %}
      <option value="{{language.0}}">{{language.1}}</option>
      {% endfor %}
    </select>
    <input type="submit" value="Ok" />
  </form>

I would like to use simple plain text links; something like this:

{% for language in languages %}
    {% ifnotequal language.0 lang %}
    <a href="{{site_url}}i18n/setlang/" >{{language.1}}</a>{% else %}{{language.1}}
    {% endifnotequal %}
    ...
{% endfor %}

For letting the previous template snippet do his work, I've created the following jQuery function:

var languageLink = $('#language-choser > a');

languageLink.click(function(e){
  var languageURL = languageLink.attr('href');
  var languageNow = languageLink.text();
  var lang = (languageNow=='English') ? 'en' : 'es';
  $.post(languageURL, {next: "", language:lang});
});

(I have to admit that I just began using jQuery)

This function works almost always with Firefox (but sometimes it simply doesn't nothing) and it never works with Chrome.

Someone can tell me what's wrong? I've been playing around with it for a long time, without finding a way out.

EDIT: Without any changes, everything is now working great. I can't understand why, and, obviously, I can't trust some code with such an irrational behavior...

Answer 1

Try adding a debug statement (console.log(), or even a simple alert() will do) at the beginning of the handler function to make sure that it is being invoked at all. Are you adding the click handler in a document.ready() handler?

Also I think the $.post function will do an AJAX POST, but will not refresh the page, so you may not see anything happening at all. Try using Firebug / Chrome developer tools to examine outgoing requests to make sure.

You may want to make the click() handler explicitly return a value too (true means continue processing the click, false means stop). Maybe that's the root of the problem: in Firefox the handler sometimes returns true, so the link is followed, while on Chrome it returns false and the POST is executed, but the link is not followed.