AJAX and single label

**maileen** · Apr 20, 2008 23:43

Hi,

i'm playing around with AJAX and PHP to create something like a "small desktop" application.
basically the first step is to log in the system.
for that i have a log-in form where users can choose the interface language.

when the log-in form runs, it is in English. user can click on some arrow to open another DIV and display all other languages available.
a click on a particular flag will call the PHP page where the log-in form (login field + password field) are stored with dynamic language interface.

my Problem :
however, i make no sense for the title of this form to call a PHP page where will be just 1 dynamic text (changing on flag choice).
so if you understand well, i have 2 divs (1 for form title, 1 for log-in form itself). and i load thanks AJAX php code into divs.

So i do not want to write a PHP page just for 1 label... it makes sense for a complete form but not for a simple text line or label.

Thus how can i do that without refreshing page. using AJAX and PHP only ?
i guess you already faced such situation so i would really appreciate your help.

thx

**gRoberts** · Apr 21, 2008 01:36

The way i'd do it is store all your text values in a database, against the ID of the element they belong to and the language its in.

If you look at my example, its not exactly fool proof, but it should give you an idea of what i mean. Instead of pulling data from the database, I have skipped that step and put in two static languages.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" media="screen" />
        <style type="text/css"></style>
        <script type="text/javascript">
            var resources = {
                'en-GB' : {
                    'lbl_username':'Username:',
                    'lbl_password':'Password:',
                    'btn_login':'Login',
                    'div_loginError':'Login Failed'
                },
                'tr-TR' : {
                    'lbl_username':'Kullanıcı &#214;zellikleri:',
                    'lbl_password':'Şifre:',
                    'btn_login':'Oturum A&#231;',
                    'div_loginError':'Login Failed'                
                }
            }
            var currentLanguage = null;
            function loadLanguage(lang) {
                if(typeof(resources[lang]) != 'undefined')
                    currentLanguage = resources[lang];
                else {
                    alert('Unable to load language \''+lang+'\'');
                    return false;
                }
                populateLanguage(currentLanguage);
            }
            function populateLanguage(data) {
                for(var i in data) {
                    var el = document.getElementById(i);
                    if(el) {
                        if(el.nodeName == 'INPUT')
                            el.value = data[i];
                        else
                            el.innerHTML = data[i];
                    }
                }
            }
            function getResource(id) {
                if(!currentLanguage) {
                    alert('An error has occurred!');
                    return false;
                }
                return currentLanguage[id];
            }

            function showLoginError() {
                var loginCont = document.getElementById('login');
                var loginError = document.createElement('DIV');
                    loginError.id = 'div_loginError';
                    loginError.innerHTML = (getResource('div_loginError')?getResource('div_loginError'):'Unable to load resource');
                    loginCont.appendChild(loginError);
            }
        </script>
    </head>
    <body>
        
        <div id="login">
            <label for="username" id="lbl_username">Username:</label><input type="text" id="username" /><br />
            <label for="password" id="lbl_password">Password:</label><input type="password" id="password" /><br />
            <br />
            <input type="button" value="Login" onclick="showLoginError();" id="btn_login" />
            <br />
            <a href="javascript:void(0);" onclick="loadLanguage('en-GB');">English</a> | <a href="javascript:void(0);" onclick="loadLanguage('tr-TR');">Turkish</a>
        </div>

    </body>
</html>

What would happen really, is when you call loadLanguage, you would then use Ajax to call your PHP and return something that would resemble the resources variable i've created. Once this is done, you'd then call populateLanguage which would then go through all the elements and update the text.

When adding new data, you could either call populateLanguage again with the currentLanguage variable, or simply use getResource with the id of the element (pre-defined) and it would pull back the value depending on the current selected language.

It seems complicated, but its actually very easy.

User Tag List

Thread: AJAX and single label

Thread Tools

Display

AJAX and single label

Bookmarks

Bookmarks

Posting Permissions