Skip to content

Fix Language Selection does not work in IE11 and recent Serenity Frameworks

Victor Tomaili edited this page May 3, 2021 · 1 revision

Basic Building Blocks Series: Within the basic building blocks series over time I will add all the little things which someone who just starts with Serenity Framework would have to spend a lot of time figuring it out him/herself.

What you get with this article: Fixing the not working language selection in the right sidebar on recent Serenity Frameworks for IE11.

If you came here because you are still forced to support IE11 - and the language selection didn't work anymore with the most recent SF 3.9.9, then do this (mostly borrowed from @globtech1 but made it work with the most recent (at time of writing) SF 3.9.9.

Modify /Modules/Common/Navigation/LanguageSelection.ts to look like this:

namespace <your name space>.Common {
    export class LanguageSelection extends Serenity.Widget<any> {

        constructor(select: JQuery, currentLanguage: string) {
            super(select);

            currentLanguage = Q.coalesce(currentLanguage, 'en');

            this.change(e => {
                $.cookie('LanguagePreference', select.val(), {
                    path: Q.Config.applicationPath,
                    expires: 365
                });
                window.location.reload(true);
            });

            Administration.LanguageService.List({
            }, response => {

                response.Entities.forEach( x => {
                    Q.addOption(select, x.LanguageId, x.LanguageName);
                });

                if (!Q.any(response.Entities, z => z.LanguageId === currentLanguage)) {
                    var idx = currentLanguage.lastIndexOf('-');
                    if (idx >= 0) {
                        currentLanguage = currentLanguage.substr(0, idx);
                        if (!Q.any(response.Entities, y => y.LanguageId === currentLanguage)) {
                            currentLanguage = 'en';
                        }
                    }
                    else {
                        currentLanguage = 'en';
                    }
                }
                select.val(currentLanguage);
            });
        }
    }
}

That's it. This pulls the neccesary data directly from the server endpoint instead of relying on the lookups (which at that point in time are not yet ready). DB access always is more reliable than lookup because of no timing problems. :-)

With kind regards,

John

Clone this wiki locally