Ok, I'm going to try to explain this the best I can.
I have a product filter on my website that is built using php foreach to create the filter headers and options from a data base. The code it generates is below.
<div class="card mb-2 card-body alert-filters">
<h4>Product Filter</h4>
<div class="row">
<div
class="col-md-3">
<h5>Price</h5>
<input type="hidden" id="hidden_minimum_price" value="0"> <input
type="hidden" id="hidden_maximum_price" value="50">
<p id="price_show">£0 - £50</p>
<div
id="price_range" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-
content">
<div class="ui-slider-range ui-corner-all ui-widget-header" style="left: 0%; width:
100%;"></div>
<span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default"
style="left: 0%;"></span><span tabindex="0" class="ui-slider-handle ui-corner-all ui-
state- default" style="left: 100%;"></span>
</div>
</div>
<div class="col-md-3">
<h5>Material</h5>
<div
style="height: 180px; overflow-y: auto; overflow-x: hidden;">
<div class="list-group-item
checkbox"><label><input type="checkbox" class="common_selector brand1" value="3">
Metal</label>
</div>
<div class="list-group-item checkbox"><label><input type="checkbox"
class="common_selector
brand1" value="1"> PLA</label></div>
<div class="list-group-item checkbox"><label><input
type="checkbox" class="common_selector brand1" value="4"> Resin</label></div>
</div>
</div>
<div
class="col-md-3">
<h5>Base</h5>
<div style="height: 180px; overflow-y: auto; overflow-x: hidden;">
<div class="list-group-item checkbox"><label><input type="checkbox"
class="common_selector
brand2" value="2"> Included</label></div>
</div>
</div>
<input type="hidden" name="cPath" id="cPath"
value="15_13_14">
</div>
The category id is added to the class 'brand'. This is then passed to the jquery below -
$(document).ready(function(){
filter_data();
function filter_data()
{
$('.filter_data').html('<div id="loading" style="" ></div>');
var action = 'fetch_data';
var minimum_price = $('#hidden_minimum_price').val();
var maximum_price = $('#hidden_maximum_price').val();
var cPath = $("#cPath").val();
var brand = get_filter('brand');
$.ajax({
url:"ext/filter/fetch_data.php",
method:"POST",
data:{action:action, minimum_price:minimum_price, maximum_price:maximum_price,
brand:brand, cPath: cPath},
success:function(data){
$("#product_list").html(data);
}
});
}
function get_filter(class_name)
{
var filter = [];
$('.'+class_name+':checked').each(function(){
filter.push($(this).val());
});
return filter;
}
$('.common_selector').click(function(){
filter_data();
});
$('#price_range').slider({
range:true,
min:0,
max:50,
values:[0, 50],
step:1,
stop:function(event, ui)
{
$('#price_show').html('£' + ui.values[0] + ' - ' + '£' + ui.values[1]);
$('#hidden_minimum_price').val(ui.values[0]);
$('#hidden_maximum_price').val(ui.values[1]);
filter_data();
}
});
});
This works fine if I do not add the category ID as it just uses the 'brand'.
What I am wanting to do is have a var for 'brand1', 'brand2' etc depending on how many categories there are or a way to group them together and I can split them out on the proceeding page.
source https://stackoverflow.com/questions/70128323/foreach-loop-data-passed-to-jquery
Comments
Post a Comment