Question

I want to use translations in my code, they are coming from PHP/MySql and are converted into an javascript array:

var translate = <?= json_encode($Object->translate);?>;

Translations are available in Javascript (tested).

Now, I want to use them in my Javascript code, by example Jquery UI dialog:

$("#logoff").click(function(){  
    var action = "logoff"; 
    var btnLogoff = translate["dialog/buttonLogoff"]; // this gives the translation from the array
    var btnCancel = translate["dialog/buttonCancel"]; // this gives the translation from the array
    $("#dialog").dialog(
        {
            title: translate["dialog/titleLogoff"],
            modal: true,
            resizable: false,
            buttons: {
                btnLogoff : function() {
                        var loadUrl = "includes/_ajax/actions.ajax.php";
                        $.post(loadUrl,{action:action}, function(data) {
                            if(data)
                                location.reload();
                        });
                        $( this ).dialog( "close" );
                },
                btnCancel: function() {
                        $( this ).dialog( "close" );
                }
            }
        }
    );
    $("#dialog").html("<span class='ui-icon ui-icon-alert' style='float: left; margin: 0 7px 20px 0;'></span>" + translate["dialog/textLogoff"]);    
});  

The problem is dat the property btnLogoff is not showing the translated text but instead shows itself (“btnLogoff”).

In the last section, translate[“dialog/textLogoff”] is translated like it is meant to be. I am clearly doin something wrong. Can I use the var as a property id? How?

Answer 1

I think you aren’t using the jQuery.dialog API fully. See http://api.jqueryui.com/dialog/#option-buttons

Have a try using the ‘text’ property of the buttons configuration:

$("#dialog").dialog(
    {
        title: translate["dialog/titleLogoff"],
        modal: true,
        resizable: false,
        buttons: [
            {
                text : btnLogoff,
                click : function() {
                    var loadUrl = "includes/_ajax/actions.ajax.php";
                    $.post(loadUrl,{action:action}, function(data) {
                        if(data)
                            location.reload();
                    });
                    $( this ).dialog( "close" );
                }
            }
            ,
            {
                text : btnCancel,
                click: function() {
                    $( this ).dialog( "close" );
                }
            }
        ]
    }
);