fetching data from database and display it using ajax

Question

I am trying to fetch data with ajax on keyup function, but every time I fetch it gives undefined output in tabular form. I am using one textfield with id search_data, whatever I write in this textfield, the output gets displayed in a div. But my code is displaying undefined values in tabular format. Please help

<!doctype html>
<html>
 <head>
  <title>Bootstrap Table</title>
  <link rel="stylesheet" href="bootstrap/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.min.css">
  <script src="bootstrap/jquery-3.1.1.min.js"></script>
  <script src="bootstrap/bootstrap-4.0.0-alpha.6-dist/js/bootstrap.min.js"></script>
  <style>
   .container{margin:auto;}
  </style>
 </head>
 <body>
  <br />
  <div class='input-group' style='margin-left:70%;'>
   <input type="text" id="search_data" class="col-xs-2" placeholder="Search">
  </div>
  <div class="container">
  </div>
  <script id="source" language="javascript" type="text/javascript">
   $('#output').append("<br /><h3><center>Employee Table</center></h3>");
    var html = "<br /><h3><center>Employee Table</center></h3>";
    $.ajax({                                      
     url: 'bootstrap_table_db1.php', data: "", dataType: 'json', success: function(rows)       
      {
        $(".container").html(html);
      }
     });
   var timer;
   $("input").on('keyup', function()
    {
     var results;
     clearTimeout(timer);
     timer = setTimeout(function()
      { 
       var search_data = $('#search_data').val();
       if(search_data != "")
        {
         $.ajax(
          {
           type: "POST",
           url: 'test2_db.php',
           data: {search: search_data},
           dataType: 'html',
           success: function(result)
            {
             html+= "<div class='table-responsive'>";
             html+= "<table  class='table table-bordered table-striped'>";
             html+=  "<tr>" +
                    "<th>Employee Name</th>" +
                    "<th>Email</th>" +
                    "<th>Message</th>" +
                    "<th>Date</th>" +
                   "</tr>"
             for (var i in result)
              {
               var row = result[i];
               var employee_name = row[1];
               var email = row[2];
               var message = row[3];
               var date = row[4];
               html+= "<tr>" +
                       "<td width='25%'>" + employee_name + "</td>" +
                       "<td width='25%'>" + email + "</td>" +
                       "<td width='25%'>" + message + "</td>" +
                       "<td width='25%'>" + date + "</td>" +
                      "</tr>";                  
             }
           html+= "</table>";
           html+= "</div>";
           $(".container").html(html);
          }
        });
      }
    }, 1000);
  });
  </script>
 </body>
</html>

The given below is my sql code

<!doctype html>
<html>
 <head>
  <link rel="stylesheet" href="bootstrap/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.min.css">
  <script src="bootstrap/jquery-3.1.1.min.js"></script>
  <script src="bootstrap/bootstrap-4.0.0-alpha.6-dist/js/bootstrap.min.js"></script>
 </head>
 <body>
 <?php
  mysql_connect("localhost", "root", "root") || die(mysql_error());
  mysql_select_db("bijit") || die(mysql_error());
  $result = mysql_query("SELECT * FROM employee ORDER BY id DESC LIMIT 5");
  $data = array();
   if(isset($_POST['search']) && !empty($_POST['search']))
    {
     $s = $_POST['search'];
     if(!empty($s))
      {
       $result2 = mysql_query("SELECT * FROM employee WHERE Employee_name LIKE '%$s%' || Email LIKE '%$s%'|| Message LIKE '%$s%' ");
       while ( $row = mysql_fetch_array($result2) )
        {
         $data[] = $row;
        }
       echo json_encode( $data );
      }
    }
  ?>
 </body>
</html>

what do you have on the result? is it the value are you expecting from the server? — Elmer Dantas
– Elmer Dantas, Commented Jan 10, 2017 at 10:03
if i put dataType html it gives undefined value, and if I give dataType JSON then it gives nothing. Yes I am expecting data from server — Birwi
– Birwi, Commented Jan 10, 2017 at 10:08
try to change your method from POST to GET...you need also check if the server response is what you need. Debug is your friend — Elmer Dantas
– Elmer Dantas, Commented Jan 10, 2017 at 10:11
change this : ` data: {search: search_data},` with : data: 'search='+search_data, — prakash tank
– prakash tank, Commented Jan 10, 2017 at 12:27

Rahman · Accepted Answer · 2017-01-10 13:37:26Z

2

Try this code

        <!doctype html>
        <html>
        <head>
          <title>Bootstrap Table</title>
          <link rel="stylesheet" href="bootstrap/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.min.css">
          <script src="bootstrap/jquery-3.1.1.min.js"></script>
          <script src="bootstrap/bootstrap-4.0.0-alpha.6-dist/js/bootstrap.min.js"></script>
          <style>
           .container{margin:auto;}
          </style>

        </head>
        <body>
          <br />
          <div class='input-group' style='margin-left:70%;'>
           <input type="text" id="search_data" class="col-xs-2" placeholder="Search">
         </div>
         <div class="container">

         </div>


        </body>
<script type="text/javascript">
$( document ).ready(function() {
    $( document ).on( "keyup",'#search_data', function() {
       var results;
       var search_data = $(this).val();
       if(search_data != ""){

        $.ajax(
          {
           type: "POST",
           url: 'testdata.php',
           data: {search: search_data},
           dataType: 'json',
           success: function(response){
            if(response.status=="success"){
             results+= "<div class='table-responsive'>";
             results+= "<table  class='table table-bordered table-striped'>";
             results+=  "<tr>" +
                        "<th>Employee Name</th>" +
                        "<th>Email</th>" +
                        "<th>Message</th>" +
                        "<th>Date</th>" +
                        "</tr>";
            $.each(response.data, function(key,data) {
                 results+='<tr><td>'+data.employee+'</td><td>'+data.email+'</td><td>'+data.message+'</td><td>'+data.date+'</td></tr>';
            });
            results+= "</table>";
            results+= "</div>";
            $(".container").html(results);
          }else{
            $(".container").html('No Result Found');
          }

           }
        });

       }else{
        $(".container").html('');
       }

    });
});
</script>
        </html>

PHP

if(empty($data)){
    $result=array('status'=>'error','data'=>$data);
}else{
    $result=array('status'=>'success','data'=>$data);
}
echo json_encode($result);

edited Jan 10, 2017 at 13:37

answered Jan 10, 2017 at 12:31

Rahman

2821 silver badge11 bronze badges

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

2 Comments

Birwi Over a year ago

Thank u Hafees, Its working now, can u suggest me more. I need to alert error when no data is found on database.

Rahman Over a year ago

Sure. i have update the code. also add a piece of php code. check this changes

hamedmehryar · Accepted Answer · 2017-01-10 09:59:13Z

0

Change your dataType ajax option from dataType: 'html' to dataType: 'JSON'. Because you are doing a json_encode() on result before responding and you must expect json in your ajax success callback.

answered Jan 10, 2017 at 9:59

hamedmehryar

4142 silver badges10 bronze badges

Collectives™ on Stack Overflow

fetching data from database and display it using ajax

2 Answers 2

PHP

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

PHP

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related