I am working on a project where I need to filter products based on selected categories and vendors using AJAX with jQuery and Django. However, despite no errors in the console, the product list is not updating as expected. Here are the relevant parts of my code:
JavaScript:
$(document).ready(function(){
$(".filter-checkbox").on("click",function(){
console.log("A checkbox have benn clicked");
let filter_object = {}
$(".filter-checkbox").each(function(){
let filter_value = $(this).val()
let filter_key = $(this).data("filter")
// console.log("Filter value is:", filter_value);
// console.log("Filter key is:", filter_key);
filter_object[filter_key] = Array.from(document.querySelectorAll('input[data-filter = '+ filter_key +']:checked')).map(function(element){
return element.value
})
})
console.log("Filter object is:", filter_object)
$.ajax({
url: '/filter-product',
data: filter_object,
dataType: 'json',
beforeSend: function(){
console.log("Trying to filter Product...")
},
success: function(response){
console.log(response);
console.log("Data filtered successfully...");
$("#filtered-product").html(response.data)
}
})
})
})
Django Views:
def filter_product(request):
categories = request.GET.getlist("category[]")
vendors = request.GET.getlist("vendor[]")
products = Product.objects.filter(product_status="published").order_by("-id").distinct()
if len(categories) > 0:
products = products.filter(cagtegory__id__in = categories).distinct()
if len(vendors) > 0:
products = products.filter(vendor__id__in = vendors).distinct()
context = {
"products":products
}
data = render_to_string("core/async/product-list.html",context)
return JsonResponse({"data":data})
Template:
<div class="showcase" id="filtered-product">
{% for p in products %}
<div class="showcase-banner">
<img src="{{p.image.url}}" width="300" class="product-img default">
<img src="{{p.image.url}}" width="300" class="product-img hover">
<p class="showcase-badge">15%</p>
<div class="showcase-actions">
<button class="btn-action">
<ion-icon name="heart-outline"></ion-icon>
</button>
<button class="btn-action">
<ion-icon name="eye-outline"></ion-icon>
</button>
<button class="btn-action">
<ion-icon name="repeat-outline"></ion-icon>
</button>
<button class="btn-action">
<ion-icon name="bag-add-outline"></ion-icon>
</button>
</div>
</div>
<div class="showcase-content">
<a href="#" class="showcase-category">{{p.cagtegory}}</a>
<a href="#">
<h3 class="showcase-title">{{p.title}}</h3>
</a>
<div class="showcase-rating">
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
<ion-icon name="star-outline"></ion-icon>
</div>
<div class="price-box">
<p class="price">{{p.price}}</p>
<del>{{p.old_price}}</del>
</div>
</div>
{% endfor %}
</div>
What I Have Tried:
1.Verified that the filter object is correctly formed by checking the console logs.
2.Ensured that the correct version of jQuery (full version, not slim) is included.
3.Checked the network requests using the browser’s developer tools to ensure the correct data is being sent and received.
4.Verified that the Django server is receiving the request and processing it without errors.
Despite all this, the product list is not updating on the page. Any guidance on what might be going wrong or how to debug this further would be greatly appreciated.
Additional Information:
Django version: 3.11.5
jQuery version: 3.6.0
Thank you in advance for your help!