i have this model function inside my user_model.php, it should wait for a value ($color) that is coming from user clicks on some buttons in a view through controller, how to make it async
public function get_item_options_values($color){
$this->db->select('
items_options_value.value,
items_options_value.option_id,
items_options_value.item_id,
items_options_value.var_id
');
if($color!== null)
{
$this->db->from('items_options_value');
$this->db->join('category_options', 'category_options.id = items_options_value.option_id ');
$this->db->join('items_variations', 'items_variations.id = items_options_value.var_id ');
$this->db->where('items.options.values.value',$color);
}
else{
$this->db->from('items_options_value');
$this->db->join('category_options', 'category_options.id = items_options_value.option_id ');
$this->db->join('items_variations', 'items_variations.id = items_options_value.var_id ');
}
$query = $this->db->get();
return $query->result();
}
the controller gets the value coming from view through ajax call
public function show_item(...){
...
$color = $this->input->post('color');
$data['item_options_values'] = $this->user_model->get_item_options_values($color);
...
}
looping through some divs and send the value to controller through ajax
<script>
colors = document.querySelectorAll('.colors');
sizes = document.querySelectorAll('.sizes');
colors.forEach((c) => {
c.addEventListener('click', function() {
color = this.querySelector('.color').getAttribute('data')
$.ajax({
type: "POST",
url: '<?php echo base_url();?>Home/show_item',
dataType: 'json',
data: {
color: color
},
success: function(data) {
document.querySelectorAll('.sizes').forEach((s) => {
console.log(s.querySelector('.size').innerHTML = data);
})
console.log(data);
}
});
})
})
</script>
the code is not working and the value is not being sent
What I have tried:
i've tried to play with script code, it produces a value every on click event, but the data is not being sent, and it alerts "something is wrong"