Dependent Drop Down Issue

Wappler General Need Help
1

Hi All,

I've got an issue with a dependent drop down, I've searched here but cant find anything specific to this problem.

I have a simple dependent drop down:

image

The 'course' select is a list of course titles in our database that is filtered with a trainingcompanies table - that means we we only show 'live courses' that have companies who are able to carry out that training.

When a course title is selected, the countries table is queried to pull out the countries of all companies who carry out that training. The companies and the countries change with each training course type.

It works perfectly after the initial selections have been made, the problem is on initial page load, the 'country' select doesn't populate. Heres what it looks like:

menuitems2

Both dropdowns trigger on 'updated' and not 'changed' eg dmx-on:updated - I've tried dmx-on:changed and it made no difference. The countries severconnect is a 'no auto load' as we don't know what countries will have records when the page loads.

Heres a link to the page so you can see it yourself:
https://r16.uk/647e12

I've done this a fair few times in the past but just cant see why this one is failing - Another fresh pair of eyes on this would be most helpful!

2

Maybe you have to check again the update event actions of the course selet...

I don't know why it doesn't "react" (loads the EasyTrainCountries) on the first selection:

image
image1917×924 142 KB

The EasyTrainCountries loads on the second selection:

image
image1919×920 136 KB

It must be something simple brother but you work on it too long so you just don't even think and look at it...

If you like please share:

  • the countries selection update event code
  • the EasyTrainCountries definition code on your page (dynamic "auto-load", parameters etc)
3

I'm code blind right now, been looking at it for ages :slight_smile:

course select:

 <select id="seltrainingcatid" class="form-select" name="trainingcatid" dmx-bind:options="scLiveTrainingCats.data.queryLiveTrainingCats" optiontext="TrainingCatName" dmx-on:updated="scCountries.load({trainingcatid: selectedValue},true);selcountry.focus()" optionvalue="TrainingCatID" required="">
                                    <option selected="" value="">Select a course</option>
                                </select>

country update select:

 <select id="selcountry" class="form-select" name="country" dmx-bind:options="scCountries.data.query" optiontext="CompCountry" optionvalue="CompCountry" dmx-on:updated="scGetMap.load({country: selectedText, trainingcatid: seltrainingcatid.selectedValue},true)" required="">
                                    <option selected="" value="">Select a country</option>
                                </select>

I just cant see a reason why the initial load doesn't return the data to the drop down..

4

Maybe try using a Flow (with a short wait of 200ms) to control the load for Countries upon change to the Course? We had something similar and put it down to AC2 being so fast as never had to do this with AC1. All of our No Auto Load Actions are controlled this way these days.

5

That may be worth a try, AC2 is significantly faster so it could may well be an issue.

6

Why do you do a onupdated or any other event for the second dropdown data source?
You just need to add the first dropdown value in the GET param of the second one’s server connect and it will automatically update when a value is selected.

1 Like
7

Come on now @Teodor you know how us lot like to complicate things for ourselves! We are special.

:smiley:

3 Likes
8

the second dropdown triggers another serverconnect that pulls out company details in the country selected in the second drop down. It all works fine, just not on the initial try on a fresh page or a reloaded page.

@Cheese I just tried a Page Flow as per your suggestion and it didn't resolve the issue:
https://r16.uk/647e12

9

But why are you using onupdated event on the first dropdown? All you need is to bind the first select value in the second dropdown data source (its GET param). No need of dynamic events.

Even if an event is required for anything / for some reason you need the onchnaged event, not onpudated.

1 Like
10

the first drop down must fire a SC so I can list all countries that have companies who offer the type of training selected, as far as I see it the only way to do this is with an updated or changed event - I have tried both updated/changed and they both have the same result. The countries SC can then populate the second drop down with a list of countries.

11

Its working!!

Weird, the only way I could get this to work was to create a hidden input under the first select, then use that to run the SC to populate the country select.

 <select id="seltrainingcatid" class="form-select" name="trainingcatid" dmx-bind:options="scLiveTrainingCats.data.queryLiveTrainingCats" optiontext="TrainingCatName" optionvalue="TrainingCatID" required="" dmx-on:updated="">
                                    <option selected="" value="">Select a course</option>
                                </select>
                                <input id="text1" name="text1" type="hidden" class="form-control" value="test cat id" dmx-bind:value="seltrainingcatid.selectedValue" dmx-on:updated="scCountries.load({trainingcatid: value},true)">

I tried all ways to get the first select to do this on its own but it kept failing on the initial page load. It aint pretty but it works ( bit like me really :slight_smile: )

Many thanks to all of you for pitching in, your assistance is much appreciated: @famousmag @Cheese @Teodor

2 Likes
12

When you are using the value of the select as a value for the GET parameter in your server action, the server action will automatically reload when the select value has changed. You don’t need any dynamic events set on the select!

3 Likes
13

For those that are following this topic, you may like to view the following video.

3 Likes
14

@TMR I know you got it working now but:

There was a bug fixed few weeks ago:

Is app connect updated to latest version?

15

thanks for that, I'm on the latest version: 2.0.10 - it was strange behaviour, I've done this a lot of time before but this time it just wasn't working as expected..

16

As i mentioned above, you have one unnecessary step in your setup and this is the event loading the server action for the second select data source.
You just need to bind the value of the first select in the second select's server action and it will be automatically loaded!

1 Like