Question

I have the following problem.
To translate a website, I’m using the jQuery Localize plugin.
This works fine. However, I want a CSS styled selectbox with flags and languages, and when a different option is selected the call to $("[data-localize]").localize("example", { language: $(this).attr('value') should be made to translate the page.

This code I’m currenly using, and it works fine for a plain, not-styled selectbox.

<script type="text/javascript">
    $(function() {
        $('#polyglot-language-options').change(function() {
            if ($(this).attr('value') == "en") {
                $("[data-localize]").localize("example", {
                    language: $(this).attr('value')
                });
            }
            else if ($(this).attr('value') == "nl") {
                location.reload();
            }
        });
    });
</script>

But I want to style it, so I tried to integrate the “polyglot” language switcher. However, the current code doesn’t work.

How can I integrate the $(“[data.localize]”).localize(); function in this code:

$('#polyglotLanguageSwitcher').polyglotLanguageSwitcher({
    effect: 'fade'
});

Answer 1

This plugin (source code) does not follow the guidelines for jQuery plugin design. The bugs I found quickly:

• It does not allow chaining, because it does not return this

• It works only on one element at a time (does not use each())

• It has a queer element hierarchy. It seems to require an element with an id, containing a form containing a select (as in the demo). In my opinion, such a plugin should be called on the language select element only.

• It seems to navigate automatically, wanting to be configured with the page structure. Each of the li items in that fancy box contains a link to the respective page.
• Therefore, it does neither trigger the form it live in or fire the change event you want to listen to.

As it stands, you can’t use this particular plugin as you want to. If you want to fix all the bugs, I wish you a happy time 🙂 Nonetheless it might be possible to manipulate the plugin code, to let you register callbacks on select events (where you can invoke the localisation plugin). Otherwise, you will need to choose an other select plugin (or build one yourself from scratch, adapting the existing code)