Changing my jquery dialog button text when dialog loads

Question

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

Are you using any type of server side language (php, asp, etc)? If so, you could generate the button names based on whatever is detecting the language — J_D
– J_D, Commented Mar 7, 2012 at 20:04
I use ASP.NET MVC. I can easily detect the language (that's not my question) but how can I adjust button text? How to replace "Delete all items" by "Supprimer tous les éléments" on dialog load ? — Bronzato
– Bronzato, Commented Mar 7, 2012 at 20:07
@Bronzato Try the ASP.NET i18n guide: wiki.asp.net/page.aspx/55/internationalization — kitti
– kitti, Commented Mar 7, 2012 at 20:09

Siva Charan · Accepted Answer · 2012-03-07 20:23:32Z

3

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

answered Mar 7, 2012 at 20:23

Siva Charan

18.1k10 gold badges64 silver badges95 bronze badges

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

Comments

Erpheus · Accepted Answer · 2012-03-07 20:19:31Z

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

j08691 · Accepted Answer · 2012-03-07 20:26:54Z

0

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>

answered Mar 7, 2012 at 20:26

j08691

208k33 gold badges269 silver badges281 bronze badges

Collectives™ on Stack Overflow

Changing my jquery dialog button text when dialog loads

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related