Discussions
Using localization in jQuery functions
Hi,
is it possible to use localization in jQuery functions?
Example: I have a localization file (localization.de-at.json):
{
"ExpandAll":"Alle ausklappen",
"CollapseAll":"Alle einklappen"
}
I want to use the dnnExpandAll jQuery plugin like this:
$("#DemoPanel .dnnFormExpandContent a").dnnExpandAll({
targetArea: "#DemoPanel",
expandText: "{{Localization.ExpandAll}}",
collapseText: "{{Localization..CollapseAll}}"
});
But this does not work. How do I achieve this?
Sorry, should be
$("#DemoPanel .dnnFormExpandContent a").dnnExpandAll({
targetArea: "#DemoPanel",
expandText: "{{Localization.ExpandAll}}",
collapseText: "{{Localization.CollapseAll}}"
});
But does not work either...
There are several options.
A. You can create a JS variable in your hbs or cshtml file and use those
B. Add data-attributes in your HTML and read those from your JS
Do you have an example?
Hmm, maybe I don't understand your question correctly.
Is the code you use to instantiate the jQuery plugin in a hbs / cshtml file or a separate js file?
In a separate JS file (template.js)
Well, the tokens are not supported in the JS file only in a HBS or CSHTML file.
So you set a variable in the HBS file as in this example I just created:
https://github.com/40fingers/OpenContent-Demo-Templates/tree/main/08.03-ML-Localization-Variables
And you can then just use that in your js file.
I hope it's clear?
Thanks, that did the trick...
Here is my template.hbs now:
<div class="dnnForm" id="DemoPanel">
<div class="dnnFormExpandContent dnnRight"><a href="">{{Localization.ExpandAll}}</a></div>
<div class="dnnClear"></div>
{{#each Items}}
<h2 id="PanelItem-{{@index}}" class="dnnFormSectionHead"><a href="#">{{Title}}</a></h2>
<fieldset class="dnnClear">
<p>{{Text}}</p>
</fieldset>
{{/each}}
</div>
<script>
jQuery(function ($) {
var setupModule = function () {
$("#DemoPanel").dnnPanels();
$("#DemoPanel .dnnFormExpandContent a").dnnExpandAll({
targetArea: "#DemoPanel",
expandText: "{{Localization.ExpandAll}}",
collapseText: "{{Localization.CollapseAll}}"
});
};
setupModule();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
// note that this will fire when _any_ UpdatePanel is triggered,
// which may or may not cause an issue
setupModule();
});
});
</script>
ο»Ώ