How to use localize.js translation cross js files. e.g SweetAlert2.js

Localize gives us the Callbacks, but you also have to find the language user has choose in order to use the json file of the language you have to use.In order to do that go to the jquery.localize.js file and make global a variable at the top of of the file

var globallanguage;

After that go around 185 line where the below code exists and enter at "globallanguage" the input of "lang" variable.

lang = normaliseLang(options.language ? options.language : $.defaultLanguage);globallanguage=lang;

Now you have the user's choice saved in "globallanguage". Than you may go to any file you want and use the below code to retrieve the translation.

var message;var messagetitle;$("[data-localize]").localize("i18n/site",       { language: globallanguage, //taking from localize.jquery        callback: function(data, defaultCallback)         {message = data.alert.incidentalert.LEAVE;        defaultCallback(data);      }});$("[data-localize]").localize("i18n/site",       { language: globallanguage, //taking from localize.jquery        callback: function(data, defaultCallback)         {messagetitle = data.alert.incidentalert.LEAVEHEADER;        defaultCallback(data);      }});

And now you retrieved the message you want from the JSON file user has choose.
After that you may simple call the SweetAlert2 SWAL and display the message.

swal({          title : messagetitle,          text : message,          type : "warning",          showCancelButton : true,          confirmButtonColor : "#e54747",          confirmButtonText : button,          closeOnConfirm : false        }).then(function () { //function when Leave is pressed

It is not something super exciting, but it is very helpful to know that you can use SweetAlerts or any other JS librady, at any language you want...

Localization of the SweetAlert2 modal with jquery-localize is as simple as:

swal({  ...  onOpen: function(modal) {    $(modal).find("[data-localize]").localize("modal", {language: "fr"})  }});

Replace "fr" with the user language and that should be it.

To further expand on what Limon Monte said, this is the full implementation.

 swal({  onBeforeOpen: (modal) => {    $(modal).find("[data-localize]").localize("swal", {skipLanguage: /^en/, pathPrefix: "assets/js/i18n"})  },  title: '<span data-localize="dropshift.title">Drop Shift</span>',  html: '<span data-localize="dropshift.text">Are you sure you want to drop this shift?</span>',  type: 'warning',  showCancelButton: true,  confirmButtonColor: '#3085d6',  cancelButtonColor: '#d33',  confirmButtonText: '<span data-localize="dropshift.confirm">Yes, drop it!</span>',  cancelButtonText: '<span data-localize="dropshift.cancel">Cancel</span>'}).then((result) => {  if (result.value) {    $.ajax({        url: 'path/to/file/',        type: 'POST',        dataType: 'json',        data: {method: 'setDropShift',shiftid: shiftId},    })    .done(function() {        console.log("success")    })    .fail(function(e) {        console.log("error")    })    .always(function() {        console.log("complete")    })  }}).catch(swal.noop)

Then in my swal-fr.json

{  "dropshift": {  "title": "Abandonner Poste",  "text": "Êtes-vous sûr de vouloir abandonner ce poste?",  "confirm": "Oui, Abandonner!",  "cancel": "Annuler"  }}