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