7

I want to use the jquery.localize.js (i18n json files) in another js file. Lets say sweetalerts2.

The localize provides translations in json files, according to the language you choose(EN,FR,GR).(https://github.com/coderifous/jquery-localize)

The Sweet Alert2 are sexy pop up alerts that, cannot been blocked from browser,like common alerts, and gives you a full set of choices in order to make them look user friendly.(https://limonte.github.io/sweetalert2/)

But the problem is how to make Sweet Alert popups to be translated according to the language a user has chose.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
vassilis ntovantzis
  • 342
  • 3
  • 14

3 Answers3

2

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

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
vassilis ntovantzis
  • 342
  • 3
  • 14
  • You can use local storage (to set and get the language) instead of modifying jquery.localize.js file. Still, need to be a global variable. – Adrian P. Jan 19 '19 at 22:36
0

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.

Limon Monte
  • 52,539
  • 45
  • 182
  • 213
  • 1) Congatulation for the SweetAlert2 it is a wonderful work. 2) It isn't working on my project but I don't have the time to fix it and since I have allready have a work around, I dont think I would. 3) Could you add your solution to your page in order to be an easy to find solution? 4)The main purpose was to generally use localize throught js files. your library was for example reasons, since a really liked it. Thanks for your response.. – vassilis ntovantzis Sep 20 '16 at 14:51
  • Trying to understand this. From where is it trying to read the `data-localize` attribute? and what do we put for `title`, `text` and `confirmButtonText` etc.? – dbinott Nov 26 '17 at 06:05
0

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"
  }
}
dbinott
  • 911
  • 1
  • 11
  • 36