Problem adding buttons in liveview (html)

Phoenix Forum Questions / Help
,
1

I am trying to add some buttons to my liveview, but html is not working …
Does anyone know why?
Below is my html code.

html

          <div class="col-md-9">
            <div class="card">
              <div class="card-header p-2">
                <ul class="nav nav-pills">
                  <li class="nav-item"><a class="nav-link active" href="#activity" data-toggle="tab">Activity</a></li>
                  <li class="nav-item"><a class="nav-link" href="#timeline" data-toggle="tab">Timeline</a></li>
                  <li class="nav-item"><a class="nav-link" href="#settings" data-toggle="tab">Settings</a></li>
                </ul>
              </div><!-- /.card-header -->
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane" id="activity">
                  <!-- Conteudo Aqui-->
                  </div>
                  <!-- /.tab-pane -->
                  <div class="active tab-pane" id="timeline">
                  <!-- Conteudo Aqui-->
                  </div>
                  <div class="tab-pane" id="settings">
                  <!-- Conteudo Aqui-->
                  </div>
                  <!-- /.tab-pane -->
                </div>
                <!-- /.tab-content -->
              </div><!-- /.card-body -->
            </div>
            <!-- /.nav-tabs-custom -->
          </div>

These buttons do not work in liveview


               <ul class="nav nav-pills">
                  <li class="nav-item"><a class="nav-link active" href="#activity" data-toggle="tab">Activity</a></li>
                  <li class="nav-item"><a class="nav-link" href="#timeline" data-toggle="tab">Timeline</a></li>
                  <li class="nav-item"><a class="nav-link" href="#settings" data-toggle="tab">Settings</a></li>
                </ul>

When I withdraw from “liveview”, it works perfectly.

2

It looks like your data-toggle is driven by some JS somewhere? Check out the JavaScript hook documentation (phx-hook) for interop with custom JS.

1 Like