What is the best way to show translated messages using i18next when displaying JavaScript alerts?

We are in the process of developing an application that makes use of html/css/js, incorporating i18next for displaying translated strings.

To display these translations, I insert an attribute within a tag. Here's an example:

<a href="#top" id="agreement" data-i18n="text_agreement">利用規約</a><label for="checkbox2" data-i18n="text_agree">に同意する</label>

Along with this, the application utilizes a javascript file to replace strings with translations. For example, the code above corresponds to:

en: { translation: {
text_agreement: 'Agree to EULA'
} }

While this method of translation works for HTML tags, I am unsure how to translate strings within the js code. How would I display translated strings for something like this?

element.alert('なまえを記入してください。');

Any assistance with this matter would be greatly appreciated.

javascriptiphoneiosi18next

Answer №1

By utilizing the initialization function, you are provided with a tool to translate your strings. ;)

Take advantage of 'putting' this function onto the window object, enabling you to access it throughout your code.

i18n.init(function(t) { 
  window.t = t("Insert your string here");
});
// ... additional code
// Utilize window.t for translations
element.alert(window.t('Insert your string'));

It's important to keep in mind that this process is asynchronous, so there may be instances where the console indicates that t() is undefined.

Ensure that i18next is initialized before using window.t();

For further information, refer to the documentation:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Form Automatically Submits Data Upon Loading of Page

I am currently facing an issue with my hidden div that is being loaded when I click the submit button. The form is sending results upon page load, and even though I have included the validateForm() function and called it at the end of the submit function ...

javascriptphpjqueryforms

The returned error object from express does not include the error message

I recently posted a question related to an error issue. I am now wondering if I should have edited that question instead. Regarding the code snippet below: app.use((err, req, res, next) => { res.status(err.status || 500); res.json({ message: e ...

javascriptnode.jsexpressecmascript-6

Utilizing Swift's Shared Instance Pattern in Objective-C

I am encountering an issue with my shared instance of a Swift class being used in Objective-C. Despite declaring and using the shared instance, I am unable to access the instance function as expected. class VideoPlayerSignaler: NSObject { static let s ...

iosobjective-cswift

Selecting Content Dynamically with jQuery

I have a webpage with multiple dynamic content sections. <div id="content-1"> <div id="subcontent-1"></div> <i id="delete-1"></i> </div> . . . <div id="content-10"> <div id="subcontent-10"></d ...

javascriptphpjqueryhtml

No elements present in TypeScript's empty set

Question for discussion: Can a type be designed in TypeScript to represent the concept of an empty set? I have experimented with defining one using union, disjoint union, intersection, and other methods... ...

javascripttypescriptfunctional-programming

How to insert an element INTO a JSON array using JavaScript

I'm having an issue with the way a line is displayed on my screen: Would you like to pay €xx to POS_ID Latte X 1....€2.50-Salad X 1....€4.00-Wrap X 1....€4.50-Coffee X 2....€3.00- My desired format is as follows: Would you like to pay ...

javascriptjsonparsingsplicestringify

Refresh the current page with jQuery Mobile when it is clicked

I have a multi page template in jQuery Mobile. How can I refresh the current page when clicking on a hyperlink or button? I am using JQM version 1.4.5 Despite trying the code suggested in how to refresh(reload) page when click button in jQuery Mobile, it ...

javascriptjqueryhtmlcssjquery-mobile

What is the best way to serve individual static files in Express without revealing the entire "/static" directory?

For my new project, I am working on a simple setup that involves using JWT for authorization. The project is being served entirely through express, with no separation between frontend and backend. My goal is to dynamically serve specific HTML files based o ...

javascriptnode.jsexpresswebbackend

Take a custom action once all elements have been rendered with ng-repeat

Looking to manipulate a DIV element generated by ng-repeat: <div ng-repeat="data in info" > <div id='plot_{{data.id}}'></div> </div> Here is the sequence of events: Information added to $scope.info ng-repeat exec ...

javascriptangularjs

HTML: Base64 image not displaying properly due to incorrect height specification

I have a straightforward base64 image that I am having trouble with. The issue is that only the upper half of the image is displaying. If I try to adjust the height using the "style" attribute in the img tag: style="height: 300px;" it shows correctly. Ho ...

javascripthtmlcssimagesvg

Generating identical circles using PointsMaterial and CircleGeometry

My goal is to generate circles using two different methods: By utilizing a circle sprite and drawing it with Points and PointsMaterial Using basic circle buffer geometries Unfortunately, I am facing challenges trying to align them due to the size discrep ...

javascriptthree.js

Converting PHP date format to JavaScript date format

I'm struggling to solve this problem $datetime = new Date().toLocaleString(); // returns current date in format 10/21/2021, 14:29:43 How can I generate the desired date format using JavaScript? The output should look like this: 2021-10-21 16:30:01 ...

javascriptphp

Error Encountered in Reactjs: TypeError When Looping Through State Array to Render JSX Component

Currently in the process of constructing a gallery view showcasing cards that are populated with images fetched through an axios API call. The API call is made within a useEffect hook and the resulting object is then stored using useState. However, when ...

javascriptreactjsarraysreact-hookstypeerror

Troubleshooting Google Authorization Issue in Angular 17: How to Fix the Error TS2304: 'google' Not Found in Angular 17

I am encountering an issue while attempting to integrate Google Auth into my Angular(+Express) application using the Google Identity Services library. Despite following the instructions provided in the Google tutorial, I am facing the error: "[ERROR] TS230 ...

javascripttypescriptgoogle-apigoogle-oauthangular17

What steps can I take to stop my browser from displaying the "waiting for MyHostName" message while performing an ajax Post/Get operation?

Whenever I access a website using Chrome, a message appears in the status bar saying "Waiting for MyHost name" along with an Ajax Loader circle in the browser tab. Here is a javascript function that I am working with: function listen_backend_client_reques ...

javascripthtmlajaxbrowsergoogle-chrome

Incentivizing users to download additional games

I'm a developer with several games available on the iOS app store. I'm looking for a way to offer users free game coins when they download one of my games without having to set up a server. If setting up a server is necessary, what is the most ef ...

iphoneiosreward-system

JQuery Mobile Navigation with Bootstrap 3 Sidebar on the Go

While using RoR, I encountered a baffling issue. I have created a new navbar with a sidebar that only displays on mobile and not on desktop. The Turbolink is functioning properly. <%= javascript_include_tag 'application', 'data-turboli ...

javascriptjqueryhtmlruby-on-railsturbolinks

Develop an HTML table using either JSON or jQuery in Javascript

JavaScript is a bit of a mystery to me right now - I could really use some assistance in overcoming this obstacle that has me pulling my hair out! I'm struggling with constructing HTML code using JSON data. It's just not clicking for me at the m ...

javascriptjqueryjson

Is there a way to use HTML and CSS to switch the style of a dynamic decimal number to either Roman numerals or Katakana characters within a specified HTML element, such as a tag, div

I've searched everywhere but only found guides on list styling and counter styling in CSS that didn't work out. So, for example, I have a number inside an HTML tag that is changed dynamically using Vue Watch. I want to display the number in upper ...

javascripthtmlcssvue.js

Webstorm 2016.1 encountering difficulties accessing JavaScript files

Recently, I upgraded my Webstorm to version 2016.1.1 and everything seemed to be working well. However, I encountered an issue where I can't open any of my *.js files in the editor. Despite restarting Webstorm and my computer multiple times, as well a ...

javascriptangularjswebstormjetbrains-ide