Translation issues

I'm encountering the following translation issues whereby the normal approach does not apply as follows:

1) A button has the text "Terms & Conditions", when I test the App, the button disappeared. After that I check the properties for the button and I found it has changed by itselft as follows:



The text "Terms & Conditions" has been somehow split into two rows (new property has been added - was only one)

2) The selectMenu items and title, I could not translate them by simply adding {data-i18n : Feedback Category) to "more properties", where "Feedback Category" is the text shows on the select meue. I need to translate this text and all items in the list

I deeply appreciate your help and guidance.
1 person has
this question
+1
This topic is no longer open for comments or replies.
  • 1
    Hi Hawk,

    seems like the properties don't like the "&", I wouldn't use any special characters at all. Try with Terms_Conditions or something similar, I usually use screenName_textDescription, i.e. StartScreen_LoginButton.

    As for the selectMenu items and titles you need to define in the properties which exact component needs to be translated. So you have to add "data-i18n-target" and the appropriate class where you want to change the label. This can be tricky sometimes, I used the inspect element tool from Firebug to find out which is the correct class.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated

  • Hawk,

    Sam is absolutely right, very sage advice.
    Sam, thank you for the update.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated

  • Hi

    For & I juse removed it from the original text and added it to the translated text. For example

    "Terms and Conditions":"Terms & Conditions",


    And it works.

    As for selectMenu, unfortunately, I could translate them. I used Firebug as Sam indicated as follows:



    But yet I could not use the classes names properly, this is one of my attempts:



    It did not translate. Please advise!

    Thank you for your help.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated

  • Probably you have to do this with JavaScript code, I don't have a selectMenu in my app, so I am not sure how to achieve that. But I found this link with a quick google search, maybe it is useful for you.

    https://github.com/jquery/jquery-mobi...

    There is a link to an example.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated

  • Hi Hawk,

    Please specify what exactly you want to translate it select component?

    If you want translate options, how do you change attributes for each option?

    Your implementation screen shots with descriptions will help.

    Regards.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated

  • Hi Yurri,

    That's my question, if all the options have the same attribute (data-i18n), how to relate to each one separately. And yes, I want to translate the button AND the options.

    Basically, the entire selectMenu needs to be translated. In the tarditional way, I add to "more proprties" the attribute (data-i18n) and the value same as the text appears on the button/label. However, here there is no (more properties) for each option separatly. Rather, the entire selectMenu have the same (more properties).

    So how to translate the button and the options of selectMenu?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated

  • Hawk,

    Yes, that's what is messed up..

    So problem is - builder not allows you to add attributes to certain options.

    But, you can add all these options(with needed attributes) with JS.

    Here is a solution:

    1. Add page load event handler.

    2 Populate it with following JS:



    var select = Apperyio("mobileselectmenu_240");

    //Delete all previous options
    select.html("")

    //Note you should fill these options with your values.
    var options = [
    {view: "view1", value: "value1", translationKey: "optionToTranslate1"},
    {view: "view2", value: "value2", translationKey: "optionToTranslate2"}
    ];

    for(var i = 0; i < options.length; i++){
    var option = jQuery('');
    option.html(options[i].view);
    option.attr("value", options[i].value);
    option.attr("data-i18n", options[i].translationKey);
    select.append(option);
    };

    //I18-n part.
    var browserLanguage = "en-US"; //Get the browser or device language

    var option = {lng: browserLanguage, resGetPath: 'locales/__lng__/__ns__.json', fallbackLng: 'en-US'}; //Pass the initialization language,
    //set the translation files path and fallback language

    $.i18n.init(option, function(t) {
    $(document).i18n(); //Once the translations are loaded translate the whole document

    //Refresh select after update langueage.
    select.selectmenu("refresh", true);
    });



    Regards.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated

  • Thank you Yurri,

    I've used the following on page load:


    var select = Apperyio("mobileselectmenu_279");
    //Delete all previous options
    select.html("");
    //Note you should fill these options with your values.
    var options = [
    {view: "view1", value: "Feedback Category", translationKey: "optionToTranslate1"},
    {view: "view2", value: "JTI Partner Program", translationKey: "optionToTranslate2"},
    {view: "view3", value: "JTI Product Launch", translationKey: "optionToTranslate3"},
    {view: "view4", value: "JTI Salesman Performance", translationKey: "optionToTranslate4"},
    {view: "view5", value: "Others", translationKey: "optionToTranslate5"},
    ];
    for(var i = 0; i < options.length; i++){
    var option = jQuery('');
    option.html(options[i].view);
    option.attr("value", options[i].value);
    option.attr("data-i18n", options[i].translationKey);
    select.append(option);
    }
    //I18-n part.
    var browserLanguage = "en-US"; //Get the browser or device language
    var option = {lng: browserLanguage, resGetPath: 'locales/__lng__/__ns__.json', fallbackLng: 'en-US'}; //Pass the initialization language,
    //set the translation files path and fallback language
    $.i18n.init(option, function(t) {
    $(document).i18n(); //Once the translations are loaded translate the whole document
    //Refresh select after update langueage.
    select.selectmenu("refresh", true);
    });


    I'm not sure if I'm fully understand this part:

    var options = [
    {view: "view1", value: "Feedback Category", translationKey: "optionToTranslate1"},
    {view: "view2", value: "JTI Partner Program", translationKey: "optionToTranslate2"},
    {view: "view3", value: "JTI Product Launch", translationKey: "optionToTranslate3"},
    {view: "view4", value: "JTI Salesman Performance", translationKey: "optionToTranslate4"},
    {view: "view5", value: "Others", translationKey: "optionToTranslate5"},
    ];


    To my understanding, view is just like a tag, value, is the text shown on each option and translationKey is the one I should use in JSON file, for example to translate into Chinese:
     "optionToTranslate1":"回馈类别", 


    Is that correct? I tried that but the menu does not show at all when I click on it.
    Note that I'm using 3 languages, the default is English and another two languages to translate to.

    Many thanks for your help!
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated

  • Hi Hawk,

    I'm so sorry, GS clear some part of code.



    var option = jQuery('');



    should be replaced with:



    var option = jQuery('<option></option>');



    In general - you have correct understanding for this solution.

    Regards.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated