Localizing JQuery Dialog Button

• Download sample - 7.1 KB

Introduction

JQuery dialog box provides a way for the developers/designers to show useful information to the application users. Information to be shown in dialog is the content within DIV element. Content within the DIV can change based on the culture info. But, how do we change the text within the dialog buttons. This tip provides one of the ways to do it.

Using the Code

Value for the OK button is retrieved from the resource file and stored in a hidden variable.

<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Click" />
<asp:HiddenField ID="lblOK" runat="server" Value="<%$ Resources:Resource, OK %>">
</asp:HiddenField>
</div>
<div id="dialog">
Some information to the user through dialog
</div>
</form>

Text value of the button is initialized with the value of lblOK hidden variable.

<script language="javascript">
$(document).ready(function () {
okValue = $('#<%=lblOK.ClientID%>').val();
var $dialog = $('#dialog').dialog({ autoOpen: false, title: 'My Dialog', buttons: [
{
 text: okValue,
 click: function () { $(this).dialog("close"); }
}
]
});

$('#<%=Button1.ClientID%>').click(function () {
$dialog.dialog('open');
return false;
});
});
</script>

Points of Interest

This is just one of the ways of doing it. There could be multiple ways to do it and I would be interested in knowing any other way.