Dmx bind:checked

Front End Components
#1

Hi,

I’m trying to use dmx-bind:checked in a toggle button group. On page load everything works fine. The page loads a table, you can click on any row to bring up a side panel update form.

The update the form works fine the first time it shows, it reloads the server connect query, refreshes the table and the new data shows in the form…except against the dmx-bind:checked. If you submit the same form again all of the toggles have a null value, which posts through the form and sets the permissions to null. The toggle switches show active through bootstrap classes (which work fine) so it seems to be an issue with dmx-bind:checked.

The code for the button group is below, along with a video of what’s happening. Can I use dynamic toggles in this way or does it require the page to reload to bind the checked value?

image
image1031×327 23.4 KB

Dmx-bind:checked - only working occasionally inside a Data Detail
#2

Any one any thoughts on this…

In short this:
dmx-class:active="(data_detail1.data.list_admin == 1)"

works fine and returns the right data each time so the buttons ‘look’ right as the bootstrap classes applied are correct.

This:
dmx-bind:checked="(data_detail1.data.list_admin == 1)"

works on page load but after the form is submitted the checked value doesn’t rebind unless the page is reloaded, or the value was updated by the form.

The end result is multiple submissions from the same form (even with different entries in the data detail) result in the permissions changing when they shouldn’t.

image

This is what I have in the events after Form Success- notifies Success, Resets the form & reloads the server connect data. I’ve tried re-selecting the datadetail using the ID submitted in the form but it gives the same result.

#3

I’d suggest using the browser debugging tools to see what is going on. You can type dmx.app.data into the console at any step in your process and see exactly what is being stored in your data detail. Check it on page load, then check it again after form submit.

#4

Thanks Ken, the value in the data detail is correct (either 1 or null depending on permission).

I can display it dynamically, I can toggle classes correctly based on it’s value. Both behave exactly as I’d expect.

It only becomes an issue within the dmx-bind:checked which leads me to think there’s something different in the way this processes compared to the other functions?

#5

Is this in (or have you tried) a checkbox group?

#6

Use single quotas then try again please

#7

It’s not in a checkbox group (though I believe the mechanics should be the same), I’ve just tried using a checkbox group:
image

and the behaviour is the same

#8

Thanks Serhat,

The dmx-bind:checked needs double quotes, adding single quotes inside the double quotes (let me know if you think there’s another way I should try!):

image

behaves the same way.

1 Like
#9

Quick questions before i make any suggestions

When you use the update form is the data updating to a database?

Is the database query then reloading the data on the page on update success to show the results?

Are you sure either of your parameters are both integers and not strings?

dmx-bind:checked="data_detail1.data.list_admin == '1'"
OR
dmx-bind:checked="data_detail1.data.list_admin.toNumber() == 1"
OR possibly just = 1 instead of == which is trying to convert both comparisons to the same data type before comparing as far as I can recall.
#10

Thanks Paul,

Yes, it is updating a database, it’s a tinyint field.

Yes, the server connect data reloads on form submit.

The server connect data shows in a table on the page and the data detail side panel. The table displays correctly (both on page load and on reload after form submit), the table includes includes conditional icons based on each permissions field )tick if 1, cross if null). The permissions fields all show correctly when displayed dynamically in the data detail. I can also toggle classes based on the same condition in the data detail.

It’s only the condition within dmx-bind:checked that seems to not work on reload.

image001

This is the result after form submission where the checkbox is coded as:

image002

And the text above it is coded as:

image003
I’ve tried your suggestions:

dmx-bind:checked="data_detail1.data.list_admin == '1'"

gives the same behaviour

dmx-bind:checked="data_detail1.data.list_admin = 1"

doesn’t bind the condition at all even on page load

dmx-bind:checked="data_detail1.data.list_admin.toNumber() == '1'"

gives the same behaviour

Sorry I emailed that response in initially and it seemed to miss some bits off!

#11

Sorry to hijack your post @sbecks.
I would like to report that I am also having the same issue.
It seems the problem is if the checkbox is used with Data Detail.

I have a table row with an icon you can click to open a Modal that contains user information.
I dynamically set the label text to confirm if isactive is true or false.
Using the following:

image
image1387×69 6.56 KB

When you click on a row with isactive = true, the modal will show:
image


Then if you try to click on it again, or open another one with isactive = true, it will now show:
image

If you click on a row with isactive = false, then click another row with isactive = true, the Modal will now show the correct “checked” status.

#12

No problem Joey!

I’m pretty certain it’s not an issue with the syntax, I can’t find any way around it. It would be great to know if this is expected behavior or not? Or if anyone knows of any way to work around it?

I really need to be able to use forms on the same page as the table and update without reloading the page each time and can’t move forward until I find a solution!

#13
#14

For now while they look into it why don’t you rather call what is selected back from the database @sbecks, using a checkbox group you can easily achieve that.
So your form submits, on success it reloads the query, and the query checks all the relevant boxes from its data binding
The code would look a little like this

<div class="form-group">
	<div is="dmx-checkbox-group" id="group1"  dmx-bind:value="sc_populate_items.data.query_checked_items.split(',')" class="checkbox-group">
		<div is="dmx-repeat" id="repeat1" dmx-bind:repeat="sc_query.data.query1" class="row">
			<label class="form-check-label">
				<input name="all_items[]" type="checkbox" id="inp_all_items" dmx-bind:id="inp_all_items_{{$index}}" dmx-bind:value="item_id">
					{{item_name}}
			</label>
		</div>
	</div>
</div>

IMPORTANT PART IS
dmx-bind:value="sc_populate_items.data.query_checked_items.split(',')"

In my database I have a comma separated list of IDs that are the same as the checkbox IDs, that checks all the boxes where the IDs match.

#15

I’m having exactly the same issue. The checkbox is not updating properly, unless you first click on the one with false/‘0’ and then click back.

#16

Have you solved this @luxray? I was not able to find any solution. I just used the circle Font Awesome icon instead.

#17

I left it as it was, hoping to come back to it… But it seems to work fine now… So I’m not sure what caused the bug…

#18