Have a table with a repeat on it and below a dynamic collapse, I want it so when you click the row it toggles the dynamic collapse for that row.
I have added the $index but for some reason it comes up with an error, can anyone see where I have gone wrong with this please
<tbody is="dmx-repeat" dmx-generator="bs4table" dmx-bind:repeat="view_currently_training.data.query1" id="tableRepeat1" key="$index">
<tr class="mouse" dmx-on:click="details_{{$index}}.show()" data-toggle="collapse">
<td dmx-text="">
<img width="40px" class="img-fluid rounded-circle" dmx-bind:src="image">
</td>
<td dmx-text="{{fName}} {{lName}}" class="cellmiddle"></td>
<td dmx-text="tel" class="cellmiddle"></td>
<td dmx-text="start_date" class="cellmiddle"></td>
<td dmx-text="trainerName" class="cellmiddle"></td>
<td class="cellmiddle">
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
</tr>
<tr>
<td colspan="6" class="pt-0 pb-0">
<div class="collapse" is="dmx-bs4-collapse" dmx-bind:id="details_{{$index}}">
<p>Collapse body text goes here.</p>
</div>
</td>
</tr>
</tbody>
Gunnery did you ever get the repeat inside a table to work?
No not yet, do you have any ideas?
I’m working on it now… so far no luck. I will pass on what I learn ASAP.
Cheers buddy, I keep trying and for some reason just can’t get it work in a table.
finally got it working 
Here’s the code:
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Cal</th>
<th>Serial</th>
<th>Image</th>
<th>Auto</th>
<th>Onloan</th>
</tr>
</thead>
<tbody is="dmx-repeat" dmx-generator="bs4table" dmx-bind:repeat="serverconnect1.data.query1" id="tableRepeat1">
<tr dmx-on:click="bs_col.toggle()">
<td dmx-text="Make"></td>
<td dmx-text="Model"></td>
<td dmx-text="Cal"></td>
<td dmx-text="Serial"></td>
<td dmx-text="Image"></td>
<td dmx-text="autoID"></td>
<td dmx-text="onloan"></td>
</tr>
<tr>
<td>
<div class="collapse" id="bs_col" is="dmx-bs4-collapse" dmx-bind:id="bs_col_{{$index}}">
<p>Collapse body text goes here.</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
2 Likes
Great job!
I’ve been working on another style of the collapsible accordion… however, here’s one I did the other day that is somewhat like yours. However, this one will show a form to update the status of a job.
What I have had problems with is the collapse of the previously opened row once another row is opened. Some reason I just haven’t found the key yet. Ha!
<td class="text-center">
<button class="btn btn-sm btn-primary" data-toggle="collapse" dmx-on:click="dynamic_collapse.toggle()" dmx-bs-tooltip="'View Status'">
<i class="fas fa-search"></i>
</button>
</td>
</tr>
<!-- STATUS DATA -->
<tr>
<td colspan="15" class="collapse bg-warning px-2" id="dynamic_collapse" is="dmx-bs4-collapse">
<div class="accordion" id="accordion1">
<!-- DATA DETAIL -->
<!-- update service record details -->
<form is="dmx-serverconnect-form" id="serverconnectform2" method="post" action="../../dmxConnect/api/ServiceStatus/service_status_update.php" dmx-generator="bootstrap4" dmx-form-type="vertical" dmx-populate="sc_service_status_detail.data.service_status_detail" dmx-on:success="browser1.alert('Service status was updated!')">
<!-- update button -->
<button type="submit" class="badge btn-primary p-1 mr-3"><i class="fas fa-edit"> </i>Update</button>
<!-- update button -->
<div class="form-check form-check-inline">
<div class="form-check form-check-inline">
<input class="form-check form-check-inline" type="checkbox" id="inp_scheduled2" name="scheduled" dmx-bind:checked="sc_service_status_detail.data.service_status_detail.scheduled" value="1">
<div class="font-italic" for="inp_scheduled2">Scheduled</div>
</div>
</div>
<div class="form-check form-check-inline">
<div class="form-check form-check-inline">
<input class="form-check form-check-inline" type="checkbox" id="inp_uploaded2" name="uploaded" dmx-bind:checked="sc_service_status_detail.data.service_status_detail.uploaded" value="1">
<div class="font-italic" for="inp_uploaded2">Uploaded</div>
</div>
</div>
<div class="form-check form-check-inline">
<div class="form-check form-check-inline">
<input class="form-check form-check-inline" type="checkbox" id="inp_processed2" name="processed" dmx-bind:checked="sc_service_status_detail.data.service_status_detail.processed" value="1">
<div class="font-italic" for="inp_processed2">Processed</div>
</div>
</div>
<div class="form-check form-check-inline">
<div class="form-check form-check-inline">
<input class="form-check form-check-inline" type="checkbox" id="inp_delivered2" name="delivered" dmx-bind:checked="sc_service_status_detail.data.service_status_detail.delivered" value="1">
<div class="font-italic" for="inp_delivered2">Delivered</div>
</div>
</div>
<div class="form-check-inline">
<select id="inp_photographer2" name="photographer" dmx-bind:value="sc_service_status_detail.data.service_status_detail.photographer" dmx-bind:options="sc_team_member_list.data.team_member_list"
optiontext="team_member_first_name+' '+team_member_last_name" optionvalue="team_member_first_name+' '+team_member_last_name">
<option value="None">Photographer</option>
</select>
</div>
<div class="form-check-inline">
<select id="inp_assistant2" name="assistant" dmx-bind:value="sc_service_status_detail.data.service_status_detail.assistant" dmx-bind:options="sc_team_member_list.data.team_member_list"
optiontext="team_member_first_name+' '+team_member_last_name" optionvalue="team_member_first_name+' '+team_member_last_name">
<option value="None">Assistant</option>
</select>
</div>
<div class="form-check-inline">
<select id="inp_editor2" name="editor" dmx-bind:value="sc_service_status_detail.data.service_status_detail.editor" dmx-bind:options="sc_team_member_list.data.team_member_list"
optiontext="team_member_first_name+' '+team_member_last_name" optionvalue="team_member_first_name+' '+team_member_last_name">
<option value="None">Editor</option>
</select>
</div>
</form>
<!-- DATA DETAIL -->
</div>
</td><!-- Dynamic Collapse -->
1 Like
The documentation might help:
Yes, I can see what you mean.
This is now working for me and now auto closes the collapse when another one is clicked
<tbody is="dmx-repeat" class="accordion" dmx-generator="bs4table" dmx-bind:repeat="serverconnect1.data.query1" id="tableRepeat2">
Add the class into the tbody and on the collapse add the parent
Add which class into the body? Sorry, I’m a bit dense at the moment. I’ve been staring at this all day. Ha!
Here’s what is badgering me… Ha! It opens only the first row.
FINALLY! It works as it is supposed to…
<body is="dmx-app" id="collapsible_items">
<div class="container py-5">
<div class="row">
<div class="col">
<div class="accordion" id="accordion1" is="dmx-repeat" dmx-bind:repeat="sc_service_list.data.service_list" key="$key">
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<button id="accordion_collapse_btn" class="btn btn-link" type="button" data-toggle="collapse" dmx-bind:data-target="#accordion_collapse_{{$key}}" aria-expanded="false"
aria-controls="accordion_collapse">{{first_name+' '+last_name}}</button>
</h5>
</div>
<div dmx-bind:id="accordion_collapse_{{$key}}" class="collapse" is="dmx-bs4-collapse" aria-labelledby="accordion_headingOne" data-parent="#accordion1">
<div class="card-body">
<div class="col small">
{{address_1}}
<span dmx-show="{{address_2}}"><br>{{address_2}}</span><br>
{{city}}, {{state}} {{zip}}<br>
Phone: {{phone}}<br>
Email: {{email}}
</div>
</div>
</div>
</div>
</div>
</div><!-- col -->
</div><!-- row -->
</div><!-- container py-5 -->
1 Like
at least its working…
Now here’s one for you…
I have a repeat (modules) which comes from one query and basically repeats buttons with their names in
What I want to do is from another query change the button to green (which is not a problem) if the ID of the (modules) matches the record in the second query.
But how do I put 2 repeats into one div?
What kind of data will be in the two repeats? Are the queries from separate tables?
The first query is the sections:
autoID
sec_name
So this I use to create all the buttons with no issues
Second Query is the completed_sections
autoID
section_ID
member_ID
complete_flag
So with the second one I need to filter it by the members ID to see if it has any complete flags and in which case turn the button green (with a dynamic style)
This is where I am getting stuck because I need all the buttons to show, but the ones that are complete for each member to be green.
I use the table’s ids or the values of the cells to trigger everything. For instance if the table gets a new record and there is a cell in that table that awaits data. I use that data to show/hide whatever dynamically.
The buttons below only show when a record id of this query exists. Plus the button changes sizes based on the device’s viewport.
<!-- small thank you buttons -->
<button dmx-show="sc_detail_service.data.detail_service[0].service_id" class="btn btn-sm btn-church-1 shadow d-md-none" dmx-on:click="browser1.goto('../12_letters/thank_you_pastor.php?id='+church_id)" dmx-bs-tooltip="'Send Thank You'"><i class="fas fa-handshake"></i></button>
<!-- large thank you buttons -->
<button dmx-show="sc_detail_service.data.detail_service[0].service_id" class="btn btn-sm btn-church-1 shadow d-none d-md-inline-block" dmx-on:click="browser1.goto('../12_letters/thank_you_pastor.php?id='+church_id)" dmx-bs-tooltip="'Send Thank You'"><i class="fas fa-handshake"> </i>Thank You Letter</button>
1 Like
There are unlimited things you can do with dmx-show="" and dmx-hide="". The above query is looking for an id in the church table.
So in your case, you need to think of how you can cause whatever indicates a member has completed whatever it is that needs to be indicated. Once that is true, then you can use it in your query to show or hide a button or change a background color, or whatever.