Buttons, on the other hand, are usually manipulated by JavaScript events so they can trigger certain functionality. Links take you to a certain part of the page, another page of the website, or another website entirely. 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.Whenever you visit a website, you'll probably click on something like a link or button. $('#dialog-confirm_delete-button').html('Translated Delete This Document Button Text') $('.ui-dialog-buttonpane button:contains(Delete this document)').attr('id', 'dialog-confirm_delete-button') $('#dialog-confirm_cancel-button').html('Translated Cancel Button Text') $('.ui-dialog-buttonpane button:contains(Cancel)').attr('id', 'dialog-confirm_cancel-button') The total code, for the two buttons, is as follows. $('#dialog-confirm_cancel-button').html('Translated Cancel Button Text') Īs we have the id of the button, so directly select that button by id and assign text to its html attribute. Now we select the button control which contains the text “Cancel” (means “Cancel” button).Īfter that we added one attribute id to the button as dialog-confirm_cancel-button.Īssign the text to that button’s html attribute by selecting it by its id, which we have just provided in the above step.

So, we selected the div which contains all the buttons. Here we are contructing one selector by using that class ui-dialog-buttonpane. Now lets go step by step to achieve our goal.Ĭapture 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. So, we can see that the div, which contains the buttons inside it, has a class ui-dialog-buttonpane. Resolving this issue is very simple We just need to follow the steps written below.Ĭapture 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.Īssign the text to that button’s html attribute by selecting it by its id, which we have just provided in the above step.īefore executing these steps, we need to look at the html, which is rendered for the buttons inside the modal for better and clear understanding. To achieve this, I found out a way which is explained below. During the development, I came across one issue, where the button text inside the jQuery modal popup dialog needed to be translated dynamically. This tip/trick will help you to reach the buttons inside one jQuery UI modal popup dialog and change its text.Ĭurrently 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.

Js set button text dynamically