Forums

Sumeet Chawla

Hello Friends,

I was recently working on a multi lingual site and to implement the multi lingual feature, I used this jQuery translation plugin to achieve my goal.

http://code.google.com/p/jquery-translate/wiki/General

The demo of the plugin uses an 'ul' list to display the list of available languages. Its pretty easy to convert it to a drop down menu but the problem am facing is that when I convert it to drop down menu, I am unable to save the selected language in the cookie. I did a lot of research on their discussion forum and found this code which works perfectly on jsbin but not when I create a file with it :| http://jsbin.com/exewe/edit

I am sure am missing out something very trivial somewhere..

Here is the code:


<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
  \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">
<head>
	<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\" type=\"text/javascript\" ></script>
	<script src=\"http://jquery-translate.googlecode.com/files/jquery.translate-1.3.7.min.js\" type=\"text/javascript\"></script>
	<script src=\"http://stilbuero.de/jquery/cookie/jquery.cookie.pack.js\" type=\"text/javascript\"></script>
	<script type=\"text/javascript\" >
	jQuery(function($){		
		$('body').css('height','900px');
		
		$.translate(function(){  //when the Google Language API is loaded
		   function translateTo( destLang ){ //this can be declared in the global scope too if you need it somewhere else
		       $('body').translate( 'english', destLang, {   //translate from english to the selected language
		         not: '.jq-translate-ui',  //by default the generated element has this className
		         fromOriginal:true   //always translate from english (even after the page has been translated)
		       });
		   }
		   $.translate().ui('select','option')
		     .appendTo('body')    //insert the element to the page
		     .change(function(){   //when selecting another language	
		       translateTo( $(this).val() );
		       $.cookie('destLang', $(this).val() );
		       // set a cookie to remember the selected language
		       return false; //prevent default browser action
	    	}
	    )
	    var destLang = $.cookie('destLang'); //get previously translated language
	    alert(destLang);
 		if( destLang )  //if it was set then
	       translateTo( destLang );
 		}); //end of Google Language API loaded
	});
				
	</script>
	<title>Sandbox</title>
	<meta http-equiv=\"Content-type\" content=\"text/html; charset=utf-8\" />
	<style type=\"text/css\" media=\"screen\">
		body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
	</style>
</head>
<body>
  <p>Hello from JS Bin</p>
  <p id=\"hello\">
  	\"Hello World - this was inserted using JavaScript\"
  </p>
</body>
</html>

Sumeet Chawla

Okay, I solved the problem. It seems like the code was working fine in all the browsers except Google Chrome. After doing some research I found the solution to the problem which actually wasn't even a problem lol.

Chrome is one of my favourite browsers and the fact that the code was working fine in all the browsers except it, was bugging me a lot. After doing some research, I came to the conclusion that Google Chrome is very strict about its security features and hence it does not allow cookies to be generated by webpages on the hard drive.

Hence, the code works fine in Chrome if it is hosted on a web server. The other alternative is to enable chrome to create cookies for files.

treehouse : what would you like to learn today?

Forums

jQuery Translation