Bug in Display of Checkbox Value When Server Connect Data is Reloaded

Wappler 3.0.0 beta 3

This is where you have a checkbox whose value is set by the result of a database query, when that database boolean field contains a value of 1.

Expected Behaviour
If you reload the database query via a server connect, the checkbox is still checked.

Actual Behaviour
The first time the server connect is run, the checkbox is checked.
Subsequent times the server connect is run, the value returned by server connect is still 1 but the checkbox is now shown unchecked.

How to Create

  1. Create a mysql database table with a field boolean_field of type boolean.
  2. Create a server action and server connect test_checkbox to access that field.
  3. Create a checkbox to display the value of boolean_field
  4. Add a button to load the server connect.
  5. Set the value of the boolean_field to 1 in the database
  6. View the page.
  7. Click on the button to load server connect test_checkbox
    The check box is checked.
  8. Click on the button to load server connect test_checkbox again.
    The check box is no longer checked.

Here is the code my example used for displaying the checkbox:

<input id="i_test_checkbox" name="boolean_field" 
   class="custom-control-input input_text" type="checkbox" 
   dmx-bind:checked="test_checkbox.data.test_checkbox.boolean_field" value="1">

Did you change state of the checkbox (clicked the checkbox) on the page before reloading the server connect?

No.

I just clicked the load server connect button multiple times.

The first time I click it the checkbox is checked correctly.

Every time I click it after that the checkbox is unchecked, even though I can see from the chrome dev console that test_checkbox.data.test_checkbox.boolean_field still has a value of 1.

If you didn’t uncheck the checkbox then it should stay checked after a reload of server connect. Did a small test here and it stayed checked.

The problem with form fields is that they also have an internal state. When you add an expression with dmx-bind, then app connect watches that expression and will update the attribute when the value changes. In your case the old value was true and the new value is also true, so it doesn’t update the component. When you unchecked the checkbox in the browser, it updates the internal state, the attribute will still be the same.

I think a solution could be to reset the form before updating it, then the inputs reset to their initial state.

In the last Wappler update (RC2) I fixed some issues with reset of checkboxes.

1 Like

Thanks for the update, Patrick! :slight_smile:
I’ll try resetting the form and see if that helps first.

Hi @patrick

I’ve tried both those things and I still have the issue.

I’ve made the server connect be triggered on the completion of the form reset using the dmx-on:reset"", and I’m now on 3.0.0 rc2.

What I did notice using git is that when I upgraded from 3.0.0 b3 to 3.0.0 rc2, then no files in my whole design tree were updated…

Anyway, I’d appreciate some more direction as my design has many checkboxes in it!

Best wishes,
Antony.

Here some sample code of what I mean with the reset before load.

<dmx-serverconnect id="sc1" url="myaction"></dmx-serverconnect>

<form is="dmx-serverconnect-form" id="form1" method="post">
  <input type="checkbox" name="mycheckbox" value="1" dmx-bind:checked="sc1.data.checked">
  <button dmx-on:click="form1.reset;sc1.load()">Reload</button>
</form>

To get new updated files you need to open a file with app connect on it and save it again, on save it will copy the new updated app connect files to your project.

Yippee… thank you @patrick, I’ve got your updated files to load and that has fixed it!

I had assumed that just doing the installation was enough to load your updates…

Although I am still a bit confused about exactly what “a file with app connect on it” means… can you clarify that so I can get it right next time?

  1. Is it a file with server connects on it?
  2. Or a file with the “App Connect Mode” lightning indicate lit up?
  3. Or something else?

A page where App Connect has been added to:

New files are only copied on saving any page which uses a component, which has been updated.

Brilliant, thanks @Teodor, I get it now! :slight_smile: