Multiple dependent selects in a table - variables/inputs not honored for server connect load

I have a form that I need to link to multiple tables. For some reason, the server connect isn’t recognizing variables correctly. (It works the second time, not the first time when accessing the api.)

column 1: select box populated from server connect API (works)
column 2: another select box

  • When column 1 select is updated, this calls a different server connect to get values, then automatically populates drop-down list from the server connect. I had to use javascript to populate this select box. (below)
    column 3: a third select box based on what’s selected in column 2

for column 2, I’ve tried a ton of !@#$ to get this to work.

  • I couldn’t bind the server connect directly - this updates all of the drop down options for all rows.
  • I tried creating one server connect per row with a dynamic id, however, I found that when the id is dynamically generated, a select won’t bind to it.
  • I tried setting a hidden input on value change, however, this isn’t working. I see the value is updated in the field, however the sever connect isn’t pulling the value from the field.

The only way I could get this to work was to use javascript to set the server control variable directly

Here’s the code that I’m using in my javascript:

	function set_action_id(obj){
		index = obj.bindings.$index.value;;
        //tried setting hidden fields- that didn't work...


	function load_ddl(){
		var index=Number(document.all['txt_action_index'].value);

		var options = document.all['sc_get_action_type'];

			var opt = document.createElement('option');
			opt.value = options[i].option_table_name;

In my server connect, I tried setting the parameter to a variable and using that. I also tried using a hidden field. None of these worked. Trying to figure out why these values aren’t being recognized when the server control is loaded. Is there a better way to do this?

This really is not the optimum way to doing this in Wappler, there are so many other ways of doing this without reverting to javascript hacks.

Lots of threads on this type of thing like this one.

Thanks for taking the time to reply. That option works when you have a single select box that you are refreshing based on a selected value, not if you have multiple select boxes that you need to bind independently. I did find a tutorial on creating nested tables which would work for my use case but in this instance, I think it would not be performant to refresh all rows/options every time a user changes a drop-down box (and then because it’s a form, I have to save it every time a change is made.)

For context, in my app, the user is creating steps for a data integration process. The user adds a step and selects the step type (Get Data, Save Data, etc.) Then once they select the step type, a second drop-down appears which allows them to select the details for the step (i.e. if they are getting data, they select a data source, if they are saving data, they select a destination.)

So far I haven’t found a thread on binding a select box to a dynamic api call. (I was able to get a dynamic server connect to run, but wasn’t able to bind it to a select box. The properties on the dynamic server connect didn’t match the static server connect. For example, if I called the fetch() method on the SC via javascript it would retrieve the data but it didn’t run unless it was called via javascript and ultimately I could never get the binding to work on the select.)

BTW - I’ve also seen many of your tutorials and thank you for doing that. They are excellent and I appreciate your contributions to the community.