Liveview changing elements of the session

Phoenix Forum Questions / Help
1

I am currently trying to use liveview, but I have a problem when the database is updated.

The liveview page always changes the element to “Buttom 0” which has class = active.

The question is:
As I do when the liveview page is updated, the “buttom 3” element that is selected must not change.

This is the code I’m using

html

                    <ul class="nav nav-tabs nav-pills ml-auto p-2 nav-mytabs" id="myTab" role="tablist">
                      <li class="nav-item">
                      <a class="nav-link active" phx-update="ignore" id="tab_0-tab" role="tab" aria-controls="tab_0" href="#tab_0" data-toggle="tab" aria-selected="true" phx-update="ignore">Buttom 0</a></li>
                      <li class="nav-item">
                      <a class="nav-link" phx-update="ignore" id="tab_1-tab" role="tab" aria-controls="tab_1" href="#tab_1" data-toggle="tab" aria-selected="false" phx-update="ignore">Buttom 1</a></li>
                      <li class="nav-item">
                      <a class="nav-link" phx-update="ignore" id="tab_2-tab" role="tab" aria-controls="tab_2" href="#tab_2" data-toggle="tab" aria-selected="false" phx-update="ignore">Buttom 2</a></li>
                      <li class="nav-item">
                      <a class="nav-link" phx-update="ignore" id="tab_3-tab" role="tab" aria-controls="tab_3" href="#tab_3" data-toggle="tab" aria-selected="false" phx-update="ignore">Buttom 3</a></li>
                    </ul>
                  <div class="card-body">
                    <div class="tab-content">

                      <div class="tab-pane active" id="tab_0" role="tabpanel" aria-labelledby="tab_0-tab" phx-hook="tab_0" phx-update="ignore">

                        <!-- TAB 0-->
                        <div class="row">
                          <div class="col-sm-12">
                         ...
                       </div>


                      <div class="tab-pane" id="tab_1" role="tabpanel" aria-labelledby="tab_1-tab" phx-hook="tab_1" phx-update="ignore">

                        <!-- TAB 1-->
                        <div class="row">
                          <div class="col-sm-12">
                         ...
                       </div>


<script>
$(document).ready(() => {
  let url = location.href.replace(/\/$/, "");
 
  if (location.hash) {
    const hash = url.split("#");
    $('#myTab a[href="#'+hash[1]+'"]').tab("show");
    url = location.href.replace(/\/#/, "#");
    history.replaceState(null, null, url);
    setTimeout(() => {
      $(window).scrollTop(0);
    }, 400);
  } 
   
  $('a[data-toggle="tab"]').on("click", function() {
    let newUrl;
    const hash = $(this).attr("href");
    if(hash == "#tab_0") {
      newUrl = url.split("#")[0];
    } else {
      newUrl = url.split("#")[0] + hash;
    }
    newUrl += "";
    history.replaceState(null, null, newUrl);
  });
});
</script>

live


def mount(params, _session, socket) do
    if connected?(socket), do: Process.send_after(self(), :update, 5000)
    # if connected?(socket), do: Process.send_after(socket, :update, 10000)

app.js

import "../css/app.scss"

import "phoenix_html"

import {Socket} from "phoenix"

import NProgress from "nprogress"

import {LiveSocket} from "phoenix_live_view"

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")

let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})

window.addEventListener("phx:page-loading-start", info => NProgress.start())

window.addEventListener("phx:page-loading-stop", info => NProgress.done())

liveSocket.connect()


window.liveSocket = liveSocket
2

The “clicked” state is stored in your js runtime, in other word, the browser. When database updated, the phoenix server renders a new html page(including the js code in that page), the old state in browser will lost.

If you want to keep the “clicked” state after database updated, you need let server keeps the state, use the live template. (with phx-on-click and save the state in socket assisngs)

3 
<li class="nav-item">
<a class="nav-link"  phx-on="click:open_element" phx-update="ignore" id="tab_2-tab" role="tab" aria-controls="tab_2" href="#tab_2" data-toggle="tab" aria-selected="false">Buttom 2</a>
</li>

would it be something that way?
Would you have an example project to follow?

4

The liveview doc is a good point to start.

I don’t have a complete example, you could control the class of tabs like this:

<div class="tab-pane<%= if @active_tab == 0, do: " active" %>" id="tab_0" ...>