Dynamically generate javascript in php or do ajax for multilanguage interface?

Question

I have to implement a webapp interface in several different foreign languages. I find that the jquery functions I am writing depend on what language is being implemented. For example:

    <?php 
require 'nl.php';
/*
if(isset($_SESSION['lang'])){
    $lang = $_SESSION['lang'];
    if(!empty($lang)){
        if($lang == 'en'){
            require 'en.php';
        }else if($lang = 'nl'){
            require 'nl.php';
        }
    }
}
*/


?>

<html>
    <head>
    </head>
    <body>
        <textarea id = "notes"><?php echo $string_lib['ENTER_NOTES'];?></textarea>

        <script type="text/javascript" src= "js/jquery.js"></script>
        <script type="text/javascript" src= "js/clicknotes.js"></script>
    </body>
</html>

So this calls for a language file that provides an array. the commented out section is just to demonstrate how I am determining what's language to send. the first require command works in its place. Now here are the language files.

nl.php:

<?php 
$string_lib = array(
    'ENTER_NOTES' => 'Vul hier uw notities.',
    'ENTER_PASSWORD' => 'Vul hier uw wachtwoord in.',
);

and en.php

<?php 
$string_lib = array(
    'ENTER_NOTES' => 'Enter your notes here.',
    'ENTER_PASSWORD' => 'Enter your password here.',
);


?>

So now, problems arise when I start doing certain things in javascript, like this, clicknotes.js:

$(window).load(function(){
    $(document).ready(function(){
        $('#notes').focusin(function(){
            if($(this).text() == 'Enter your notes here.'){
                $(this).text('');
            }
            //alert($(this).text());
        });
    });
});

So I either have to dynamically generate the javascript with php using the same method I used for the html, like this:

<?php 
header('Content-type: text/javascript');
?>

$(window).load(function(){
    $(document).ready(function(){
        $('#notes').focusin(function(){
            if($(this).text() == '<?php echo $string_lib['ENTER_NOTES'];?>'){
                $(this).text('');
            }
            //alert($(this).text());
        });
    });
});

or I have to send the equivalent arrays in javascript and call those variables in javascript,i.e. if($(this)).text() == string_lib['nl']['ENTER_NOTES']). OR I was thinking I could do an ajax request to get the arrays i need.

So, which of these methods would you say is best for maintainability and ease of modification?

Any particular need for calling $(document).ready() from inside $(window).load()? — MLK.DEV
– MLK.DEV, Commented Feb 20, 2014 at 2:36
You could set-up containers in your HTML (etc. datasets in a hidden input or localstorages), fill them with JSON translation data and read from there in your javascript. Just a thought. — user1299518
– user1299518, Commented Feb 20, 2014 at 2:37
@MatthewLeeKeith because the tutorials i did kept setting things up that way, so i do it now. why, can that cause problems? — user3256623
– user3256623, Commented Feb 20, 2014 at 9:34
@MatthewLeeKeith Oh I get it, because the doc's already ready when the window has loaded. that's embarassing... thank you! — user3256623
– user3256623, Commented Feb 20, 2014 at 9:48
That's correct. Essentially you're waiting for all document resources to load, and then checking for if the DOM has loaded. Don't be embarrassed, gotta learn sometime! Glad you picked that out on your own though, means you understand it! — MLK.DEV
– MLK.DEV, Commented Feb 20, 2014 at 10:46

Amadan · Accepted Answer · 2014-02-20 02:34:55Z

1

You can also load an additional JavaScript (via <script> or RequireJS) or JSON (via AJAX) file like text_en.js or text_fr.json that would define a hash of translations; then you can simply use TEXT.enter_your_notes_here or similar in your JS code. This is similar to your PHP solution, but does not involve dynamic generation of JS.

PRO:

Your JS code remains clean
All texts can be easily translated since they are all in one place
Closely parallels the gettext internationalisation method used in other languages

CON:

extra request for the translation file

answered Feb 20, 2014 at 2:34

Amadan

200k23 gold badges252 silver badges321 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yanick Rochon Over a year ago

Transferring JSON is quite fast and usually not the bottleneck of web applications. (Compared to various sites loading 1000+ images, Flash crap and other third party ads).

Amadan Over a year ago

@YanickRochon: Yes. But it was the only CON I could think of. :p

user1299518 · Accepted Answer · 2014-02-20 02:47:09Z

0

I have worked with translations in my CMS and many times i require specific strings to be used in an otherwise static plain text as a javascript file. What i do:

en.php

return array(
   "id1"=>"translation 1",
   "id2"=>"translation 2"
);

HTML

...
$trans = require("en.php");
...
<input type="hidden" id="trans" data-trans='<?php echo json_encode($trans); ?>' />
...

JS

$(document).ready(function() {
   var id1 = $("#trans").data("trans")["id1"];   // contains the 'id1' string
});

This way your javascript would not need changing, which results many times in history caching related problems for your clients, as they need refreshing.

answered Feb 20, 2014 at 2:47

user1299518

7 Comments

Matej Chrenko Over a year ago

See my answer, we basicaly use the same principe, but I think it is easier to store translated text to the element where we need it, not all texts to one hidden input

user1299518 Over a year ago

If OP needs just one word it is just fine, but with translations you need to work with a lot of words, and lots of languages. A json object can handle everything and scales just fine, from a single word to a huge array.

Matej Chrenko Over a year ago

It depends on requiments, but maintaining a large array of strings could be very tricky. In his case it is much more easier to store translated text right to the element where he needs it.

user1299518 Over a year ago

Scalability is the key here. As i said, if OP needs just a word or two your method is good, but problems arise when one needs 10 frequently used strings, namely 'Are you sure?' or 'Password' etc.

Matej Chrenko Over a year ago

I agree with you, as I said - it depends... My theory is to use the best solution for a particular problem and in this case, based on information we have, I prefer my solution. In some cases combination of both our solutions can be used - if string is directly related to a particular element, it is better to keep it together and the other strings put to an array. It is easier to maintain. For example, you can change id of input and you don`t need to make worries about changing key in translations array.

|

Matej Chrenko · Accepted Answer · 2014-02-20 02:35:36Z

0

What about using data parameter in html elements

<textarea id = "notes" data-placeholder="<?php echo $string_lib['ENTER_NOTES'];?>"><?php echo $string_lib['ENTER_NOTES'];?></textarea>

then change your js:

 if($(this).text() == $(this).data('placeholder')){
            $(this).text('');
 }

answered Feb 20, 2014 at 2:35

Matej Chrenko

18811 bronze badges

Collectives™ on Stack Overflow

Dynamically generate javascript in php or do ajax for multilanguage interface?

3 Answers 3

2 Comments

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related