CODEWITHSUNDEEP
jqueryjquery-ui
Bronzato
Bronzato

Reputation: 9332

Changing my jquery dialog button text when dialog loads

I have an ordinary jquery dialog like this:

<div id="dialog-confirm" title="Empty the recycle bin?">
   <p>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

<script>
    $(function(){
        $('#dialog-confirm').dialog({
            resizable: false,
            height: 140,
            modal: true,
            buttons:
                {
                    "Delete all items": function() { $(this).dialog('close'); },
                    "Cancel": function() { $(this).dialog('close'); }
                }
        });
    })
</script>

Sometimes I need to change the text buttons (if user language is french for example). In this case, when the jquery dialog is loaded I would like to adjust buttons. Is it possible?

Thanks

Upvotes: 2

Views: 3808

Answers (3)

j08691
j08691

Reputation: 207861

Here's a quick example. Basically you can just change the buttons at any point using the dialog object's option method.

jsFiddle example.

jQuery

$(".selector").dialog({
    autoOpen: true,
    buttons: [
        {
        text: "Ok",
        click: function() {
            $(this).dialog("close");
        }}
    ]
});
$('button').click(function() {
    $('.selector').dialog("option", "buttons", [
        {
        text: "Changed!",
        click: function() {
            $(this).dialog("close");
        }}
    ]);
});​

HTML

<div class="selector">Hello world</div>
<button>Change text</button>​

Upvotes: 0

Siva Charan
Siva Charan

Reputation: 18064

Do this way for translation of button text dynamically:-

dynamicBtnHandler("Supprimer tous les éléments", "Cancel");

function dynamicBtnHandler(btn1, btn2)
{
    var btnNames = {};
    btnNames[btn1] = function(){ $(this).dialog('close'); };
    btnNames[btn2] = function(){ $(this).dialog('close'); };
    $(function(){

        $('#dialog-confirm').dialog({
            resizable: false,
            height: 140,
            modal: true,
            buttons: btnNames
        });
    })
}

Refer my LIVE DEMO ​

Upvotes: 3

Erpheus
Erpheus

Reputation: 826

Well, I think there are two solutions.

1.If you are including this code in your html file and it is being parsed by php or rails or asp and the server happens to know the language of the page, you could just put a variable or items of a hash to replace just the code inside dialog()

in php it would be something like

[...]$(this).dialog('<?= $close_in_user_language ?>')[...]

but if you don't know the user language on the server side or you dont parse the file with that piece of code I would suggest creating a global javascript variable (or better a hash table) wich gets filled up when the page loads with anything you want in the user language. Something like this

These items will be permanently deleted and cannot be recovered. Are you sure?

<script>
  /* This code would have to be at the begining of your page with something
     that sets the variables correctly acording to the user language. 
     In this case I'm using spanish for demonstration porpuses*/

  var close_in_user_language="cerrar"
  var translation_table={"close":"cerrar"};

 /* With this implementation you can also change the language on the fly */

  $(function(){
    $('#dialog-confirm').dialog({
        resizable: false,
        height: 140,
        modal: true,
        buttons:
            {
                "Delete all items": function() { $(this).dialog( close_in_user_language ); },
                "Cancel": function() { $(this).dialog(translation_table["close"]); }
            }
    });
})
</script>

Personally I would recommend you to place translation files on your server written in json that just get assigned to the hash table

Upvotes: 1

Related Questions