CODEWITHSUNDEEP
phpjquerymysqlajax
overlord
overlord

Reputation: 1079

Populate HTML table from AJAX response

I have some data in MySQL database. I want to show that data in html table based on the parameter selected by the user. Following is the input section (HTML)

<form class="form-inline">
    <div class="input-group">
        <div>Enter Person Name</div>
        <input class="form-control" id="tags">
    </div>
    <div class="btn-group">
        <button type="submit" id="btnSubmit">Search</button>
    </div>
</form>

This is the table where I want to populate the data coming from AJAX response.

<div class="dataTable_wrapper">
    <table class='table table-striped table-bordered table-hover' id='records_table'>
        <tr class='odd gradeX'>
            <th>Name</th>
            <th>Group</th>
            <th>Work</th>
            <th>Grade1</th>
            <th>Grade2</th>
            <th>Grade3</th>
            <th>TeacherName</th>
            <th>RollNo</th>
        </tr>
    </table>
</div>

Now on clicking the 'Search' button, I want to send the name to PHP file, and get the information form database.

for which I have done this:

$(document).ready(function () {
    $("#btnSubmit").click(function (e) {
        e.preventDefault();
        var selText = $('#tags').val();

        if (selText === '') {
            alert("Please select a name!");
        } else {
            $.ajax({
                type: 'GET',
                url: 'getData.php',
                jsonpCallback: 'jsonCallback',
                dataType: 'jsonp',
                jsonp: false,
                data: {
                    q: selText
                },
                success: function (response) {
                    alert(response);
                    var trHTML = '';

                    $.each(response, function (i, item) {
                        $.each(item, function (_, o) {
                            trHTML += '<tr><td>' + o.Name +
                                '</td><td>' + o.Group +
                                '</td><td>' + o.Work +
                                '</td><td>' + o.Grade1 +
                                '</td><td>' + o.Grade2 +
                                '</td><td>' + o.Grade3 +
                                '</td><td>' + o.TeacherName +
                                '</td><td>' + o.RollNo. +
                                '</td></tr>';
                        });
                    });
                    $('#records_table').append(trHTML);
                },
                error: function (e) {
                    $("#txtHint").html(e.responseText);
                }
            });
        }
    });
});

The PHP code is 

<?php
$servername = "localhost"; $username = "root"; $password = "21343"; $dbname = "do_demob";
$selectedName = $_GET['q'];
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}   
$sql = "SELECT *** Don't have rights to reveal";
$result = mysqli_query($conn, $sql);
$rows = array();
if($result) {
    while($row = mysqli_fetch_assoc($result)) {
    $rows[] = $row;
    }
}else {
    echo 'MySQL Error: ' . mysqli_error();
}
$json = json_encode($rows);
echo $json;
mysqli_close($conn);
?>

The AJAX response is

[{"Name":"Sagar Mujumbdar","Group":"","TeacherName":"John     Cena","RollNo":"SX51998","Work":"Sales","Grade1":"Good","Grade2":"5","Grade3":"1"}]

the Status Code is:200 OK. I also checked in Developer Tools' Network section, the data is coming completely and in correct format. The key names are also correct. But unfortunately the data is not being displayed in the table. Is the reason that because JSON object contain null values it is not displaying? If not, then what else can be the reason?

Upvotes: 1

Views: 11042

Answers (2)

JESTIN6699
JESTIN6699

Reputation: 49

Try following logic. There may some error like braces, and comma because i edited it in here. try the table heading is also in javascript. I done it below. Please check

$(document).ready(function () {
        $("#btnSubmit").click(function (e) {
            e.preventDefault();
            var selText = $('#tags').val();

            if (selText === '') {
                alert("Please select a name!");
            } else {
                $.ajax({
                    type: 'GET',
                    url: 'getData.php',
                    jsonpCallback: 'jsonCallback',
                    dataType: 'jsonp',
                    jsonp: false,
                    data: {
                        q: selText
                    },
                    success: function (response) {
                        alert(response);
                        var trHTML = "<table class='table table-striped table-bordered table-hover' id='records_table'>
            <tr class='odd gradeX'>
                <th>Name</th>
                <th>Group</th>
                <th>Work</th>
                <th>Grade1</th>
                <th>Grade2</th>
                <th>Grade3</th>
                <th>TeacherName</th>
                <th>RollNo</th>
            </tr>";
                    for(var i =0;i < response.length-1;i++)
                      {
                         var o= response[i];

                                trHTML += '<tr><td>' + o.Name +
                                    '</td><td>' + o.Group +
                                    '</td><td>' + o.Work +
                                    '</td><td>' + o.Grade1 +
                                    '</td><td>' + o.Grade2 +
                                    '</td><td>' + o.Grade3 +
                                    '</td><td>' + o.TeacherName +
                                    '</td><td>' + o.RollNo +
                                    '</td></tr>';
                           }
                        trHTML+="</table>" 
                        $('#records_table').append(trHTML);
                    },
                    error: function (e) {
                        $("#txtHint").html(e.responseText);
                    }
                });
            }
        });
    });

Upvotes: 1

Siguza
Siguza

Reputation: 23850

  1. You have a syntax error right after RollNo:

    '</td><td>' + o.RollNo. +

    Remove the ..

  2. In your iteration, you go one element to deep, o.* will be undefined, because o already is "Sagar Mujumbdar", "", etc. One .each is enough:

    $.each(response, function (i, o) {
    trHTML += '<tr><td>' + o.Name +
              '</td><td>' + o.Group +
              '</td><td>' + o.Work +
              '</td><td>' + o.Grade1 +
              '</td><td>' + o.Grade2 +
              '</td><td>' + o.Grade3 +
              '</td><td>' + o.TeacherName +
              '</td><td>' + o.RollNo. +
              '</td></tr>';
});

I also created a fiddle with your AJAX response.

Upvotes: 1

Related Questions