This question already exists:
</div>
</div>
<div class="grid--cell mb0 mt4">
<a href="/questions/44327551/change-event-not-firing-on-ajax-loaded-elements" dir="ltr">change event not firing on ajax loaded elements</a>
</div>
<div class="grid--cell mb0 mt8">Closed <span title="2017-06-02 17:05:42Z" class="relativetime">2 years ago</span>.</div>
</div>
</aside>
I have a 2 ajax call. First ajax call populates the dropdown box which works correctly, bu the second ajax call uses change event function. Whenever the dynamically populated item from the dropdown is clicked it lists the products details with image.
In below code the change function triggers becos it alerts the data item selected. but the problem starts inside the ajax i guess. so i am not getting the result(product details)
Problem: it donot list the products
also how to use var_dump($_POST) to check name1 is passed correctly
second ajax code:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$("#name").on('change',function (e) {
var name1 = this.value;
alert("name1 = " + name1);
$.ajax ({
data:{name1: name1},
type: 'POST',
url: 'dataprod.php',
success: function (response) {
console.log(response);
$('.products-wrp').html('');
$('.products-wrp').hide();
$('.products-wrp').html(response);
$('.products-wrp').show();
},
});
});
</script>
dataprod.php
<?php
$name1 = $_POST['name1'];
$results = $mysqli_conn->query("SELECT product_name, product_desc, product_code,
product_image, product_price FROM products_list where product_name='$name1'");
$products_list = '<ul id ="products_list" class="products-wrp">';
while($row = $results->fetch_assoc()) {
$products_list .= <<<EOT
<li>
<form class="form-item">
<h4>{$row["product_name"]}</h4>
<div>
<img src="images/{$row["product_image"]}" height="62" width="62">
</div>
<div>Price : {$currency} {$row["product_price"]}<div>
</form>
</li>
EOT;
}
$products_list .= '</ul></div>';
echo $products_list;
?>
</div>