SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot maileen's Avatar
    Join Date
    Apr 2006
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question AJAX and single label

    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

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •