jimPC
March 29, 2023, 2:00pm
1
Wappler Version : 5.5.3
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:
Actual behaviour:
Teodor
March 29, 2023, 2:12pm
2
Are your tabs in the offcanvas? Can you post your HTML please?
jimPC
March 29, 2023, 2:15pm
3
Hi Teodor,
<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 & 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 & 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>
Teodor
March 29, 2023, 2:28pm
4
And how do you call the two tabs from outside the collapse? Please provide the code here.
``` so that we can see it properly.
jimPC
March 29, 2023, 2:32pm
5
Hi Teodor
‘’‘dmx-on:shown-bs-offcanvas=“run({runJS:{function:‘resetTabs’,args:[‘navTabs_appts1’,‘tabContent2’],name:‘reset_tabs’}})” ‘’’
Teodor
March 29, 2023, 2:39pm
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?
jimPC
March 29, 2023, 2:48pm
8
Sorry don’t have a link
offcanvas simply opened with a click event on button no parameters sent to offCanvas at that event.
Teodor
March 29, 2023, 2:49pm
9
So, how do you determine which tab to “reset” to?
jimPC
March 29, 2023, 2:51pm
10
Sorry don’t realy understand your question…
So just to clarify setting the active tab is done only on the the show event of the offCanvas via the javascript shown above.
Teodor
March 29, 2023, 2:57pm
11
Ah yes just saw that, the flow steps in your code were disabled so i didn’t see it.
Teodor
March 29, 2023, 3:01pm
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
jimPC
March 29, 2023, 3:05pm
13
That’s great thankyou Teodor will look at that issue
jimPC
March 29, 2023, 3:07pm
14
Yay sorted thanks Teodor!!!
