0

I'm sorry, I'm totally clueless in javascript, and try to understand the bit of codes I get the best I can...

I'm working on a forum which is hosted on an online server, which makes I can't touch the html (I just have access to the header and the footer). And on this forum, there is a tagcloud in which tags are sorted by popularity order: I want to sort them with my own order (sorted years, country by alphabetical order, etc.).

For that, I created a "sorted tag cloud" in the footer (.TagCloud-order) in which I sorted the tags manually, and I asked with javascript to replace the current unsorted tagcloud (.TagCloud) with my own sorted tag-cloud:

$(document).ready(function() {
    if(window.location.href === "https://forum.cinestudia.fr/") {
        $('.TagsPage-content .TagCloud').replaceWith($('.TagCloud-order').html());
    } else {
    }
});

It works on page load, but then if I go to another page of the forum (like "Toutes les discussions") and that I come back to the main page containing the tag-cloud ("Etiquettes", the page matching the url in my javascript code), the original unsorted tag-cloud is back. You can see the result here: https://forum.cinestudia.fr/

The problem, basically, is that $(document).ready(function() works only when the page launches, but after that it doesn't anymore.

What kind of function can I use for this action being true each time the reader is back on this main url?

(i know a solution would be to put a short timer to change the tag-cloud every 0.1 seconds or less, but it seems really heavy for the browsers...).

TB54
  • 43
  • 7
  • Thanks for all those suggestions! To be honest I'm far to newbie in javascript (I never have to use it, therefore i don't understand even the simplest code) to be able to test that right now, but it gives me leads if I have the occasion later. – TB54 Oct 14 '22 at 23:38
  • Well, in fact I managed to make it work in a fiddle: http://jsfiddle.net/pnamfj9L/ , but it doesn't work on the website (while it's currently implemented in the footer): https://forum.cinestudia.fr/ Don't know why :-/ – TB54 Oct 16 '22 at 09:39
  • I do not think the problem is javaScript. Most likely the browser is caching the response. Have you tried with google chrome and the cache [disabled](https://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development)? – Giuseppe Schembri Oct 16 '22 at 14:21
  • If the cache is the problem you can find a workaround by setting a header ` cache: "no-cache" ` in the HTTP request by using `fetch` API when a link to the page is clicked, that means you have to use [Event.preventDefault()](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) in the `click` handler and then use fetch to send the request with the header ` cache: "no-cache" `. It may help to read this resource on [http cache](https://web.dev/http-cache/#cache-control). – Giuseppe Schembri Oct 16 '22 at 14:21
  • @Giuseppe Schembri : I just tried by checking the "disable cache" box, and it didn't solve the problem. (that said, I have to activate the first function for the main page to be accessible, but they're not directly related to the tag-cloud). For the following you propose, I come back to you when I get how to do it :) – TB54 Oct 16 '22 at 18:35
  • I add a look to `https://forum.cinestudia.fr/` it seems that after an HTTP call to the server if you click somewhere else on the page, for example, `animation`, and then back to the home page there are only XHR requests, this means that some javascript code in your app is building the dom. You should find which code executes the ajax request and modify it according to your needs. – Giuseppe Schembri Oct 17 '22 at 18:18
  • Oh ok, that explains all the problem... Sadly I won't have access to this javascript (a lot is locked on this forum, which is an hosted version, so apart additional header/footer and additional CSS, I can't do anything). Thank you a lot for your time and help! – TB54 Oct 18 '22 at 00:57
  • You could use the [capturing phase](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events) of a click event handler attached to the document node. Then you use the [stopPropagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) method, and the [preventDefault](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) inside the handler. – Giuseppe Schembri Oct 18 '22 at 16:33
  • You should check if the [event.target](https://developer.mozilla.org/en-US/docs/Web/API/Event/target) is an anchor and its `href` attributes is the path to the home page you make an ajax request in order to get the desired html from the server and from it you can build your own `DOM` with your desired footer. – Giuseppe Schembri Oct 18 '22 at 16:33
  • Well, I not that, but it gets really too complex for me and my knwoledge. A friend could help me next weeks, so this lead will help. Thanks again! – TB54 Oct 20 '22 at 08:27

0 Answers0