0

I am having a problem here. I have a dropdown whereby upon selecting an option I get certain data from the database using jQuery. Everything works fine except that the Ajax works only once. After selecting the first option the data is derived from the database and everything works well but when I try selecting another option the Ajax doesn't call and I don't see anything in the console.i am using a class to call the jQuery function.where might I going wrong.

Here is my code - in the blade file:

         <form name="sortproducts" id="sortproducts">
            <input type="text" name="url" id="url" value="{{ $url }}" style="display:none">
            <select name="sort" class="sortprods" id="sort">
                <option value="">Default Sorting</option>
                <option value="latest_products"
                    @if (isset($_GET['sort']) && $_GET['sort']=="latest_products")
                        selected=""
                    @endif
                >Latest Products</option>
                <option value="most_popular"
                    @if (isset($_GET['sort']) && $_GET['sort']=="most_popular")
                        selected=""
                    @endif
                >Most Popular</option>
                <option value="low_to_high"
                    @if (isset($_GET['sort']) && $_GET['sort']=="low_to_high")
                        selected=""
                    @endif
                >Price:Low to High</option>
                <option value="high_to_low"
                    @if (isset($_GET['sort']) && $_GET['sort']=="high_to_low")
                        selected=""
                    @endif
                >Price:High to Low</option>
                <option value="product_name_a_z"
                    @if (isset($_GET['sort']) && $_GET['sort']=="product_name_a_z")
                        selected=""
                    @endif
                >Product Name:A to Z</option>
                <option value="product_name_z_a"
                    @if (isset($_GET['sort']) && $_GET['sort']=="product_name_z_a")
                        selected=""
                    @endif
                >Product Name:Z to A</option>
            </select>
        </form>

The jQuery code:

     $(document).ready(function() {
        // sort products on dropdown
        $(".sortprods").on('change',function() {
            var sortproducts=$(this).val();

            alert(sortproducts);
            console.log(sortproducts);

            $.ajax({
                url:'/'.$url,
                method:"get",
                data:{
                    sort:sortproducts
                },
                success:function(data){
                    $('.showproducts').html(data);
                }
            });
        });
      });
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
stephen waweru99
  • 151
  • 15
  • 1
    Where's `.showproducts` defined? Is it outside `.sortprods`? ie is sortprods a child of showproducts and thus gets rebuilt/replaced by the `success:`? – freedomn-m Jun 16 '22 at 12:35
  • Try changing `$(".sortprods").on('change',function()..` to `$(".showproducts").on("change",, ".sortprods", function()...` – freedomn-m Jun 16 '22 at 12:35
  • @freedomn-m the ".showproducts" class here represent the div where the response data is sent to..the ".sortprods" class is the one inside the ".showproducts" class div – stephen waweru99 Jun 16 '22 at 12:42
  • 1
    Thanks for confirming - your `$(".sortprods").on('change'` only applies to the `.sortprods` that exists when the page loads - as sortprods is inside showproducts, when you recreate showproducts with `$('.showproducts').html(data);` you're also recreating .sortprods, so the event no longer applies (as it's a different `.sortprods`). You need to use event delegation (shown above). – freedomn-m Jun 16 '22 at 12:53
  • 1
    @freedomn-m you are right works like a charm – stephen waweru99 Jun 16 '22 at 12:55

0 Answers0