Issue with [prepend] and [append] attributes

[bhaskerchari]

Hi @jamuhl ,

I noticed that there is an issue with prepend and append attributes. Each and every time the language is switched it is prepending or appending the same content again and again.

For ex:
<div data-i18n="[prepend]information"> is wealth.</div>

Suppose if my app is supporting 2 languages English and German then each time I change the language it is prepending the same text in the chosen language each time I change the language.

Actual Output (Switched the language from English to German 4 times):
GE - Information. Information GE - Information. Information GE - Information is Wealth

Expected Output:

GE - Information is Wealth. (If language chosen is German)
Information is Wealth. (If language chosen is German)

I actually took a look at the source code and for prepend and append in jquery-i18next.js line no: 67 and I found that it doesn't have any intelligence of finding the already prepended/appended element and then just localize it but instead each time it actually prepends or appends to the element content which is actually causing the issue.

[bhaskerchari]

I have made few changes in jquery-i18next.js starting line no: 67 in my local to fix this:

Old Code:
else if (attr === 'prepend') { ele.prepend(i18next.t(key, extendDefault(opts, ele.html()))); }

New Code:

else if (attr === 'prepend') { if (ele.find("#" + key).length > 0) { ele.find("#" + key).html(i18next.t(key, extendDefault(opts, ele.html()))); } else { ele.prepend("<span id=" + key.split(" ").join("") + ">" + i18next.t(key, extendDefault(opts, ele.html())) + "</span>"); } }

Can you please suggest if this is a valid fix or do you have any other proper fix or suggestions?

Thanks,
Bhasker

[jamuhl]

seems valid. If you like you can provide a PR changing both prepend and append.

[bhaskerchari]

Hi @jamuhl ,

Sorry I cannot raise a PR as I don't have access to git installed on my pc at office due to securoty reasons and even I cannot clone git repo due to network proxy.

May be you can please go ahead and make the necessary changes as suggested for prepend and append attributes. Hope it is fine.

Thanks,
Bhasker

[jamuhl]

published jquery-i18next@1.0.0

[bhaskerchari]

cool thanks 👍

[bhaskerchari]

Hi @jamuhl,

There seems to be a small glitch in the fix as I am not trimming the spaces in the key when I am actually trying to find the element but I did so when I am actually assigning the id which could cause the problem.

PF link of screenshot for the changes required for the same and I am also adding the code changes below for the full function parse starting line no: 43.

function parse(ele, key, opts) {
            if (key.length === 0) return;

            var attr = 'text';
            // Removing any spaces in key for valid id
            var trimmedKey = key.split(' ').join('');

            if (key.indexOf('[') === 0) {
                var parts = key.split(']');
                key = parts[1];
                attr = parts[0].substr(1, parts[0].length - 1);
            }

            if (key.indexOf(';') === key.length - 1) {
                key = key.substr(0, key.length - 2);
            }

            function extendDefault(o, val) {
                if (!options.parseDefaultValueFromContent) return o;
                return babelHelpers.extends({}, o, { defaultValue: val });
            }

            if (attr === 'html') {
                ele.html(i18next.t(key, extendDefault(opts, ele.html())));
            } else if (attr === 'text') {
                ele.text(i18next.t(key, extendDefault(opts, ele.text())));
            } else if (attr === 'prepend') {
                if (ele.find('#' + trimmedKey).length > 0) {
                    ele.find('#' + trimmedKey).html(i18next.t(key, extendDefault(opts, ele.html())));
                } else {
                    ele.prepend('<span id=' + trimmedKey + '>' + i18next.t(key, extendDefault(opts, ele.html())) + '</span>');
                }
            } else if (attr === 'append') {
                if (ele.find('#' + trimmedKey).length > 0) {
                    ele.find('#' + trimmedKey).html(i18next.t(key, extendDefault(opts, ele.html())));
                } else {
                    ele.append('<span id=' + trimmedKey + '>' + i18next.t(key, extendDefault(opts, ele.html())) + '</span>');
                }
            } else if (attr.indexOf('data-') === 0) {
                var dataAttr = attr.substr('data-'.length);
                var translated = i18next.t(key, extendDefault(opts, ele.data(dataAttr)));

                // we change into the data cache
                ele.data(dataAttr, translated);
                // we change into the dom
                ele.attr(attr, translated);
            } else {
                ele.attr(attr, i18next.t(key, extendDefault(opts, ele.attr(attr))));
            }
        }

May be you can move this fix once you publish the next version.

Thanks,
Bhasker

[jamuhl]

published jquery-i18next@1.0.1

[bhaskerchari]

Hi @jamuhl ,

The fix for that issue was to use the below lines of code:

Actually I found the issue the day after I posted the fix for this issue but was busy to post the fix here.

Please update the lines of code in jquery-i18next.js with below 2 lines of code(line no's : 47 and 48):

// Removing any spaces and any invalid special characters in key for valid html5 id

var trimmedKey = key.replace(/[^a-z0-9-_:.]|^[^a-z]+/gi, "");

Thanks,
Bhasker