Form reset issue

In Modal we have a select menu which has a default selected value received from SC action.
On Modal Close we have a Form reset action.
After I close the modal and will open it again - default value is not set in Select element.
After page refresh - value is set again until I close the Modal.

<dmx-serverconnect id="serverconnect1" url="/api/income/getInflationRate"></dmx-serverconnect>
<div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1" dmx-on:hide-bs-modal="form1.reset()">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="form1"><select id="select1" class="form-select" dmx-bind:options="serverconnect1.data.queryGetInflationRates" optiontext="rate" optionvalue="rate" dmx-bind:value="serverconnect1.data.queryGetInflationRates.where(`default`, true, '==')[0].rate">
          </select></form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col">
      <button id="btn1" class="btn" data-bs-toggle="modal" data-bs-target="#modal1">Show</button>
    </div>
  </div>
</div>
<meta name="ac:route" content="/test">

modal_select

Your form is missing some values:

  • Method "Post" is not set
  • Null value is not set, so the form will reset to the dbase value instead of null
    <form id="form1" method="post"><select id="select1" class="form-select" dmx-bind:options="serverconnect1.data.queryGetInflationRates" optiontext="rate" optionvalue="rate" dmx-bind:value="serverconnect1.data.queryGetInflationRates.where(`default`, true, '==')[0].rate"> <option value="">Select a value</option></select></form>

The form reset action resets the inputs to their initial values.
Is the expression:

{{serverconnect1.data.queryGetInflationRates.where(`default`, true, '==')[0].rate}}

returning a value on modal open? Can you addd in the modal body to test what does it return?

  1. I placed SC action in Modal - on form close-open value is not set
  2. I set to load SC action on Modal open - on form close-open value is not set
<div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1" dmx-on:hide-bs-modal="form1.reset()" dmx-on:show-bs-modal="serverconnect1.load({})">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <dmx-serverconnect id="serverconnect1" url="/api/income/getInflationRate"></dmx-serverconnect>
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="form1"><select id="select1" class="form-select" dmx-bind:options="serverconnect1.data.queryGetInflationRates" optiontext="rate" optionvalue="rate" dmx-bind:value="serverconnect1.data.queryGetInflationRates.where(`default`, true, '==')[0].rate" name="select1">
          </select></form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col">
      <button id="btn1" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal1">Show</button>
    </div>
  </div>
</div>
<meta name="ac:route" content="/test">

But is the value available?
Just add this after your form and check if any value is returned:

<p>{{serverconnect1.data.queryGetInflationRates.where(`default`, true, '==')[0].rate}}</p>

It is available all the time.

modal_select_1

Ping

Could you check if the default value is correctly set with the following update:

dmxAppConnect.zip (119.1 KB)

Unfortunately with provided update files values from Server Connect action in select are not loaded at all.

And there is an error in console:

Sorry for that, seems I copied a bit to much, here an updated version:

dmxAppConnect.zip (119.1 KB)

2 Likes

Worked like a charm.
Thank you @patrick

Fixed in Wappler 7 beta 9

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.