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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
