Translate string in javascript

Question

There is a string which gets displayed in the mobile menu.

var arrowimages = {
down: 'downarrowclass',
right: 'rightarrowclass'
}, $mainNav = $('#navigation'), $mainList  = $mainNav.find('ul').eq(0), optionsList = '<option value="" selected>Navigate...</option>', $submenu = $mainList.find("ul").parent();

I want to make this string translatable using t() function. So edited the JS file like this:

var arrowimages = {
down: 'downarrowclass',
right: 'rightarrowclass'
}, $mainNav = $('#navigation'), $mainList  = $mainNav.find('ul').eq(0), optionsList = '<option value="" selected>'.t('Navigate...').'</option>', $submenu = $mainList.find("ul").parent();

After that the string was available for translation but the menu option was missing from the mobile view. Is there any solution for this? Or am I doing any mistake?

Answer 1

I'm not sure about you question, but for translating string in JavaScript you should use Drupal.t() function.

So you code should looks like:

var arrowimages = {
  down: 'downarrowclass',
  right: 'rightarrowclass'
};
var $mainNav = $('#navigation');
var $mainList = $mainNav.find('ul').eq(0);
var optionsList = '<option value="" selected>' + Drupal.t('Navigate...') + '</option>';
var $submenu = $mainList.find('ul').parent();

You can read more here: https://www.drupal.org/node/323109

Answer 2

t() is a PHP function. You are looking for Drupal.t() which is the equivalent function Drupal makes available for JavaScript.

These are some example of how Drupal.t() and Drupal.formatPlural() can be used in JavaScript.

var comments = Drupal.t('Comments');
var commentsOnType = Drupal.t('Comments to @type posts', {'@type': typeName});
var commentCount = Drupal.formatPlural(count, '1 comment', '@count comments');
var commentCountOnType = Drupal.formatPlural(count, '1 comment on @type posts', '@count comments on @type posts', {'@type': typeName});

Notice what reported in Translating strings in JavaScript:

• For performance reasons, Drupal caches the JavaScript files it has parsed. So, when you add or change strings in a JavaScript file, you have to clear the cache to have Drupal pick up the new strings and make them available for translation.
• Automatic extraction does not work for packed JavaScript files. For this reason, module authors should only include unpacked versions of their JavaScript files. Drupal's JavaScript aggregator will create a packed version from these files anyway.

Just replace t() with Drupal.t(), and you are done.

var arrowimages = {
down: 'downarrowclass',
right: 'rightarrowclass'
};
var $mainNav = $('#navigation');
var $mainList = $mainNav.find('ul').eq(0);
var  optionsList = '<option value="" selected>'+ Drupal.t('Navigate...') + '</option>',
  $submenu = $mainList.find("ul").parent();

Your code also contains a syntax error: . is not the string concatenation operator, in JavaScript; JavaScript uses +, for that purpose.