kaquadu
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
Most Liked
LostKobrakai
LiveView has built in support for the history API and pushstate: Phoenix.LiveView — phoenix_live_view v0.10.0
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #javascript
- #code-sync
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance








