How to fill suburbs from selected city?

#1

I have a filter form where all of the fields are wire:model.defer with the Filter button triggering a search action. I want to have some dynamic action though when I select a city from a select field to load all the suburbs from that city in another select field. I managed to to this using AlpineJS:

                <div x-data>
                    <label>City</label>
                    <select wire:model.defer="cityId" class="form-row" id="cities" @change="$wire.loadSuburbs($event.target.value)">
                        @foreach ($cities as $index => $city)
                            <option value="{{ $city['id'] }}">{{ $city['name'] }}</option>
                        @endforeach
                    </select>
                </div>

But the issue is, after the suburbs dropdown is updated the component is rerendered and the search is executed again with the new city id. I want only my suburbs dropdown to get filled in after the component is rerendered and search executed only if I explicitly hit the FIlter button.

How is that possible?

#2

I ended up doing this:

                    <input type="hidden" id="selected-city-id" value="{{ $cityId }}" />
                    <select wire:model.defer="cityId" class="form-row" id="cities" @change="$wire.loadSuburbs($event.target.value, document.getElementById('selected-city-id').value)">
                        @foreach ($cities as $index => $city)
                            <option value="{{ $city['id'] }}">{{ $city['name'] }}</option>
                        @endforeach
                    </select>

public function loadSuburbs($cityId, $oldCityId)
{
    $this->searchProfiles($oldCityId);
    $this->suburbs = getSuburbs($cityId);
}

So this actually rerenders the page again but with the oldCityId so results appear to be the same until you hit the Filter button explicitly. Not sure if there is alternative to this hacky solution.

#3

Any tips in my article here: https://talltips.novate.co.uk/livewire/dynamic-cascading-dropdown-with-livewire

its essentially the same requirement