Language selector only applying to header and footer

Ask the community
,
1

Hi,

Context: I’ve got a website that needs to be translated into 6 different languages. To do that there is a dropdown in the header where a user can select which language they’d like.

Upon changing that the selection is saved to session storage and the language of the header and footer text updates perfectly via masterPage.js

Then on each individual web page I’ve got code that attempts to realise the dropdown has changed, accesses the session storage, retrieves the language and applies the relevant language to the webpage itself.

Challenge: The website is temperamental in that on some occasions it recognises the dropdown has changed and then on other it doesn’t. Why is this? Code is below for the webpage (not masterPage)

$w.onReady(function () {
    languageChange()
    // This checks the language on page loads and works perfectly fine
})
$w("#languageDrop").onChange((event) => {
    languageChange()
    // I'm occasionally getting an error here that reads: TypeError: $w("#languageDrop").onChange is not a function. (In '$w("#languageDrop").onChange((function(e){V(),console.log("language change")}))', '$w("#languageDrop").onChange' is undefined)
})

function languageDrop() {
    // There's lines of code in here setting the text values for the page based on the selection
}

Thank you so so much, I’m completely confuddled.

2

From the code you’ve shared a possible reason can be that you are using a $w selector outside onReady (for the dropdown onChange event handler).
This can cause issues on the live site. Try either moving it into the onReady or adding through the element’s properties panel.