Pseudo-multilanguage not working on Chrome

Question

I have a "pseudo-multilanguage" site/blog hosted on Tumblr (so I don't have access to server-side programming) based on the solution of this stack.

<script>

var defaultLanguage = 'pt';

$.ajax({

    url: "//ajaxhttpheaders.appspot.com",

    dataType: 'jsonp',

    success: function( headers ) {

        var language = headers['Accept-Language'].substring( 0, 2 );

        if( language != defaultLanguage ) {

            $( 'span[lang="pt"], p[lang="pt"]' ).hide( 0 );
            $( 'span[lang="' + language + '"], p[lang="' + language + '"]' ).show( 0 );

        }
    }
});

</script>

Very, very simple. I translate manually all the content in every post (phew!) and then I hide based upon the AJAX Request.

When I found it I was testing on Mozilla Firefox and it was working like a charm. Then I was forced to move to Google Chrome for other reasons and then the implementation didn't work anymore.

Is there a way I can force this code to overwrite whatever is up in Chrome's settings or, considering I'm using Tumblr, offer those little flags to the user change it in runtime?

Can you link to the site? Does Chrome return any errors in the console? — lharby, Oct 27 '16 at 08:08
Hmmm, it is showing for me with lang="en" in both Chrome and Firefox, but maybe that is not the issue. I added Portuguese to my language options in Firefox and it is showing both spans. I also did this in Chrome, but had to add Portogeuse and drag it to the top of the preferences, then both languages show in your tumblr. Not sure how to actually mimic it for a person with only one language setting. — lharby, Oct 31 '16 at 11:32
Hi yes it should be possible, I need to do some tests and will see if I can come up with the code. — lharby, Oct 31 '16 at 19:28

lharby · Answer 1 · 2016-11-01T11:26:07.377

Untested, but I think you can do this:

var defaultLanguage = 'pt';
$.ajax({
    url: "//ajaxhttpheaders.appspot.com",
    dataType: 'jsonp',
    success: function( headers ) {
        var language = headers['Accept-Language'].substring( 0, 2 );
        if( language != defaultLanguage ) {
            $('[lang="pt"]').hide(0);
        }else{
            $('[lang="' + language + '"]').show(0);
        }
    }
});

You only have to pass [lang] as an attribute selector once (we don't need to add both span and paragraph, as this should retrieve any element which matches the selector).

Pseudo-multilanguage not working on Chrome

1 Answers1