Help with using drop down select to open 1 of a series of modals

Wappler General How To
#1

So I’m not sure if this is the best way to do this or not. But I would like to use a select field to let the user choose a particular item that is displayed and opens on a Modal. There would be 4 items and 4 modals. I tried several things but am not experienced enough to get it figured out. Any suggestions would be helpful.

thank you

#2

Hi @dmbe11,

Is your select field inside a form where you can have a button that is clicked? If so, then you should be able to do a dynamic event, mouse, on click to open the modal based on the selection chosen.

My initial thought was to do an open modal based on the selection changing, but with a select field, every time a user selects something, a modal would open. That would not make for a good user experience, so I think a button next to the select field would be better.

#3

I’ll give that a try. Makes sense and let you know how it worked.

#4

If that doesn’t work for you, another option off the top of my head is:

  • Create a Wappler variable, called something like modal_view
  • Set it up so that when the value of the drop-down / select is changed, it sets the value of modal_view to something like 'option1'
  • Then in your modal, you simply add a dynamic attribute for the Modal Show which would look like this in the code view:
dmx-bind:show="modal_view.value == 'option1'"

Not sure if there is a better way…but that’s an option that will work

#5

I tried this so far, I the form as Scott suggested and then I did the following steps:

  1. Made the option values the same as the Modal id’s. modal1, modal2, modal3.
  2. Placed a button in the form under the select field.
  3. created a variable called it modal_view
  4. set the value of this variable = to the “form1.select_product.value”

would that be what you were suggesting? I was not sure about step 4 and if I need the button click to populate the varaible

#6

That’s kind of it. IN my suggestion you wouldn’t need a button, when the user selected an option it would open the modeal automatically.

The variable modal_view doesn’t need a button to populate it, but you do need to set up a dynamic event on the select option.

image

In the code view it would look like:

<select id="select1" class="form-control" dmx-on:changed="modal_view.setValue(select1.value)">

And then in the modal you have:
image
Which would look like:

dmx-bind:show="modal_view.value == 'modal_id_1'"

I haven’t tested this out fully to see if there are any issues, but the logic is sound and it should work

#7

having some issues, maybe I missed something silly, here are my code views:

variable:

<dmx-value id="modal_view" dmx-bind:value="select1.value"></dmx-value>

select field:

<select id="select1" class="form-control" dmx-on:changed="modal_view.setValue()">

modals:

<div class="modal" id="modal_id_1" is="dmx-bs4-modal" tabindex="-1" role="dialog" dmx-bind:show="(modal_view.value == select1.value)">

Thank you

#8

Well, now I see it. the value in the select has to be set. Ill try fixing that

#9

That was it, thank you

#10

Yep looks like. You also might not want to bind a value to the variable as it might open the modal when the page loads.

#11

Given that you have a fixed number of modals - 4, another solution could be to just use ternary operator to show the modal based on value selected.
EG:

<select id="select1" class="form-control" dmx-on:changed="value == 1 ? modal1.show() : value == 2 ? modal2.show() : value == 3 ? modal3.show() : modal4.show()">