Sebb

Sebb

Liveview + bootstrap accordion

I have a two level hierarchy that I want to render in a bootstrap accordion.
It looks like this:

first-level-item-text-1
   second-level-item-text-1-1
   second-level-item-text-1-2
first-level-item-text-1
   second-level-item-text-2-1
   ...

Normally I would put phx-update="ignore" on the accordion, to avoid that it is being closed on each render, but I can’t do that because I want to change the data that is displayed in a liveview - Is there a way to do that?

here is some code

<!-- cant put phx-update=ignore here -->
<div class="accordion accordion-flush p-1" id="blockAccordion"> 
<%= for first_level_item in first_level_items %>
<div class="accordion-item">
  <h2 class="accordion-header">
    <button data-bs-target="#flush-collapse-<%= first_level_item.id %>">
      <%= first_level_item.text %>
    </button>
  </h2>
  <div id="flush-collapse-<%= first_level_item.id %>" class="accordion-collapse collapse"
    data-bs-parent="#blockAccordion">
    <div class="accordion-body p-0 m-0">
      <ul class="list-group list-group-flush">
        <%= for second_level_item <- first_level_item.second_level_items do %>
          <%= render_second_level(second_level_item.id, assigns) %>
        <% end %>
      </ul>
    </div>
  </div>
</div>
<% end %>
</div>

Marked As Solved

sfusato

sfusato

First option would be to add a LiveView Hook that would re-initialize Bootstrap JS on each mounted & update LiveView callback. From Bootstrap docs, it looks like this for V5:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

Second option, have you considered using Alpine? You can enhance your LiveView templates with Alpine without the need of phx-update="ignore" and also without the need of hooks manually re-initializing JS libraries due to how it’s set up to work with LiveView (check the end of the section of the previous link).

Basically, you will use Alpine instead of Bootstrap JS code to handle the accordion state for you. Something like:

<div class="accordion accordion-flush p-1" id="blockAccordion"> 
<%= for first_level_item in first_level_items %>
+ <div x-data="{open: false}" id="accordion_<%= first_level_item.id %>" class="accordion-item">
  <h2 class="accordion-header">
+   <button @click="open=!open">
      <%= first_level_item.text %>
    </button>
  </h2>
+ <div x-show="open" x-cloak class="accordion-collapse collapse">
    <div class="accordion-body p-0 m-0">
      <ul class="list-group list-group-flush">
        <%= for second_level_item <- first_level_item.second_level_items do %>
          <%= render_second_level(second_level_item.id, assigns) %>
        <% end %>
      </ul>
    </div>
  </div>
</div>
<% end %>
</div>
  • x-data initializes Alpine; we set open to false;
  • on button click, it toggles the value;
  • the accordion is only displayed when open==true;
  • Patrick Thompson’s blog has some great articles on LiveView & Alpine working together;

Also Liked

cj5

cj5

If all you want to do is keep the bootstrap state through LiveView updates without marking the container with phx-update="ignore", it is possible to use onBeforeElUpdated hook. For example, inside your app.js where the live socket is initialized:

const liveSocket = new LiveSocket('/live', Socket, {
  // ...
  dom: {
    onBeforeElUpdated (from, to) {
      // Clone bs-collapse state
      if (from.classList.contains('collapse') && from.classList.contains('show')) {
        to.classList.add('show');
      }
    },
  },
});

Where Next?

Popular in Questions Top

sergio
In Ruby, I can go: User.find_by(email: "foobar@email.com").update(email: "hello@email.com") How can I do something similar in Elixir? ...
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New
_russellb
I want to try my hand at web scraping. What tools/libraries do I need to use. I’m hoping to turn this into something professional so don’...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New
mgjohns61585
Could someone help me? I'm making my first elixir program, number guessing game. I can't figure out how to convert the user's guess from ...
New
qwerescape
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
New
lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New

Other popular topics Top

chrismccord
Phoenix 1.4.0 released Phoenix 1.4 is out! This release ships with exciting new features, most notably with HTTP2 support, improved deve...
688 30048 115
New
yurko
Here are few pieces of (common) Linux knowledge that we use for reasonably small one server apps. We use Ubuntu but this should work for ...
New
New
quazar
How to set Jason to encode all fields in ecto schema, I don’t care about security and implementing only is taking long list of attributes...
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
johnnyicon
Hi all, I've just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I'm trying to use Postg...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New

We're in Beta

About us Mission Statement