JavaScript doesn't recognise changes made by live reload

Hello,
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() {
        Map.initialize();
        
        Search.initFilters();
        Search.handleUrl();

        jcf.replaceAll('.main-search');
      },
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.

Greets,
Kaquadu

LiveView has built in support for the history API and pushstate: https://hexdocs.pm/phoenix_live_view/0.10.0/Phoenix.LiveView.html#module-live-navigation

1 Like