value in cookie is not refreshed after click again on an anchor tag

Question

I have a multi-language login site and I want to store the login information (user & language) in cookie using jQuery. The form has 2 anchor tags and some labels which changes dynamically based on the chosen language.

<form id="frm0" method="post" action="">
  <fieldset>
    <div id="lng" style="text-align: right">
      <a href="index.php?lang=en" id="en" title="English"><img src="pics/files/en.png" alt="English" /></a>&nbsp;
      <a href="index.php?lang=de" id="de" title="Deutsch"><img src="pics/files/de.png" alt="Deutsch" /></a>
    </div>
    <div>
      <label for="usr" style="font-weight: bold">User for en/Benutzer for de: </label>
      <input name="usr" type="text" id="usr">
    </div>
    <div>
      <label for="passw" style="font-weight: bold">Password for en/Kennwort for de: </label>
      <input name="passw" type="password" id="passw">
    </div>
    </fieldset>
    <input type="submit" name="sbmt" id="sbmt" value="Login">
</form>

The following code:

$(document).ready(function(){
  $('a').click(function(){
      var language = $(this).attr("id");
      $.cookie('lang', language, { path: '/', expires: 14 });
  });
});

sets the cookie correctly, but only after one click on an anchor tag. If I change the language again, the value of the cookie is not refreshed. However, if I add "return false":

$(document).ready(function(){
  $('a').click(function(){
      var language = $(this).attr("id");
      $.cookie('lang', language, { path: '/', expires: 14 });
      return false;
  });
});

the value of the cookie is set correctly after every click on the anchor tag, but the labels on the page does not change based on the selected language (its like the page is not refreshed).

I've also tried with:

  $('#lng a').click(function() {
    $.cookie('lang', this.id, { path: '/', expires: 14 });
    return false;
  });

but the same bahaviour. Any help please? Thank you.

Answer 1

The return false is preventing your anchor from clicking, hence the cookie being set but the page not refreshing, and therefore your language not changing.

You could try something like below:

$(document).ready(function()
{
   $('a').click(function(event)
   {
        var language = $(this).attr("id");
        alert(language);
        $.cookie('lang', language, { path: '/', expires: 14 });
        e.preventDefault(event);
        alert($.cookie('lang'));
        window.location($(this).attr("href"));
   });
 }); 

However, I'd assume it's the same as return false and you'll have the same result. I'd be checking that the cookie is changing, and that it's not more around the page refresh and link destination.

Can you let us know what both the alerts are returning please? I have a feeling it's to do with the load process.

As the Url has the language in it, is it worth checking on the page load?

$(document).ready(function() {
   var language = $.cookie("lang");
     if(language.length > 0)
     { // Do things for the set language }
     else
     {
       language = $.QueryString["lang"];
       $.cookie("lang", language);
       // Do things for QueryString language
     }
   alert(language); // If you want to check the language set?

});

And you can get the QueryString values from this SO question: How can I get query string values in JavaScript?

Lots of options for getting the QueryString value, but my personal preference is for BrunoLM's answer.