CODEWITHSUNDEEP
phpjqueryajaxtranslation
morgi
morgi

Reputation: 1025

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.

Upvotes: 1

Views: 2057

Answers (3)

Giulio Muscarello
Giulio Muscarello

Reputation: 1341

If you don't want to refresh a page (making a new request to the PHP page), I'd suggest using a strings file in Javascript. This may require a bit of repetitive coding, but will work quite well.

Page.html:

<a href="#" onClick="setEnglish();">English</a> | <a href="#" onClick="setFrench();">Fran&ccedil;ais</a><br>

<span id="stringUsername"></span><br>
<input ...><br>
<span id="stringPassword"></span><br>
<input ...><br>
<span id="stringSex"></span>: <input ...><span id="stringMale"></span><input ...><span id="stringFemale"></span>

<script src="langEng.js"></script>
<script src="langFra.js"></script>
<script>
function setEnglish();
document.getElementById('stringUsername').innerHTML = $stringUsername;
document.getElementById('stringPassword').innerHTML = $stringPassword;
document.getElementById('stringSex').innerHTML = $stringSex;
document.getElementById('stringMale').innerHTML = $stringMale;
document.getElementById('stringFemale').innerHTML = $stringFemale;
</script>

langEng.js

$stringUsername='Username';
$stringPassword='Password';
$stringSex='Sex';
$stringMale='Male';
$stringFemale='Female';

langFra.js

$stringUsername='Username'; // Not sure about this translation.
$stringPassword='Mot de passe';
$stringSex='Sexe';
$stringMale='Homme';
$stringFemale='Femme';

Upvotes: 1

Ege Akpinar
Ege Akpinar

Reputation: 3286

I would suggest the following, keep your language specific stuff in a Javascript dictionary, have a Javascript method to populate data from that dictionary, have a PHP server call which returns you contents for that dictionary (basically your language-specific content) and whenever user switches to a different language, make that PHP server call to populate your Javascript dictionary and call your Javascript method to populate.

Roughly, it would be something like this

function js_populate_content(lang)  {
    var content-data = $.get(lang); // Ajax call to your PHP service. You will need to do some parsing here (JSON would be easiest)
    // Populate your HTML elements using data
    document.getElementById('header').innerHTML = content-data['header'];
}

You could call this method at page load or you could still load it from php at first load

$(document).ready(function(){
    var default_lang = 'en';
    js_populate_content(default_lang);
}

You should call this method whenever user changes language e.g.

$('a#language').on('click', function() {
    var new_lang = $('input#language').val();
    js_populate_content(new_lang);
}

Note: You should include jquery

Note2: See jQuery get for proper syntax of $.GET

However, this is unnecessarily complex for just language switching. Similarly, you could load the entire page in AJAX and set your body to the newly loaded page based on language. Depends on whichever is easier for you to provide as a service call (providing only language dictionary vs. providing entire page in a specific language) For the latter, see jQuery load

Upvotes: 1

Abhilash
Abhilash

Reputation: 1610

Assuming everything on the page is translated, you might do something like this. 

$('#switch a').on('click', function(e){
    e.preventDefault(); // to stop the link from following the url
    var href = $(this).attr('href');
    $('body').load( href );
});

If there is a part of the body, say a div that contains all of translated bits, you could change it to 

$('#translated_content_id').load( href );

Upvotes: 0

Related Questions