从PHP文件更改功能ajax调用

Question

The following code consists of drop-down "(id=name" which populates from "listplace.php" through ajax call which works correctly.

Now I am trying to make another ajax call using the change function . when I select the particular item already populated on dropdown box it has to pass the selected item name1 in 'where' query to dataprod.php and has to display the products by clearing the existing products list available.

I am doubtful over the $name1 response from dataprod.php . Please help!!

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
    $.ajax({
        type: "POST",
        data: {place: '<?= $_GET['place'] ?>'},
        url: 'listplace.php',
        dataType: 'json',
        success: function (json) {
            if (json.option.length) {
                var $el = $("#name"); 
                $el.empty(); // remove old options
                for (var i = 0; i < json.option.length; i++) {
                    $el.append($('<option>',
                        {
                            value: json.option[i],
                            text: json.option[i]
                        }));
            }else {
                alert('No data found!');
            }
        }
    });
</script>

ajax 2

$(document).ready(function(){
 $("#name").change(function(){
 var name1 = this.value;
 $.ajax ({
     url: "dataprod.php",
     data: {place: '<?= $_GET['name1'] ?>'},
     success: function (response) {
        $('.products-wrp').html('')
        $('.products-wrp').html(response);     
     }
      }else {
        $('.products-wrp').html('');
  }
}

dataprod.php

<?php
include("config.inc.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;
?>                 

Answer 1

Since you are calling ajax event on element which is loaded via ajax action so the change event is not bind and nothing is happend.

For ajax 2 action use below code.

$(document.body).on('change',"#name",function (e) {
   //doStuff
  var name1 = this.value;
 $.ajax ({
     url: "dataprod.php",
     data: {place: '<?= $_GET['name1'] ?>'},
     success: function (response) {
        $('.products-wrp').html('')
        $('.products-wrp').html(response);     
     }
      }else {
        $('.products-wrp').html('');
  }
}