Multiple Data In Dropdown using ajax, json not working

Question

I am trying to pull data from database, the below code works fine and display drop-down of batch number if the batch number has only one record in database, but when i add more stock against same batch number it stops showing the drop down in batch number, on the other hand if i do the same code without json it shows all the batch numbers but i want to handle this with json because i have to pull some other data also from db that i will display in some other divs, kindly help what i am doing wrong.

JQuery/Ajax

<script>
    function getBatch(id) {

        var product_id = jQuery('#product'+id).val();
        jQuery.ajax({
            type: 'POST',
            url: 'get_Batch.php',
            data: { product_id: product_id },
            dataType : 'JSON',
            success: function(data) {
                jQuery('#batch'+id).html(data.batch_option);
                jQuery('#available_qty'+id).val(data.avaliable_quantity);
            }
        });

    }
</script>

PHP

<?php

include('includes/config.php');

if(isset($_POST['product_id'])) :

    $product_id = $_POST['product_id'];
    $get_batch = mysqli_query($conn, "Select * from products JOIN products_stock ON products.p_id='$product_id' AND products.p_id=products_stock.p_id");
    if(mysqli_num_rows($get_batch) > 0) :
        header('Content-Type: application/json');
        while($batch = mysqli_fetch_object($get_batch)) :
            $data = [
                        'batch_option'          =>  "<option value=".$batch -> batch_no."> 
                                                        ".$batch -> batch_no."
                                                    </option>",
                        'avaliable_quantity'    =>  $batch -> p_available
                    ];
            echo json_encode($data);
        endwhile;
    else :
        header('Content-Type: application/json');
        $data = [
                    'batch_option'  =>  "<option value='No batch found'> No batch found </option>",
                    'avaliable_quantity'    =>  'Not avaliable'
                ];
        echo json_encode($data);
    endif;
endif;

?>

If i do like this it will show all record against one batch number in drop down

<?php

include('includes/config.php');

if(isset($_POST['product_id'])) :

    $product_id = $_POST['product_id'];
    $get_batch = mysqli_query($conn, "Select * from products JOIN products_stock ON products.p_id='$product_id' AND products.p_id=products_stock.p_id");
    if(mysqli_num_rows($get_batch) > 0) :
        while($batch = mysqli_fetch_object($get_batch)) :
        ?> <option value="<?php echo $batch -> id; ?>"><?php echo $batch -> id; ?></option> <?php
        endwhile;
    endif;
endif;

?>

You need to move your echo json_encode($data); after your while loop. With it in the loop it is echoing multiple json encoded data, which is invalid. You will also need to change $data = ... to $data[] = ... — Sean
– Sean, Commented Jul 21, 2016 at 3:02
You will also need to loop over the json object in your JavaScript to get all of the returned html data — Sean
– Sean, Commented Jul 21, 2016 at 3:04

BeetleJuice · Accepted Answer · 2016-07-21 03:28:39Z

1

Change your while loop so that $data is defined outside of it, and results are appended to $data within the loop

header('Content-Type: application/json');
$data = []; //will store results
while($batch = mysqli_fetch_object($get_batch)) :
    $data[] = [...];    //add next result       
endwhile;
echo json_encode($data); //encode and return all results.

In the Javascript, you will also have to change how you populate the HTML. Your current code just adds data.batch_option and data.avaliable_quantity to your document. Once you have several results though, data will be an array, so you will not to loop through its members and add each member to the document.

success: function(data) {
    //loop through each result in data
    data.forEach(function(result){
        var opt = result.batch_option;
        var qty = result.avaliable_quantity;

        //Todo: add opt and qty to the right DOM elements
    });
}

edited Jul 21, 2016 at 3:28

answered Jul 21, 2016 at 3:06

BeetleJuice

41.1k24 gold badges120 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BeetleJuice Over a year ago

I added a bit to get you started; I'm sure you'll work out the rest.

BeetleJuice Over a year ago

You're welcome Waleed. If I helped you solve your problem, be sure to select my answer as the solution.

Collectives™ on Stack Overflow

Multiple Data In Dropdown using ajax, json not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related