NavTab active set on Modal show table invisible

Wappler General How To
#1

Wappler Version : 5.5.3
Operating System : win 10
Server Model: node.js
Database Type: mySql
Hosting Type: localhost

offcanvas onshow event runs java script:

<script>
    function setActiveTab(tabId) {
    // Remove "active" class from all nav-links and tab-panes
    const navLinks = document.querySelectorAll('.nav-link');
    navLinks.forEach(link => link.classList.remove('active'));
    
    const tabPanes = document.querySelectorAll('.tab-pane');
    tabPanes.forEach(pane => pane.classList.remove('active'));
    
    // Add "active" class to selected nav-link and tab-pane
    const selectedNavLink = document.querySelector(`#${tabId}`);
    const selectedTabPane = document.querySelector(selectedNavLink.getAttribute('data-bs-target'));
    selectedNavLink.classList.add('active');
    selectedTabPane.classList.add('active');
    }
  </script>

Expected result:
resets active navTab and tab content to desired tabId.

Actual behaviour:
Tabs correctly reset but bootstrap 5 table located within the selected tabContent is invisible but its associated tooltips show on mouse rollover.

#2

Are your tabs in the offcanvas? Can you post your HTML please?
Also, do you have a live link where we can see this?

#3

Hi Teodor,
Yep here it is

    <section id="appointments">
    <div class="offcanvas offcanvas-end" id="oc_appointments" is="dmx-bs5-offcanvas" tabindex="-1" dmx-on:hidden-bs-offcanvas="run([{runJS:{function:'setActiveTab',args:['navTabs_unconfirmed'],name:'reset_tab',disabled:true}},{run:{action:`sidebar.show()`}}])" dmx-on:show-bs-offcanvas="run([{wait:{delay:1000,disabled:true}},{runJS:{function:'setActiveTab',args:['navTabs_unconfirmed'],name:'reset_tab',disabled:true}}])">
      


      <div class="offcanvas-header border-bottom rounded-0" style="color: gray;">
        <i class="far fa-calendar-week fa-2x"></i>
        <h4 class="offcanvas-title">APPOINTMENTS</h4>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close" dmx-on:click="run([{wait:{delay:1000}},{runJS:{function:'setActiveTab',args:['navTabs_unconfirmed'],name:'reset_tab'}}])"></button>
      </div>
      <div class="offcanvas-body pt-0">
        <div class="row sticky-top bg-white justify-content-center mb-3">
          <div class="rounded-0 pt-2 pb-1 col-12 d-flex justify-content-around">
            <ul class="nav nav-pills bg-white nav-fill" id="navTabs_appts" role="tablist">

              <li class="nav-item me-5 ps-0 pe-0" style="width: 30%;">
                <a class="nav-link active ps-0 pe-0" id="navTabs_unconfirmed" data-bs-toggle="tab" href="#" data-bs-target="#tabContent_unconfirmed" role="tab" aria-controls="navTabs1_2" aria-selected="false" dmx-on:click="reset_sel_member.run()" dmx-on:shown-bs-tab="scroll.run()"><i class="far fa-calendar fa-2x" style="width: 100%;"></i>Unconfirmed</a>
              </li>
              <li class="nav-item ms-5" style="width: 30%;">
                <a class="nav-link ps-0 pe-0" id="navTabs_confirmed" data-bs-toggle="tab" href="#" data-bs-target="#tabContent_confirmed" role="tab" aria-controls="navTabs1_2" aria-selected="false" dmx-on:click="reset_sel_member.run()" dmx-on:shown-bs-tab="scroll.run()"><i class="far fa-calendar-day fa-2x" style="width: 100%;"></i>Confirmed</a>
              </li>

            </ul>
          </div>
        </div>
        <div class="row">

          <div class="row mb-3 ms-auto me-auto ps-0 pe-0">
            <div class="col-12 mb-3" dmx-show="sc_get_services.data.query[0].active">
              <button id="btn_add_appoint" class="btn btn-sm btn-outline-dark shadow-sm" style="width: 100%; /* background-color: #e0ebf0 */ border-width: 2px; border-color: gray; border-radius: 12px;" wappler-command="editContent" data-bs-toggle="modal" data-bs-target="#booking_select" dmx-on:click="booking_details_new.frm_new_appointment.var_default_date.setValue(now_time.datetime.addHours(9).addDays(1))"><i class="fa-calendar-plus fa-lg far" style="width: 100%;"></i>New Booking</button>
            </div>
            <div class="col-3">
              <p class="text-muted">display:</p>

            </div>
            <div class="col ps-0"><select id="sel_unconfirmed_type" class="form-select white_background form-select-sm">
                <option value="0">All</option>
                <option value="1">Consultations</option>
                <option value="2">Workshops</option>
                <option value="3">Events</option>
              </select></div>
          </div>


          <div class="col">
            <div class="tab-content" id="tabContent1">

              <script is="dmx-flow" id="set_table_data" type="text/dmx-flow">[
                  {
                    condition: {
                      if: "{{schedule_status.value==2}}",
                      then: {
                        steps: {
                          run: {
                            action: "{{table_data.setValue(dv_confirmed.data)}}",
                            name: "set_variable_copy"
                          }
                        }
                      }
                    }
                  },
                  {
                    condition: {
                      if: "{{schedule_status.value==1}}",
                      then: {
                        steps: {
                          run: {
                            action: "{{table_data.setValue(dv_unconfirmed.data)}}",
                            name: "set_variable_copy_copy"
                          }
                        }
                      }
                    }
                  }
                ]</script>
              <div class="tab-pane fade show active" id="tabContent_unconfirmed" role="tabpanel">
                <table class="table table-hover table-sm table-bordered table-white bg-white table-borderless text-dark small" id="status_table_unconfirmed" dmx-animate-enter="fadeIn">
                  <thead>
                    <tr>

                      <th scope="row" class="small" style="width: 35px;">Type</th>
                      <th class="small text-start">Name</th>
                      <th class="small text-start">Date &amp; time</th>
                      <th scope="row" class="text-center">id</th>
                    </tr>
                  </thead>
                  <tbody is="dmx-repeat" dmx-generator="bs5table" id="tableRepeat_unconfirmed" dmx-bind:repeat="sel_unconfirmed_type.value==0?dv_unconfirmed.data:sel_unconfirmed_type.value==1?dv_unconfirmed_cons.data:sel_unconfirmed_type.value==2?dv_unconfirmed_workshop.data:dv_unconfirmed_event.data">
                    <tr style="cursor: pointer; /* border-left: */ /* background-color: #bad9e6 */" class="text-dark table-light" dmx-on:click="run([{run:{action:`booking_details_edit.dd_members_appt.select(id)`}},{condition:{if:`consultation`,then:{steps:{run:{action:`booking_details_edit.service_type.setValue(\'consultation\')`,name:'set_appoint_type'}}}}},{condition:{if:`event`,then:{steps:{run:{action:`booking_details_edit.service_type.setValue(\'event\')`,name:'set_appoint_type'}}}}},{condition:{if:`workshop`,then:{steps:{run:{action:`booking_details_edit.service_type.setValue(\'workshop\')`,name:'set_appoint_type'}}}}},{run:{action:`booking_details_edit.set_dur_select.run()`}},{run:{action:`booking_details_edit.show()`}}])">

                      <td class="text-center text-white" dmx-on:click="booking_details.dd_members_appt.select(id);booking_details.set_type_duration.run();booking_details.show()">
                        <i class="fas fa-video" dmx-show="type==1" style="width: 100%; padding-top: 5px; padding-bottom: 5px; border-radius: 5px;" dmx-class:event_color="event" dmx-class:consultation_color="consultation" dmx-class:workshop_color="workshop"></i>
                        <i class="fas fa-mobile-alt" dmx-show="type==2" style="width: 100%; padding-top: 5px; padding-bottom: 5px; border-radius: 5px;" dmx-class:event_color="event" dmx-class:consultation_color="consultation" dmx-class:workshop_color="workshop"></i>
                        <i class="fas fa-user-alt" dmx-show="type==3" style="width: 100%; padding-top: 5px; padding-bottom: 5px; border-radius: 5px;" dmx-class:event_color="event" dmx-class:consultation_color="consultation" dmx-class:workshop_color="workshop"></i>
                      </td>
                      <td dmx-text="first_name.capitalize()+' '+last_name.capitalize()+' '" class="text-start"></td>
                      <td dmx-text="start.formatDate('dd/MM/yy hh:mm')" class="text-start"></td>
                      <td class="text-center" dmx-bs-tooltip="'service id'">{{service_id}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="tab-pane fade" id="tabContent_confirmed" role="tabpanel">
                <table class="table table-hover table-sm table-bordered table-white bg-white table-borderless text-dark small" id="status_table_confirmed">
                  <thead>
                    <tr>
                      <th scope="row" class="small" style="width: 35px;">Type</th>
                      <th class="small text-start">Name</th>
                      <th class="small text-start">Date &amp; time</th>
                      <th scope="row" class="text-center">id</th>
                    </tr>
                  </thead>
                  <tbody is="dmx-repeat" dmx-generator="bs5table" id="tableRepeat_confirmed" dmx-bind:repeat="sel_unconfirmed_type.value==0?dv_confirmed.data:sel_unconfirmed_type.value==1?dv_confirmed_cons.data:sel_unconfirmed_type.value==2?dv_confirmed_workshop.data:dv_confirmed_event.data">
                    <tr style="cursor: pointer; /* border-left: */ /* background-color: #383838 */" class="text-dark table-light" dmx-on:click="run([{run:{action:`booking_details_edit.dd_members_appt.select(id)`}},{condition:{if:`consultation`,then:{steps:{run:{action:`booking_details_edit.service_type.setValue(\'consultation\')`,name:'set_appoint_type'}}}}},{condition:{if:`event`,then:{steps:{run:{action:`booking_details_edit.service_type.setValue(\'event\')`,name:'set_appoint_type'}}}}},{condition:{if:`workshop`,then:{steps:{run:{action:`booking_details_edit.service_type.setValue(\'workshop\')`,name:'set_appoint_type'}}}}},{run:{action:`booking_details_edit.set_dur_select.run()`}},{run:{action:`booking_details_edit.show()`}}])">

                      <td class="text-center text-white" style="border-radius: 5px; padding-top: 5px; padding-bottom: 5px;">
                        <i class="fas fa-video" dmx-show="type==1" style="width: 100%; padding-top: 5px; padding-bottom: 5px; border-radius: 5px;" dmx-class:event_color="event" dmx-class:consultation_color="consultation" dmx-class:workshop_color="workshop"></i>
                        <i class="fas fa-mobile-alt" dmx-show="type==2" style="padding-top: 5px; border-radius: 5px; padding-bottom: 5px; width: 100%;" dmx-class:consultation_color="consultation" dmx-class:event_color="event" dmx-class:workshop_color="workshop"></i>
                        <i class="fas fa-user-alt" dmx-show="type==3" style="padding-top: 5px; padding-bottom: 5px; width: 100%; border-radius: 5px;"></i>
                      </td>
                      <td dmx-text="first_name+' '+last_name" class="text-start"></td>
                      <td dmx-text="start.formatDate('dd/MM/yy hh:mm')" class="text-start"></td>
                      <td class="text-center">{{service_id}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="tab-pane" id="tabContent_settings" role="tabpanel">
                <p>Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </section>
#4

And how do you call the two tabs from outside the collapse? Please provide the code here.
Also when posting code make sure to wrap in 3 backtick: 

```
so that we can see it properly.
#5

Hi Teodor
script triggered on OnShown event of offCanvas

‘’‘dmx-on:shown-bs-offcanvas=“run({runJS:{function:‘resetTabs’,args:[‘navTabs_appts1’,‘tabContent2’],name:‘reset_tabs’}})” ‘’’

#7

The code should be wrapped in backticks ` not in quotes ’ … How to format code in your posts

Also i am not asking about how the offcanvas runs the code. I am asking about how to you open the canvas itself and send the arguments to it - i.e. how does the offcanvas know which tab to open?

Do you have a live link where i can test this, as it will be a lot easier to debug?

#8

Sorry don’t have a link

offcanvas simply opened with a click event on button no parameters sent to offCanvas at that event.

#9

So, how do you determine which tab to “reset” to?

#10

Sorry don’t realy understand your question…
The onShown event of the offCanvas sets the tabs to index 0

So just to clarify setting the active tab is done only on the the show event of the offCanvas via the javascript shown above.

#11

Ah yes just saw that, the flow steps in your code were disabled so i didn’t see it.

#12

The tab you are showing is missing a class show to be visible. It doesn’t only need the class active you are adding to it, but also show .

And this is not really a bug with any component in Wappler, it’s your custom code issue, so moving it from the Bugs cateory :slight_smile:

#13

That’s great thankyou Teodor will look at that issue :slight_smile:

#14

Yay sorted thanks Teodor!!!