jquery click handler language set - php

Question

I have 3 links on page index.php:
<div id="languages">
<a href="index.php?page=test&lang=en" id="flag">
<img src="./images/flags/en.png" class="flag_off" alt="en" title="en">
</a>
<a href="index.php?page=test&lang=sk" id="flag">
<img src="./images/flags/sk.png" class="flag_off" alt="sk" title="sk">
</a>
<a href="index.php?page=test&lang=cz" id="flag">
<img src="./images/flags/cz.png" class="flag_on" alt="cz" title="cz">
</a>
</div>
each of them is passing lang parameter and on same page (index.php). Then I have variable
$_GET['lang']
which will call function for changing language:
$obj->change_language($_GET['lang']);
Q: How can I do this by using jquery get() function without showing parameter in url of index.php page?
(Pass variable $lang through jquery)
I don't like URL with parameters after calling function for example:
index.php?page=test&lang=sk
I suppose using .click() function as handler.
EDIT:
I have something like this:
$(document).ready(function(){
$("#flag").click(function(){
$.get('index.php',
{ lang: "VARIABLE LANG FROM HREF" }
);
});
});
How to parse sk from href index.php?page=test&lang=sk part ?

Answer 1

If your problem is the parameter in the URL, you could try setting it with Ajax (http://api.jquery.com/jQuery.ajax/) and than reloading the page. I don't think you could get around refreshing since your content should be changed to the selected language as well?

Answer 2

$(".flag").click(function(event) {
event.preventDefault();
$.get(this.href, function(data) {
location.reload();
});
});

Answer 3

You don't need jQuery at all do to this. You can do something like
<div id="languages">
<a href="changeLanguage.php?lang=en">
<img src="/flags/en.png" alt="en" title="en">
</a>
<a href="changeLanguage.php?lang=sk">
<img src="/flags/sk.png" alt="sk" title="sk">
</a>
<a href="changeLanguage.php?lang=cz">
<img src="/flags/cz.png" alt="cz" title="cz">
</a>
</div>
Then, in this changeLanguage.php, you do your $obj->change_language($_GET['lang']); (where you should check/cast the value of the lang parameter), then, you can redirect the user to the referer page with something like
$url = (string) $_SERVER['HTTP_REFERER'];
if (0 === strlen($url)) {
// redirect to the home page if there is no referer
$url = '/';
}
header('Location: '.$url);
This way, you don't need any Javascript code to this. I think this is important in some ways:
you only do one HTTP request instead of two with the AJAX solution,
when the user click, the browser reacts immediately: the request is sent right after the click so the "loading icon" of the browser is showing that something is happening
this effect of action->reaction is something important in the User Experience, with the AJAX solution you have to wait for the first request to finish to trigger the "loading icon",
the location.reload() used with the AJAX solution can show up a dialog like Would you like to submit the form again ? if the user has arrived to this page with a POST request, and he might not understand what's the relation between its action (change the language) and this "error" message, which leads to a degraded User Experience too,
if your Javascript is broken is some way, those link might not work at all if your page to change the language only change the language. Let's say the page index.php?page=test&lang=en is doing something like $obj->change_language($_GET['lang']); exit;, because this page's purpose is only to change the language. Then if the Javascript code is not triggered for any reason (the code is broken, handlers are not bound, the user open up the page in a new tab), then the page loaded will be a blank page. And if you handle this case, then the "change language page" would look like a normal page, that's ok but it means that you'll do two HTTP requests with a "complete" response (one for changing the language, one other after the location.reload), and this leads to the first point,
use Javascript only where it's needed :)
What do you think ?