Hi, The below script shows in the location plugin the tooltip permanently and give them colors to sort them according to their type(events, venues, etc), I’m working on a legend and maybe a filter. The situation is that It does work, but only after I refresh the page, it does not work when landing on the page from the url. There is no differences in the errors in the console in both cases and adding a higher delay to the function does not change a thing. Has anyone ever experienced this when adding js to the header from the edit theme menu and found a solution? Here is a picture of the result [image] the errors here appear with or without the code so they are not related to it [Copie d'écran_20250813_001747] document.addEventListener('DOMContentLoaded', function() { // Apply CSS to change the alt text style var style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = ` /* Ensure alt text is bold, underlined, and has conditional color */ .leaflet-marker-pane img[alt] { font-weight: bold !important; /* Make text bold */ text-decoration: underline !important; /* Underline the text */ white-space: nowrap; /* Prevent the text from wrapping to a new line */ } `; document.head.appendChild(style); // Give the page a moment to load and the images to be rendered setTimeout(function() { var images = document.querySelectorAll('.leaflet-marker-pane img'); images.forEach(function(img) { var title = img.getAttribute('title'); if (title) { title = title.length > 10 ? title.substring(0, 10) + '..' : title; img.setAttribute('alt', title); img.setAttribute('title', title); if (title.includes('/')) { img.style.color = 'white'; } else { img.style.color = 'black'; } } img.setAttribute('src', ''); }); }, 1000); // Delay execution by 1 second (1000 ms) });

I have found a solution actually that reloads only the “map” page each time you go on it I wonder now if this is worth sharing to others here if header scripts are going to be deprecated? The script in this post allows color categories according to the content of an event title on the map, this should be changeable quickly not via the api feature. (function(){function e(){if(location.pathname.includes("/map")){if(!sessionStorage.getItem("map-refreshed")){sessionStorage.setItem("map-refreshed","true");requestAnimationFrame(()=>{setTimeout(()=>{location.reload(!0)},100)})}}}function t(){sessionStorage.removeItem("map-refreshed")}function n(e){const t=history[e];history[e]=function(){const n=t.apply(this,arguments);return window.dispatchEvent(new Event("locationchange")),n}}n("pushState"),n("replaceState"),addEventListener("popstate",()=>dispatchEvent(new Event("locationchange"))),addEventListener("locationchange",function(){location.pathname.includes("/map")?e():t()}),e();})();

If I’m not wrong, because Discourse is a single-page application, I believe you’ll have to use the plugin API’s api.onPageChange() for this.

[image] NateDhaliwal: api.onPageChange() Good to know, I won’t bother using an adapted window.location.reload(true) in the header for an ember.js framework which might have been a solution for this. Is the header field being deprecated out of security reasons? The thing is that it is still convenient to test vanilla javascript in it.

[image] opcourdis: Is the header field being deprecated out of security reasons? No, using the plugin api in script tags (in the header) is deprecated.

ok if javascript in headers is soon deprecated I have to adapt a few things, maybe this header field could have a notice regarding this incoming situation. I guess it has its reasons, but it may be a pity since scripts in headers are useful allowing fast tweaks for admin like : closing event registration when a specific number is matched by a javascript function for a specific category

sorry I answered to you instead of Jay who says that scripts are going to be deprecated, I imagine he is speaking about header scripts that are just very convenient to use for quick modifications just like in any website CMS.

I think you misunderstood me. I meant that header script tags like and are deprecated, not normal tags.

yes, thank you for the clarification, I’m happy we can place javascript, check out the code I’ve left if you have time it may still be useful in ember environements, it reloads the page so the js gets applied. It’s not the nicest but it works well for the map plugin page !

Custom javascript gets only applied after refresh, creating categories for location plugin

Development

pfaffman (Jay Pfaffman) August 13, 2025, 12:30am 3

Right, and using script is soon to be deprecated.

Topic		Replies	Views
[newbie] Trouble adding script to dynamically change CSS values based on conditions Product Support	9	1851	October 11, 2016
Javascript added to theme header returns $ is not defined Development	4	226	June 24, 2025
Modernizing inline script tags for templates & JS API Development dev-news	46	6276	March 25, 2026
Cache busting for updated scripts in theme components? Development	0	593	October 27, 2022
Difficulties in correctly adding external JavaScript Product Support	3	3060	November 5, 2019

Custom javascript gets only applied after refresh, creating categories for location plugin

Related topics