Chaining Dropdowns with Ajax Handlers

[Onyekam]

Expected behavior

I would like to populate an "Areas" dropdown based on the selected value from a "Cities" dropdown. So if you select a City, you instantly get its corresponding areas within the area dropdown and so on, before you hit a button to execute a search function.

Actual behavior

I am unable to pass/or do not know how to pass the value of the selected Cities dropdown into my components "onChoosecity" function to execute the query that would return the corresponding Areas using Ajax handlers.

Reproduce steps

Here's my code:

• The onChooseCity:

  protected function onChooseCity(){
      $valueInCityDropdown = // do not know how to get this value;
      $areasInCity = Area::where('id', $valueInCityDropdown)->get(); 
      return ['#areaDropdown' => $this->renderPartial('@arearesults', [
          'areasInCity' => $areasInCity
      ])];
  }

• the Component default.htm partial :

<select 
      data-request="onChooseCity"   
      class="chosen-select">
      <option value="1">- Choose Your City -</option>
      {% for city in cities %}
       <option value="{{city.id}}">{{city.city_name}}</option>
       {% endfor %}
       </select>
<div class="custom-select select-type4 high location">
  <div id="areaDropdown"></div>
  </div>

• The arearesults.htm partial:

{% set foo = bar %}
    <h1>{{foo}}</h1>

The partial renders anything I return from onChooseCity() function. I just don't know how to get the value from the city dropdown select into my function for my query to work and return the list of areas.

October build

(October build number)

[ivandoric]

Did you check out this page: https://github.com/octobercms/october/blob/master/modules/system/assets/ui/docs/select.md

So your handler should be data-handler="onGetOptions"

and then you use a public function:

public function onGetOptions()
{
    $results = [
        'key' => 'value',
        ...
    ];

    return ['result' => $results];
}

I have never done this, but I think this could work for you.

[Onyekam]

Yes, I came across that page; but not sure exactly how this applies or how to apply it. I already tried implementing it but didn't work for me. Let me give it another shot though...

[Onyekam]

So I gave this another shot: https://github.com/octobercms/october/blob/master/modules/system/assets/ui/docs/select.md but I used "data-request" instead of "data-handlers" and at the moment hard coded the value of "data-request-data" like so:

 <select 
  data-request="onChooseCity"
  data-minimum-input-length="2"
  data-ajax--delay="300"
  data-request-data="value: '1'"   
  class="chosen-select"
  select-no-search>
  <option value="1" selected="selected">- Choose Your City -</option>
  {% for city in cities %}
    <option value="{{city.id}}">{{city.city_name}}</option>
  {% endfor %}
</select>

I was able to get the desired response. However the request is hardcoded from within "data-request-data" attribute. Any ideas on how to make it dynamic based on the selected option?

[ivandoric]

As I've said I never done this, and I'm no October expert by any stretch of imagination. Maybe ask on Octobers forum or Slack channel.

[Onyekam]

Alright Ivan. Thanks a lot for your input!

[ivandoric]

Sorry I couldn't help you more.

[Onyekam]

I found a workaround, and would like to drop it here in case it would be useful to someone. I wrote a JQuery function to update the "data-request-data" attribute every time a new option was selected in the dropdown.

<script>
    $('#cityselect').change(function(){
        console.log($(this).val());
        $(this).attr('data-request-data', 'city:'+$(this).val());
        $(this).removeData('request-data');
    })   
</script>

[ivandoric]

Thanks @Onyekam, much appreciated.

[w3labz]

Hi, @Onyekam I was also struggling to get the selected value in code and then I noticed that if I add the name attribute to the source dropdown then the value is available in the post(drop_down_name).

So the select becomes

<select id = "category_id"  name = "category_id" 
      class= "form-control custom-select" 
      data-request="onSwitchCategory" >

And in public function

public function onSwitchCategory()
{
if (post('category_id') < 0) // here it is available in post('category_id')
 return;
else
 do whatever
}

I can now use the value without any issue and extra coding.

I hope this will help someone implementing Ajax for the dropdown.

OctoberCMS document needs to be revamped for most of the front end material.