0

Second ajax call change event not working when I click on the first ajax loaded item. I doubt whether my $name1 in second ajax data:{name1: name1},

Dropdown

<select id="name">
  <option style="display:none;" selected>Select Product</option>
</select>

This first ajax call will populate the dropdown box when the variable place is available

<?php if (isset($_GET['place']) && $_GET['place'] != '') { ?>

    <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
                    $el.append('<option selected>Select language value</option>');
                    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>

//Continued second ajax call when the option is clicked it will list product details

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$("#name").on('change',function (e) { 
    var name1 = this.value;
    $.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>     
<?php } ?>

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;
?>
Lilly Meow
  • 45
  • 6
  • 1
    there's nothing obviously wrong with the code. Have you checked whether the ` – ADyson Jun 02 '17 at 11:17
  • 2
    wrap all you code inside document.ready and use like this for dynamic element $(document).on('change',"#name",function (e) { }); – JYoThI Jun 02 '17 at 11:18
  • https://stackoverflow.com/a/1207393/2968762 – Abhi Jun 02 '17 at 11:26
  • To go with @JYoThI comment - read this: http://api.jquery.com/on/#direct-and-delegated-events - you want to do a delegated event binding – Pete Jun 02 '17 at 11:38
  • @JYoThI I can't see any direct evidence for needing this. We're not told whether "#name" is created dynamically or not. It certainly isn't created by any of the code shown. OP appears to be concerned that the value being passed ("name1") to the second ajax call is not populated correctly. – ADyson Jun 02 '17 at 11:51
  • Possible duplicate of [change event not triggered from dynamic selection](https://stackoverflow.com/questions/44323243/change-event-not-triggered-from-dynamic-selection) – Rasclatt Jun 02 '17 at 12:27
  • @JYoThI as i am beginer could you provide me an easy method to check whetherthe data for $name1 is given to the query in dataprod.php – Lilly Meow Jun 02 '17 at 13:46
  • `$("#name").on('change',function (e) { var name1 = this.value;alert("name1 = " + name1);` the alert will show you what's in "name1" at that moment when the user changes the selected value. (If no alert happens then it means the event is not firing.) – ADyson Jun 02 '17 at 14:19
  • @ADyson it alerts the item selected – Lilly Meow Jun 02 '17 at 15:15
  • 1
    ok then. That's the worry you described, but it seems it's not an issue. So what actually is the problem then? Is that ajax call returning the wrong response? What does it produce? You just need to work through this systematically one step at a time to find out where it's breaking. The next thing I would do is in dataprod.php, check that $_POST["name1"] contains the same value as "name1" on the client-side. `var_dump($_POST)` will confirm the contents of the whole POST array. It should consist of one element "name1" containing your value. Please confirm what the contents are. – ADyson Jun 02 '17 at 15:20
  • @ADyson I used in $name1 = $_POST['name1']; var_dump($_POST); in dataprod.php, but its not returning anything, should i use it somewhere in client side php – Lilly Meow Jun 02 '17 at 15:32
  • it should be returned as part of the "response" variable in the "success" method of your client-side $.ajax method. (This is assuming that the ajax call to dataprod.php actually returns successfully, and is not returning an error status - you can check in your browser's network tab). P.S. This is all very basic debugging, I'm surprised you hadn't carried these steps out before posting the question. – ADyson Jun 02 '17 at 15:39
  • @ADyson It would be very helpful if you could tell me where to use var_dump($_POST); since i am in learning stage – Lilly Meow Jun 02 '17 at 15:51
  • @ADyson our discussion helped me significantly, if u could post ur changes u mentioned as an answer hope it would be helpful for others! – Lilly Meow Jun 02 '17 at 16:04
  • @LillyMeow You're going to have to defend your other question https://stackoverflow.com/q/44333768/1415724 that you just posted before I close it as a (next to) exact duplicate. – Funk Forty Niner Jun 02 '17 at 16:58

0 Answers0