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>

are you sure your getId.php returns the values you expect? have you tried logging the values inside your ajax success callback to the console, like: `console.log(values)`. use firebug or chromes developer tools to inspect the output. — mwallisch, Jan 31 '14 at 18:02
looking over your php code again, you should initialize your `values` variable outside of your while loop or it is not going to exist when you try to encode it to json. And if you expect only one row to be returned on your sql query you don't need a while loop. — mwallisch, Jan 31 '14 at 19:22

score 1 · Accepted Answer · edited May 23 '17 at 12:32

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.

got it! thanks a lot @walfish3d i'll post the solution here i revised a bit of your code. — Leomel, Feb 02 '14 at 12:01

score 1 · Answer 2 · answered Feb 02 '14 at 12:10

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);

?>

just one thing: when going productiv with this code take out the console.log() statement. — mwallisch, Feb 03 '14 at 11:27

How to display values to modal from jquery-ajax?

2 Answers2