Get results of onClick event and keep previous query parameter
I have 3 dropdown load menus to filter the database results every time and I want an Ajax call to be triggered on the click event. Everything is working fine nowadays, except that each time I can only get the result for each of the dropdowns, not a combination of all 3. I can't figure out the solution because with the ajax call I can't get the url parameters addresses that I need for my next call. I'm open to listening to a better way to do this, if needed.
Some code: (Note: I am using Laravel framework)
<div class="col-lg-5">
<div class="btn-group dropup">
<button type="button" class="btn btn-default btn-sm">Sort By Location</button>
<button type="button" class="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="{{ route('properties') }}" data-location="">ALL</a></li>
@foreach ($allLocations as $location)
<li><a href="{{ route('properties') }}<?= $location->location_id ?>" data-location="<?= $location->location_id ?>">{{$location->name}}</a></li>
@endforeach
</ul>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-default btn-sm ">Sort By Agent</button>
<button type="button" class="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="{{ route('properties') }}" data-agent="">ALL</a></li>
@foreach ($allAgents as $agent)
<li><a href="{{ route('properties') }}<?= $agent->person_id ?>" data-agent="<?= $agent->person_id ?>">{{$agent->lastname.' '.$agent->firstname}}</a></li>
@endforeach
</ul>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-default btn-sm ownerf" id="ownerFilter">Sort By Owner</button>
<button type="button" class="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="{{ route('properties') }}" data-owner="">ALL</a></li>
@foreach ($allOwners as $owner)
<li><a href="{{ route('properties') }}<?= $owner->person_id ?>" data-ownername="<?= $owner->lastname ?>" data-owner="<?= $owner->person_id ?>">{{$owner->lastname.' '.$owner->firstname}}</a></li>
@endforeach
</ul>
</div>
</div>
and some jQuery:
function updateProperties(url){
$.get(url)
.done(function(result){
$data = $(result);
var rows = $data.find("#propertyResults > *");
$('#propertyResults').fadeOut().html(rows).fadeIn();
var pages = $data.find("#propertyPages > *");
$('#propertyPages').empty().html(pages).fadeIn();
});
source to share
What you are trying to achieve is using multiple search filters. Why don't you use checkboxes
or multi-select dropdown
if you want results from all three combinations.
Example:
If there are three options. Whenever the user selects an option using jquery you can get the values of the selected options
Here is an example jquery snippet
$('select#my_multiselect').val()
This will return an array of the selected values . Send it as json to the server and return the results.
source to share