Plain text inside dmx-html versus {{}}

Wappler General Need Help
1

I have a '<label>' tag with an Inner HTML Dynamic Attribute 'dmx-html'. This has been working fine for quite some time with some html inside it (a Font Awesome icon). Recent changes have meant that the icon has been dropped and only text from the Server Connect is required.

I have spent most of today trying to understand why this tag wouldn’t display as expected and I couldn’t figure out what the issue was. Eventually I removed the Inner HTML Dynamic Attribute and added the Server Connect variable to curly brackets outside of the '<label>' tag, it now works as expected.

My question is, should the Inner HTML Dynamic Attribute fail if there is no HTML as part of the value?

2

What’s the exact issue you are having - it’s not really clear from your post?

3

Server Connect variable inside tag '<label dmx-html="add_costs_fig">'.
This is a Radio Button Group and when you click on the different buttons the previous one stays selected

image

Server Connect variable outside tag '<label>{{add_costs_fig}}' but inside curly brackets.
This is the same Radio Button Group and when you click on the different buttons the previous button is deselected. This is as it should display.

image

4

So there is nothing wrong with the values displayed but it’s a specific radio buttons issue - it does not keep only value selected or? Can you post the exact html used for this - is it a radio group component?

5

You are correct, it is not the values but the active state of the label tag

This is the code that displays correctly. The only change is about halfway down where this is, as described above.

{{add_costs_fig}}

												<div class="form-group row" id="row_specialist" is="dmx-radio-group">
													<div class="input-group col-sm-9">
														<div class="input-group-prepend specialistlist">
															<div class="input-group-text" style="width: 210px;">{{add_costs_id + ' : ' + add_costs_name}}</div>
														</div>


														<!-- ** ************************* *************************
** REPEAT B : Prices of 'Additional Cost' Items :: Neil 2 -->
														<!-- **** CHOOSE NUMBER -->
														<div class="btn-group btn-group-toggle d-flex flex-wrap flex-grow-1" is="dmx-repeat" data-toggle="buttons" dmx-bind:repeat="sc_ad_add_costs_mq.data.qp_ad_add_costs_figs_mq.where(`add_costs_id`, add_costs_id, '==')"
															id="rpt_specialist_btns" style="background-color: #e9ecef;">

															<!-- ** ************************* *************************
** O\ CLEAR button -->
															<label class="btn btn-sm btn-clear" style="max-width: 35px;" dmx-bind:for="input_{{add_costs_id}}_0"
																dmx-on:click="specialist_data.delete({sd_id: add_costs_id});mod_select_specialist.form_new_ad_report_7_1.row_specialist.specialist_radio.setValue('0')" dmx-bind:id="input_{{add_costs_id}}_0" dmx-show="$index == 0"
																title="Clear">

																<input class="custom-control-input" type="radio" dmx-bind:id="input_{{add_costs_id}}_0" dmx-bind:value="" name="specialist_radio" value="0"><i class="fa-ban fas"></i>
															</label>

															<!-- ** ************************* *************************
** VALUE button -->
															<label class="btn btn-sm btn-outline-secondary" dmx-bind:for="input_{{add_costs_id}}_{{$index+1}}"
																dmx-on:click="specialist_data.upsert({sd_id: add_costs_id, sd_name: add_costs_name, sd_value: add_costs_fig},{sd_id: add_costs_id, sd_name: add_costs_name, sd_value: add_costs_fig})"
																dmx-bind:id="input_{{add_costs_id}}_{{$index+1}}" dmx-class:active="((sc_ad_job_q.data.sa_q_job_q.meth_specialist_ref.split(',').contains(add_costs_id + '_' + add_costs_fig)) ? (specialist_data.data.values(`sd_id + '_' + sd_value`).contains(add_costs_id + '_' + add_costs_fig) ? 1 : 0) : 0)" dmx-bind:title="' Select '+add_costs_fig">
																{{add_costs_fig}}

																<!-- ** ************************* *************************
** VALUE input -->
																<input class="custom-control-input" type="radio" dmx-bind:id="input_{{add_costs_id}}_{{$index+1}}" dmx-bind:value="$index+1" id="inp_specialist_radio" name="specialist_radio" dmx-bind:name="{{add_costs_name}}"
																	dmx-bind:checked="((sc_ad_job_q.data.sa_q_job_q.meth_specialist_ref.split(',').contains(add_costs_id + '_' + add_costs_fig)) ? (specialist_data.data.values(`sd_id + '_' + sd_value`).contains(add_costs_id + '_' + add_costs_fig) ? 1 : 0) : 0)">

															</label>

														</div>
													</div>

													<!-- ** ************************* *************************
** £ -->
													<div class="input-group col-sm-3" id="specialist_cost_cont">
														<div class="input-group-prepend">
															<div class="input-group-text"><i class="far fa-pound-sign fa-lg"></i></div>
														</div>
														<!-- ** ************************* *************************
** Line Total -->
														<input class="form-control text-right wid-100" id="specialist_total" name="specialist_total" dmx-bind:id="inp_costs_input_{{add_costs_id}}" dmx-bind:name="costs_input_{{add_costs_id}}"
															dmx-bind:value="(specialist_data.data.hasItems() && (specialist_data.data.values(`sd_id == add_costs_id ? sd_value : 0`).max() > 0) ? ((specialist_data.data.values(`sd_id == add_costs_id ? sd_value : 0`).max())).default(0).formatNumber(2, &quot;.&quot;, &quot;,&quot;) : '' )"
															placeholder="0" tabindex="-1">
														</div>
													</div>
												</div>
											</div>
6

Maybe @patrick can check this.

1 Like
7

It is the same as with checkboxes in a repeater, when a html element internal state changes it will not be updated by the repeater if the attribute itself did not change. You could try to set a key on the repeater.