Variable to Modal then Modal executes query

So, how should this be done:

I have a table that has a column with a button that will open a modal. In the modal I would like to execute another database query and then display the results. I don’t want to have the query run unless the modal has been displayed. Goal is to cut down connecting to the DB server. No need to query all of the additional data when the table is built if it will rarely be used.

Clear as mud.

Thanks for any input.

Hey Sam,

Add a server connect action that performs this query, and set it to No Auto Load.

On the modal, use the Dynamic Event Modal Shown to run the server action.

mebeingken,

I need to also pass an ID from the table to the modal. This ID will be used to only return the correct records from the DB. I’ve got the modal and shown event setup. Just need to figure out how to pass the ID.

Thanks for the help thus far, Sam.

If the server connect action has a GET variable, the you will be able to set that parameter when you trigger it…just point to the value that holds that ID.

BUt if you really need to, you could add a variable on the modal and set that variable using then Click dynamic event of the button that opens the modal.

Since the ID will be unique for each row in the table, a GET variable wouldn’t work. So I followed you other suggestion and think I have the variable being set for the modal. But, I need to pass the ID to the server connect action. I do I set an input parameter for the action if the variable being set is in the modal? I’ve only ever used POST, GET, or the Query Manager.

Maybe this will help…I went a different route.

You have a server connect that does not auto load and opens the modal on success.

And you have a modal that will display the result of the server connect.

And you have a repeat with a button. In my example, I’m just using the repeat index as the id…you would obviously use something else. the button calls server connect (which as noted above will open the modal.

I use the following method to achieve what you want using the fewest dependent pieces. The reason I do it the following way is to cut down the trail I have to follow when something doesn’t work.

I add a Data Detail component (based on the same data as my table) which then drives the other actions.

When I click the desired cell I set the ID of the data_detail to match the id of the table row
I have a Class Toggle Dynamic Attribute on the table row that toggles the class to bg-dark if “id == data_detail.data.id” - to indicate which row is selected

On the Modal I set the Modal Show Dynamic Attribute to data_detail.data.id - this makes the modal appear when it has anything greater than 0 in the data_detail id.
On the Modal I set the Hidden Dynamic Event to data_detail.select(0) - this sets the data_detail id to 0 and removes the data detail, removes the bg-dark class from the table row etc

I set the variable of the server connect that is to fire from data_detail.data.id - once that changes the Server Connect component will fire and the data is then available to your modal to work with.

I would highly recommend that you put all your server connects, data details, variables, query’s and modals at the top of your page before your page html structure. The main reason that I recommend this is because if you don’t and your page gets complicated you will drive yourself barmy trying to locate them as you work later.

1 Like

Have a look at https://www.dmxzone.com/go/32899/master-detail-relationship-with-app-connect/ to get an idea.

It is easier NOT to use a variable.

You can bind the server action load to the ID field you want to pass directly by selecting it from the repeat region of the table

We start with a simple table

We add a modal.show() to the Dynamic Click Event of the appropriate cell/ button (as per what you want)

Then in the Show dynamic event we load the server action (previously set to no Auto Load)

(You could also do this alternatively within the click event where you place the modal.show() rather than the modal.show() dynamic event, both work)

and bind it directly to the repeat ID value we want to use

The rest is handled by the Voodoo Magic inside Wappler

No need to use intermediate variables at all, in fact i would definitely say DONT use that method. I used to do it that way and have had issues which caused erroneous results

1 Like

here is an old thread where I discussed this