Pass the selected value of select input to Data Detail

Wappler General
1

Hello,
Good day!
I would like to ask how do we pass a select input value to the data detail component?
Here is what I currently have:

<div class="form-group">
  <label for="inp_position">Position </label>
  <select class="form-control form-control-sm" id="inp_position" name="inp_position" dmx-bind:options="svrconn_read_positions.data.q_positions" optiontext="code + &quot; - &quot; + name" optionvalue="id" dmx-bind:value="value" dmx-on:click="svrconnform_create_employee.dd_read_positions_filtered.select(value)" dmx-on:change="svrconnform_create_employee.dd_read_positions_filtered.select(value)">
  </select>
  {{inp_position.value}}
  <dmx-data-detail id="dd_read_positions_filtered" dmx-bind:data="svrconn_read_positions.data.q_positions" key="id">
	{{svrconnform_create_employee.dd_read_positions_filtered.data.id}} - {{svrconnform_create_employee.dd_read_positions_filtered.data.low_rate}}
  </dmx-data-detail>                          
</div>

The select input and the dropdown options are all good. I just need to pass the selected value (which is the ID) to the data detail component which I cannot do. The bindings inside the data detail component are for testing purposes and are not showing any values. I put in there {{inp_position.value}} for testing purposes too, and it is showing in the page correctly.

image

Here’s from chrome’s web inspector:
image

Any ideas?

Thank you in advance.

2

Hey @zitroware,
You don’t need to use a detail region here. In your case you need a regular database query, filtered by the input.

1 Like
3

Hi @Teodor, I already have the query results downloaded and I just need to get the values from that. It is already being used by the input select and being passed down to the dropdown list (options). I need to get a value that is associated to the option that is selected.
Is there any other way I can get it to work without sending another request back to the server just to get those values which I already have? Will Data View help here?

Thanks.

4

As I explained, you just need to filter a database query by the value of the input.
So, one server action with a query for your input values and another one for the results on the page.
Data View can also be used with client side filtering if your records are no more than about 3k.

5

I found a workaround/solution within the forum. Thanks to @nshkrsh.

With this, it is possible to pass the ID to the Data Detail. But there is no use for the Data Detail any longer for I can now get the "name" of the selection. I haven't tried using it with the Data Detail yet though.

The point of using this is so I don't need to send another request back to the server to get the information which is already on the page.

Thanks.

6

Just an update and for anyone looking for a workaround, it works with the Data Detail component.

Here’s my select element:
<select class="form-control form-control-sm" id="inp_position" name="inp_position" dmx-bind:options="svrconn_read_positions.data.q_positions" optiontext="name" optionvalue="id" dmx-on:updated="svrconnform_create_employee.dd_for_position.select(svrconn_read_positions.data.q_positions[inp_position.selectedIndex].id)"></select>

Take note that dmx-on:updated gets the latest value. The dmx-on:change seems to be always getting only the last value and not the new one (upon selecting). This means onchange is one value behind onupdated.

Thanks also to @Teodor for the solution. It is much easier with his solution and send back a GET request for the value required.
The one from @nshkrsh is a workaround. But it satisfies my requirement to not to send back anything to the server.

1 Like