Javascript not working on header

TWF · Post by **TWF** » Thu Apr 04, 2024 1:38 am

I have multilingual webpage created with Flare. For example, paths are like:
www.mycompany.com/help/en/something.htm
www.mycompany.com/help/sv/something.htm

Now I have topic toolbar in master page including default SelectLanguage button and user can change the language of topics with that. BUT instead of a button in topics I'd like to have that button (or link) in header like almost every website do, next to search bar or companys logo. I haven't found a way in Flare to put the default SelectLanguage button to header, so I had to try something else.

I found a solution made with javascript and it's working if I put my code and language switch link (that uses the javascript code) between topics <body> and </body> tags. The solution is simple; it just check if there's /en/ inside the url and if there is, clicking the link changes it to /sv/. The code is:

Code: Select all

        <p>
            <div class="languagelink"><a href="#" id="changeURLLink">Swedish</a>
            </div></p>
        <p>
            <script type="text/javascript">
				// Wrap the JavaScript code in a DOMContentLoaded event listener
				document.addEventListener("DOMContentLoaded", function() {
				// Add an event listener to the link
				document.getElementById("changeURLLink").addEventListener("click", function(event) {
				// Prevent the default behavior of the link
				event.preventDefault();

				// Get the current URL
				var currentURL = window.location.href;

				// Check if the current URL contains "/en/"
				if (currentURL.includes("/en/")) {
				// Replace "/en/" with "/sv/"
				var newURL = currentURL.replace("/en/", "/sv/");
                    
				// Navigate to the new URL
				window.location.href = newURL;
				} else {
				console.log("Current URL doesn't contain language code '/en/'.");
				}
				});
				});
			</script>
        </p>

I also have css style for div languagelink:

Code: Select all

			.languagelink
			{
			display: inline-block;
			margin-left: 150px;
			z-index: 1;
			}

But like I said, I'd like to have select language function in the header, not in the topic. So I put the script above to my master page (in <body>) and put the link to header using this script:

Code: Select all

		<script type="text/javascript">
			$(document).ready(function(){
			// add div for header text
			$("a.logo").after('<div class="languagelink"><a href="#" id="changeURLLink">Swedish</a></div>');
			});
		</script>

And this is the point where the problem appears. When I build my site, I get the "Swedish"-link to the header after companys logo just like I want. But the link does nothing! When I click it, I only get "#" to browser's url path. It looks like the link can't use the javascript even it's included in master pages code.

I don't have any ideas how to fix this. It obviously has something to do with master page, because the solution works directly from topics code.

I appreciate any help.

If someone wants to see how this should work, just create local folder named "en" and create html file in it using the code below (when you click "Swedish" link, /en/ changes to /sv/ in your browser):

Code: Select all

<html>
<head>
<style>
			.languagelink
			{
			display: inline-block;
			margin-left: 150px;
			z-index: 1;
			}
</style>
</head>
<body>        
<p>
            <div class="languagelink"><a href="#" id="changeURLLink">Swedish</a>
            </div></p>
        <p>
            <script type="text/javascript">
				// Wrap the JavaScript code in a DOMContentLoaded event listener
				document.addEventListener("DOMContentLoaded", function() {
				// Add an event listener to the link
				document.getElementById("changeURLLink").addEventListener("click", function(event) {
				// Prevent the default behavior of the link
				event.preventDefault();

				// Get the current URL
				var currentURL = window.location.href;

				// Check if the current URL contains "/en/"
				if (currentURL.includes("/en/")) {
				// Replace "/en/" with "/sv/"
				var newURL = currentURL.replace("/en/", "/sv/");
                    
				// Navigate to the new URL
				window.location.href = newURL;
				} else {
				console.log("Current URL doesn't contain language code '/en/'.");
				}
				});
				});
			</script>
        </p>
</body>
</html>

Post by **NorthEast** » Thu Apr 04, 2024 5:31 am

I think the problem is that the first script will only work if it runs after the second script has finished.

The first script runs on the 'DOMContentLoaded' event, but it assumes that the element with ID "changeURLLink" already exists here:

Code: Select all

document.getElementById("changeURLLink")

Previously that worked fine because the link was already part of your topic body.

However, in your new version, the element with ID "changeURLLink" is now added by your second script - but this element doesn't exist when the DOM is loaded and when the first script starts.

Anyway, it should work if you combine the scripts. Take the part of the first script that's inside the DOMContentLoaded section, and put that inside the second script after you add the link - for example:

Code: Select all

<script type="text/javascript">
	$(document).ready(function(){
		// add div for header text
		$("a.logo").after('<div class="languagelink"><a href="#" id="changeURLLink">Swedish</a></div>');

		// Add an event listener to the link
		document.getElementById("changeURLLink").addEventListener("click", function(event) {

		... rest of first script ...

	});
</script>

TWF · Post by **TWF** » Sun Apr 07, 2024 11:48 pm

Thank you so much! Your solution worked properly.

I also learned something new about coding. Now it's easy to customize my own language select button or text link to switch between Swedish and English.

MadCap Software Forums

Javascript not working on header

Javascript not working on header

Re: Javascript not working on header

Re: Javascript not working on header