Discussions

Ask a Question
Back to All

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...

Admin

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?

Admin

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)

Admin

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>

ο»Ώ