Translate a whole page without refreshing it
The website I’m currently working on is written into two languages (fr/en). The method I’m using to translate the page is quite simple :
HTML
<ul id="switch">
<li><a href="index.php?lang=en" title="English version">En</a></li>
<li><a href="index.php?lang=fr" title="Version française">Fr</a></li>
</ul>
PHP (index.php)
<?php
// Translation
if(isset($_GET['lang'])) {
$lang = $_GET['lang'];
}
else {
$lang = 'en';
}
switch($lang) {
case 'en':
$content = 'en.php';
break;
case 'fr':
$content = 'fr.php';
break;
}
include_once('lang/'.$content);
?>
Both en.php and fr.php contain an array filled with the actual content of the page in their respective language.
en.php (example)
<?php
$version = array(
'mainTitle' => 'Main title test',
'noscript' => 'Noscript message test',
'header' => 'Header test'
// And so on, same thing for the french version
);
?>
This system works fine and is sufficient for this website, but it implies a page refresh when the user switches from one language to another and that is precisely what I would like to avoid.
I guess I could work this out using a bit of AJAX (jQuery) but I am not exactly sure how to do this. Could you give me a few hint on how to implement this? I’m also open to suggestions on other possible ways of doing this – bearing in mind that it is a small scale project.
Thanks for your help.














