Introduction

This tip/trick will help you to reach the buttons inside one jQuery UI modal popup dialog and change its text.

Background

Currently I am working in a multi lingual project, so we need to translate every component present in one webpage according to the user’s language. During the development, I came across one issue, where the button text inside the jQuery modal popup dialog needed to be translated dynamically. To achieve this, I found out a way which is explained below.

Resolving this issue  is very simple  We just need to follow the steps written below.

Capture the button control (the text of which you need to translate) by the class name of dialog and add one id to that button control.
Assign the text to that button’s html attribute by selecting it by its id, which we have just provided in the above step.
Before executing these steps, we need to look at the html, which is rendered for the buttons inside the modal for better and clear understanding.

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">

<div class="ui-dialog-buttonset">
<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-butto n-text-only" role="button" aria-disabled="false">
Cancel</button>
<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-butto n-text-only" role="button" aria-disabled="false">
Delete this document</button>
    </div>
</div>

 So, we can see that the div, which contains the buttons inside it, has a class ui-dialog-buttonpane.

Now lets go step by step to achieve our goal.

Capture the button control (the text of which you need to translate) by the class name of dialog and add one id to that button control.

$('.ui-dialog-buttonpane button:contains(Cancel)').attr("id", "dialog-confirm_cancel-button");

Here we are contructing one selector by using that class ui-dialog-buttonpane. So, we selected the div which contains all the buttons. Now we select the button control which contains the text “Cancel” (means “Cancel” button).
After that we added one attribute id  to the button as dialog-confirm_cancel-button.

Assign the text to that button’s html attribute by selecting it by its id, which we have just provided in the above step.

$('#dialog-confirm_cancel-button').html("Translated Cancel Button Text");

As we have the id of the button, so directly select that button by id and assign text to its html attribute.

The total code, for the two buttons, is as follows.

// For Cancel button

$('.ui-dialog-buttonpane button:contains(Cancel)').attr("id", "dialog-confirm_cancel-button");

$('#dialog-confirm_cancel-button').html("Translated Cancel Button Text");

// For Delete this document Button
$('.ui-dialog-buttonpane button:contains(Delete this document)').attr("id", "dialog-confirm_delete-button");

$('#dialog-confirm_delete-button').html("Translated Delete This Document Button Text");

Note: This will be supported across all browsers as we are doing the task in jQuery by directly considering the rendered html of the page.