Laravel Ajax show list based on selected option

Question

I'm using Laravel. I have select dropdown and by selecting specific option, I'm filtering a content list and refreshing the page using the Laravel $request but I'm struggling filtering the list without refreshing the page. This means I have to use Ajax here.

Here are the parts of my code:

In the controller I pass two variables: "categories" and "selectedCategory".

The categories variable is the array from the categories and selectedCategory is simply a specific select option from the list:

$selectedCategory = $request->get('category_id', '62319');

In the view I have this: The select dropdown.

  <select id="categories" name="category_id" class="form-select">
    @foreach($categories as $category)
      <option value="{{ $category['id'] }}" {{ $category['id'] == $selectedCategory ? 'selected' : ''}}>{{ $category['serviceCode'] }}</option>
    @endforeach
  </select>

The content list:

@foreach($ranges as $range)
  @if($range->id == $selectedCategory)
  <div class="col-sm-6">
    <div class="custom-checkbox">
      <input type="checkbox" id="{{ $range->id }}" name="serviceTimeRangesIds[]" value="{{ $timeRange->id }}">
      <label for="{{ $range->id }}"><span>{{ $range->startHour }}</span> - <span>{{ $range->endHour }}</span></label>
    </div>
  </div>
  @endif
@endforeach

from this line: @if($range->id == $selectedCategory) - I'm filtering the content.

As I need to use Ajax, I'm not sure how to achieve this filtering without refreshing the data.

Here's what I tried so far:

In the blade down bellow I have this:

  <script>
    $(document).ready(function(){

      $("#categories").on("change", function () {
        var service_id = this.value;
        //alert(service_id);

        $.ajax({
          url: "{{ route('changeCategoryId') }}",
          type: "POST",
          data: {
            "_token": "{{ csrf_token() }}",

          },
          success: function() {
              console.log("OK");
          }
        });
      });

    });
  </script>

This is the route:

Route::post('/changeCategoryId', 'App\Http\Controllers\CategoryController@changeCategoryId')->name('changeCategoryId');

Here's the controller for that:

public function changeCategoryId(Request $request) {

}

So, what exactly I need to put in this controller so I can get the data and filter it with Ajax?

Answer 1

Ensure you create a blade partial view for the filtered content (for instance, content.blade.php). This partial view should encompass the HTML structure you wish to update dynamically.

When a user selects a category from the dropdown, a Ajax request is dispatched to your Laravel backend in this configuration. This request filters the content based on the selected category ID and returns the filtered content as a partial view. Ultimately, the JavaScript updates the page content with the received partial view.

public function changeCategoryId(Request $request) {
    $selectedCategory = $request->input('category_id');
    $filteredContent = // Logic to filter content based on $selectedCategory
    
    return view('content', ['ranges' => $filteredContent])->render();
}