How to display values to modal from jquery-ajax?

Question

I'm using bootstrap modal and currently i'm stuck with displaying the values to modal.

here is the html when the user will click view

<a data-toggle="modal" data-id="<?php echo $row33['bicycle_id']; ?>" href="#myModal" class="Buto" >view</a>

then i used jquery-ajax to pass the value of data-id to execute a query in php

 $(document).on("click",".Buto", function () {
 var dataID = $(this).data('id'); 

$.ajax({
    url: 'getId.php?id=' + dataID,
    type:'GET',
    dataType: 'json',
    context: this,
    success: function(values)
            {
                values = $.parseJSON(values);                   
                $('.table-responsive #pname').html(values.name);
                $('.table-responsive #pprice').html(values.price);
                $('.table-responsive #pdescription').html(values.description);
            } 
});

});

here is the getId.php file

<?php
    include 'includes/connection.php';
    $modalDataId = $_GET['id'];
    $resu = mysqli_query($conn,"SELECT * FROM bicycle WHERE bicycle_id = $modalDataId");
   while ($row7 = mysqli_fetch_assoc($resu)){
      $values['name'] = $row7['name'];
      $values['price'] = $row7['price'];
      $values['description'] = $row7['description'];
}
echo json_encode($values);
?>

then the modal where the values should be displayed

<div class="modal-body">
        <div class="table-responsive" id = "div1" style = " width: 100%; margin-right: 10%;  background-color: white;">
            <table id = "" align = "center" class="table table-hover table-striped demo2" style = "table-layout:fixed;">    <thead style = "">
                    <tr style = "background-color: #428bca; color: white;">
                        <th class="col-sm-3">BIKE NAME</th>
                        <th class="col-sm-3" >SRP</th>
                        <th class="col-sm-3" >DETAILS</th>

                    </tr>
                </thead>
                <tbody id="myTable">
                    <tr style = "text-align: center;"  data-toggle="modal" data-id="" data-target="#orderModal">            
                        <td id="pname"></td>
                        <td id="pprice"></td>
                        <td id="pdescription"></td>                     
                    </tr>
                </tbody>                
            </table>
        </div>
    </div>

Answer 1

here is the answer thanks to walfish3d. i revised the code he provided.

The jquery-ajax:

$(".Buto").on("click",function () {
         var dataID = $(this).data('id'); 

                $.ajax({
                    url: 'getId.php?id=' + dataID,
                    type:'GET',
                    dataType: 'json',
                    context: this,
                    success: function(values)
                    {                                                                    
                        $('.table-responsive #pname').html(values.name);
                        $('.table-responsive #pprice').html(values.price);
                        $('.table-responsive #pdescription').html(values.description);
                        // log all values to the javascript console in your browser
                        console.log(values);
                    } 
                });
     }); 

getId.php file:

<?php
include 'includes/connection.php';
$modalDataId = $_GET['id'];
$resu = mysqli_query($conn,"SELECT * FROM bicycle WHERE bicycle_id = $modalDataId");

// You expect one row to be returned then you need no while loop:
$row7 = mysqli_fetch_assoc($resu);

// Initialize values array
$values = array();

if ($row7) {
   $values['name'] = $row7['name'];
   $values['price'] = $row7['price'];
   $values['description'] = $row7['description'];

}

echo json_encode($values);

?>

Answer 2

Ok. Let me break your problem up for you:

The first question you should ask is: Is my ajax-success-callback function being called? And how can you verify that your code is executed? Simple: create some output to debug your code. For logging simple variables an alert(...) should be fine. If you want to debug the content of an array you are much better off if you log it to the console.

So what I would try is:

$.ajax({
    url: 'getId.php?id=' + dataID,
    type:'GET',
    dataType: 'json',
    context: this,
    success: function(values)
            {
                // not sure about alerts in ajax callbacks but you can try it:
                alert('inside success callback');
                values = $.parseJSON(values);
                // alert a value:
                alert('values.name is: '+values.name);               
                $('.table-responsive #pname').html(values.name);
                $('.table-responsive #pprice').html(values.price);
                $('.table-responsive #pdescription').html(values.description);
                // log all values to the javascript console in your browser
                console.log(values);
            } 
});

Try that and look at the output.

a. You don't see any alert window. This means your success callback function is never executed or you have an javascript error. Look at your javascript console in your browser to see if console.log(values) created an output. More about console.log(...) here: What is console.log and how do I use it?

b. You get to see alert windows. But the second alert goes something like: 'values.name is undefined'. --> Your php is not working as expected.

Without being able to actually debug your code this is how I would improve it:

<?php
    include 'includes/connection.php';
    $modalDataId = $_GET['id'];
    $resu = mysqli_query($conn,"SELECT * FROM bicycle WHERE bicycle_id = $modalDataId");

    // You expect one row to be returned then you need no while loop:
    $row7 = mysqli_fetch_assoc($resu);

    // Initialize values array
    $values = array();

    if ($row7) {
       $values['name'] = $row7['name'];
       $values['price'] = $row7['price'];
       $values['description'] = $row7['description'];
    }

    echo json_encode($values);
?>

Try that and come back with your results.