Can any one help with the dynamic collapse in a repeat

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 :slight_smile: 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>
1 Like

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">&nbsp;</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!

Into the <tbody

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…:slight_smile:
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">&nbsp;</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.