JavaScript doesn't recognise changes made by live reload

I’m currently struggling with a small issue - I made search page using LiveView. The problem is that client wants me to implement the url change as the parameters of the search are varying. I’ve already managed to make a live view renderer with starting params which are taken from URL - I would say that was the easy part.

Currently I’m updating with every live view update a <span> with a data field containing current url, which will redirect to the search with given parameters. In the live view JS hooks I’m calling a function, which is responsible for getting the current url data field from the given span and then setting it as current url.

updated() {

handleUrl() {
    if (!$('.js-current-url').length) return;

    let newUrl = $('.js-current-url').data("current-url");
    //logged newUrl here - always the url from the firs updated() call
    history.pushState({}, null, newUrl);

The problem is that the function handleUrl() doesn’t recognise the span’s data field changes and is still setting the old url from the first live view update. I will appreciate any advices. I inspected the data field in dev tools - it is changing after every update. The problem is somewhere else.


LiveView has built in support for the history API and pushstate:

1 Like