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();
});

      

+3


source to share


1 answer


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.

+2


source







All Articles