How to set DIV Text from Resource File in JavaScript?

Question

I have an ASP.NET that uses localization with Resources file RESX and I have a JavaScript function that shows a message in a DIV element based on the current site language using fancybox as below

<a href="#divID" id="btnForm">open fancy box</a>

<div id="divID" style="display:none">
 HERE,  I need t show a text based on a resource file
</div>

<script type="text/javascript">
$(function() {
    $("#btnForm").fancybox({
        'onStart': function() { $("#divID").css("display","block"); },            
        'onClosed': function() { $("#divID").css("display","none"); }
    });
});
</script>

I need to show the DIV text from a resource file, How can I replace DIV Text with a resource key from resource file resx using JavaScript or JQuery?

Answer 1

1) Replacing DIV text from Resources File.resx

You can easily use a key from the Resource file in your DIV element by using <%$Resources:ResourceFile Name,Resource Key%>.

In your case, you should use asp:Literal control to display a text from Resource File (resx) as below

<div id="divID" style="display:none">
 <asp:Literal runat="server" Text="<%$Resources:ResourceFile,Key%>" />
</div>

2) Replacing DIV content from Resources File.resx using JavaScript

The above solution will embed the resource entry to your code. However, if you need to set the DIV content with a Resource using JavaScript, you can use the below code:

document.getElementById("divID").innerHTML = '<asp:Literal runat="server" Text="<%$Resources:ResourceFile,Key%>" />';

Make sure the resource file name is correct and already provided the correct resource entry key.