Mixing
fetching data from database and display it using ajax
-1
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>
php jquery ajax
edited Jan 10 '17 at 11:42
31piy
17.3k52343
asked Jan 10 '17 at 9:53
BirwiBirwi
113
add a comment |
-1
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>
php jquery ajax
edited Jan 10 '17 at 11:42
31piy
17.3k52343
asked Jan 10 '17 at 9:53
BirwiBirwi
113
1
Do we have a fix_my_code tag already?
– mvw
Jan 10 '17 at 9:55
what do you have on theresult? is it the value are you expecting from the server?
– Elmer Dantas
Jan 10 '17 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
Jan 10 '17 at 10:08
try to change your method fromPOSTtoGET...you need also check if the server response is what you need. Debug is your friend
– Elmer Dantas
Jan 10 '17 at 10:11
change this : ` data: {search: search_data},` with :data: 'search='+search_data,
– prakash tank
Jan 10 '17 at 12:27
add a comment |
-1
-1
-1
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>
php jquery ajax
edited Jan 10 '17 at 11:42
31piy
17.3k52343
asked Jan 10 '17 at 9:53
BirwiBirwi
113
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>
php jquery ajax
php jquery ajax
edited Jan 10 '17 at 11:42
31piy
17.3k52343
asked Jan 10 '17 at 9:53
BirwiBirwi
113
edited Jan 10 '17 at 11:42
31piy
17.3k52343
asked Jan 10 '17 at 9:53
BirwiBirwi
113
edited Jan 10 '17 at 11:42
31piy
17.3k52343
edited Jan 10 '17 at 11:42
31piy
17.3k52343
edited Jan 10 '17 at 11:42
31piy
17.3k52343
17.3k52343
asked Jan 10 '17 at 9:53
BirwiBirwi
113
asked Jan 10 '17 at 9:53
BirwiBirwi
113
asked Jan 10 '17 at 9:53
BirwiBirwi
113
113
1
Do we have a fix_my_code tag already?
– mvw
Jan 10 '17 at 9:55
what do you have on theresult? is it the value are you expecting from the server?
– Elmer Dantas
Jan 10 '17 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
Jan 10 '17 at 10:08
try to change your method fromPOSTtoGET...you need also check if the server response is what you need. Debug is your friend
– Elmer Dantas
Jan 10 '17 at 10:11
change this : ` data: {search: search_data},` with :data: 'search='+search_data,
– prakash tank
Jan 10 '17 at 12:27
add a comment |
1
Do we have a fix_my_code tag already?
– mvw
Jan 10 '17 at 9:55
what do you have on theresult? is it the value are you expecting from the server?
– Elmer Dantas
Jan 10 '17 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
Jan 10 '17 at 10:08
try to change your method fromPOSTtoGET...you need also check if the server response is what you need. Debug is your friend
– Elmer Dantas
Jan 10 '17 at 10:11
change this : ` data: {search: search_data},` with :data: 'search='+search_data,
– prakash tank
Jan 10 '17 at 12:27
1
1
Do we have a fix_my_code tag already?
– mvw
Jan 10 '17 at 9:55
Do we have a fix_my_code tag already?
– mvw
Jan 10 '17 at 9:55
what do you have on the
result? is it the value are you expecting from the server?– Elmer Dantas
Jan 10 '17 at 10:03
what do you have on the
result? is it the value are you expecting from the server?– Elmer Dantas
Jan 10 '17 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
Jan 10 '17 at 10:08
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
Jan 10 '17 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
Jan 10 '17 at 10:11
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
Jan 10 '17 at 10:11
change this : ` data: {search: search_data},` with :
data: 'search='+search_data,– prakash tank
Jan 10 '17 at 12:27
change this : ` data: {search: search_data},` with :
data: 'search='+search_data,– prakash tank
Jan 10 '17 at 12:27
add a comment |
3 Answers
3
active
oldest
votes
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);
answered Jan 10 '17 at 12:31
RahmanRahman
25219
Thank u Hafees, Its working now, can u suggest me more. I need to alert error when no data is found on database.
– Birwi
Jan 10 '17 at 12:58
Sure. i have update the code. also add a piece of php code. check this changes
– Rahman
Jan 10 '17 at 13:39
add a comment |
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 '17 at 9:59
hamedmehryarhamedmehryar
37018
done, but it gives no output
– Birwi
Jan 10 '17 at 10:01
add a comment |
0
If you want to fetch data and display via PHP and Ajax . Then you have to follow this code strategy . I hope it will help you . I really tried and tested .
<?php
//fetch.php
include("config.php");
$column = array("fname", "lname");
$query = "
SELECT * FROM persons WHERE
";
if(isset($_POST["is_days"]))
{
$query .= "date BETWEEN CURDATE() - INTERVAL ".$_POST["is_days"]." DAY AND CURDATE() AND ";
}
if(isset($_POST["search"]["value"]))
{
$query .= '(fname LIKE "%'.$_POST["search"]["value"].'%" ';
$query .= 'OR fname LIKE "%'.$_POST["search"]["value"].'%") ';
}
if(isset($_POST["order"]))
{
$query .= 'ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['7']['dir'].' ';
}
else
{
$query .= 'ORDER BY id DESC ';
}
$query1 = '';
if($_POST["length"] != -1)
{
$query1 .= 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}
$number_filter_row = mysqli_num_rows(mysqli_query($mysqli, $query));
$result = mysqli_query($mysqli, $query . $query1);
$data = array();
while($row = mysqli_fetch_array($result))
{
$sub_array = array();
$sub_array = $row["fname"].' '.$row["lname"];
$data = $sub_array;
}
function get_all_data($mysqli)
{
$query = "SELECT * FROM persons";
$result = mysqli_query($mysqli, $query);
return mysqli_num_rows($result);
}
$output = array(
"draw" => intval($_POST["draw"]),
"recordsTotal" => get_all_data($mysqli),
"recordsFiltered" => $number_filter_row,
"data" => $data
);
echo json_encode($output);
?>
You can customize according to your need and fetch the data. This code includes Filter data by N days. You can filter data by the days.
answered Jan 1 at 16:58
Vishal RanaVishal Rana
14
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f41565907%2ffetching-data-from-database-and-display-it-using-ajax%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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);
answered Jan 10 '17 at 12:31
RahmanRahman
25219
Thank u Hafees, Its working now, can u suggest me more. I need to alert error when no data is found on database.
– Birwi
Jan 10 '17 at 12:58
Sure. i have update the code. also add a piece of php code. check this changes
– Rahman
Jan 10 '17 at 13:39
add a comment |
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);
answered Jan 10 '17 at 12:31
RahmanRahman
25219
Thank u Hafees, Its working now, can u suggest me more. I need to alert error when no data is found on database.
– Birwi
Jan 10 '17 at 12:58
Sure. i have update the code. also add a piece of php code. check this changes
– Rahman
Jan 10 '17 at 13:39
add a comment |
2
2
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);
answered Jan 10 '17 at 12:31
RahmanRahman
25219
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);
answered Jan 10 '17 at 12:31
RahmanRahman
25219
edited Jan 10 '17 at 13:37
answered Jan 10 '17 at 12:31
RahmanRahman
25219
answered Jan 10 '17 at 12:31
RahmanRahman
25219
answered Jan 10 '17 at 12:31
RahmanRahman
25219
25219
Thank u Hafees, Its working now, can u suggest me more. I need to alert error when no data is found on database.
– Birwi
Jan 10 '17 at 12:58
Sure. i have update the code. also add a piece of php code. check this changes
– Rahman
Jan 10 '17 at 13:39
add a comment |
Thank u Hafees, Its working now, can u suggest me more. I need to alert error when no data is found on database.
– Birwi
Jan 10 '17 at 12:58
Sure. i have update the code. also add a piece of php code. check this changes
– Rahman
Jan 10 '17 at 13:39
Thank u Hafees, Its working now, can u suggest me more. I need to alert error when no data is found on database.
– Birwi
Jan 10 '17 at 12:58
Thank u Hafees, Its working now, can u suggest me more. I need to alert error when no data is found on database.
– Birwi
Jan 10 '17 at 12:58
Sure. i have update the code. also add a piece of php code. check this changes
– Rahman
Jan 10 '17 at 13:39
Sure. i have update the code. also add a piece of php code. check this changes
– Rahman
Jan 10 '17 at 13:39
add a comment |
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 '17 at 9:59
hamedmehryarhamedmehryar
37018
done, but it gives no output
– Birwi
Jan 10 '17 at 10:01
add a comment |
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 '17 at 9:59
hamedmehryarhamedmehryar
37018
done, but it gives no output
– Birwi
Jan 10 '17 at 10:01
add a comment |
0
0
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 '17 at 9:59
hamedmehryarhamedmehryar
37018
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 '17 at 9:59
hamedmehryarhamedmehryar
37018
answered Jan 10 '17 at 9:59
hamedmehryarhamedmehryar
37018
answered Jan 10 '17 at 9:59
hamedmehryarhamedmehryar
37018
answered Jan 10 '17 at 9:59
hamedmehryarhamedmehryar
37018
37018
done, but it gives no output
– Birwi
Jan 10 '17 at 10:01
add a comment |
done, but it gives no output
– Birwi
Jan 10 '17 at 10:01
done, but it gives no output
– Birwi
Jan 10 '17 at 10:01
done, but it gives no output
– Birwi
Jan 10 '17 at 10:01
add a comment |
0
If you want to fetch data and display via PHP and Ajax . Then you have to follow this code strategy . I hope it will help you . I really tried and tested .
<?php
//fetch.php
include("config.php");
$column = array("fname", "lname");
$query = "
SELECT * FROM persons WHERE
";
if(isset($_POST["is_days"]))
{
$query .= "date BETWEEN CURDATE() - INTERVAL ".$_POST["is_days"]." DAY AND CURDATE() AND ";
}
if(isset($_POST["search"]["value"]))
{
$query .= '(fname LIKE "%'.$_POST["search"]["value"].'%" ';
$query .= 'OR fname LIKE "%'.$_POST["search"]["value"].'%") ';
}
if(isset($_POST["order"]))
{
$query .= 'ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['7']['dir'].' ';
}
else
{
$query .= 'ORDER BY id DESC ';
}
$query1 = '';
if($_POST["length"] != -1)
{
$query1 .= 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}
$number_filter_row = mysqli_num_rows(mysqli_query($mysqli, $query));
$result = mysqli_query($mysqli, $query . $query1);
$data = array();
while($row = mysqli_fetch_array($result))
{
$sub_array = array();
$sub_array = $row["fname"].' '.$row["lname"];
$data = $sub_array;
}
function get_all_data($mysqli)
{
$query = "SELECT * FROM persons";
$result = mysqli_query($mysqli, $query);
return mysqli_num_rows($result);
}
$output = array(
"draw" => intval($_POST["draw"]),
"recordsTotal" => get_all_data($mysqli),
"recordsFiltered" => $number_filter_row,
"data" => $data
);
echo json_encode($output);
?>
You can customize according to your need and fetch the data. This code includes Filter data by N days. You can filter data by the days.
answered Jan 1 at 16:58
Vishal RanaVishal Rana
14
add a comment |
0
If you want to fetch data and display via PHP and Ajax . Then you have to follow this code strategy . I hope it will help you . I really tried and tested .
<?php
//fetch.php
include("config.php");
$column = array("fname", "lname");
$query = "
SELECT * FROM persons WHERE
";
if(isset($_POST["is_days"]))
{
$query .= "date BETWEEN CURDATE() - INTERVAL ".$_POST["is_days"]." DAY AND CURDATE() AND ";
}
if(isset($_POST["search"]["value"]))
{
$query .= '(fname LIKE "%'.$_POST["search"]["value"].'%" ';
$query .= 'OR fname LIKE "%'.$_POST["search"]["value"].'%") ';
}
if(isset($_POST["order"]))
{
$query .= 'ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['7']['dir'].' ';
}
else
{
$query .= 'ORDER BY id DESC ';
}
$query1 = '';
if($_POST["length"] != -1)
{
$query1 .= 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}
$number_filter_row = mysqli_num_rows(mysqli_query($mysqli, $query));
$result = mysqli_query($mysqli, $query . $query1);
$data = array();
while($row = mysqli_fetch_array($result))
{
$sub_array = array();
$sub_array = $row["fname"].' '.$row["lname"];
$data = $sub_array;
}
function get_all_data($mysqli)
{
$query = "SELECT * FROM persons";
$result = mysqli_query($mysqli, $query);
return mysqli_num_rows($result);
}
$output = array(
"draw" => intval($_POST["draw"]),
"recordsTotal" => get_all_data($mysqli),
"recordsFiltered" => $number_filter_row,
"data" => $data
);
echo json_encode($output);
?>
You can customize according to your need and fetch the data. This code includes Filter data by N days. You can filter data by the days.
answered Jan 1 at 16:58
Vishal RanaVishal Rana
14
add a comment |
0
0
0
If you want to fetch data and display via PHP and Ajax . Then you have to follow this code strategy . I hope it will help you . I really tried and tested .
<?php
//fetch.php
include("config.php");
$column = array("fname", "lname");
$query = "
SELECT * FROM persons WHERE
";
if(isset($_POST["is_days"]))
{
$query .= "date BETWEEN CURDATE() - INTERVAL ".$_POST["is_days"]." DAY AND CURDATE() AND ";
}
if(isset($_POST["search"]["value"]))
{
$query .= '(fname LIKE "%'.$_POST["search"]["value"].'%" ';
$query .= 'OR fname LIKE "%'.$_POST["search"]["value"].'%") ';
}
if(isset($_POST["order"]))
{
$query .= 'ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['7']['dir'].' ';
}
else
{
$query .= 'ORDER BY id DESC ';
}
$query1 = '';
if($_POST["length"] != -1)
{
$query1 .= 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}
$number_filter_row = mysqli_num_rows(mysqli_query($mysqli, $query));
$result = mysqli_query($mysqli, $query . $query1);
$data = array();
while($row = mysqli_fetch_array($result))
{
$sub_array = array();
$sub_array = $row["fname"].' '.$row["lname"];
$data = $sub_array;
}
function get_all_data($mysqli)
{
$query = "SELECT * FROM persons";
$result = mysqli_query($mysqli, $query);
return mysqli_num_rows($result);
}
$output = array(
"draw" => intval($_POST["draw"]),
"recordsTotal" => get_all_data($mysqli),
"recordsFiltered" => $number_filter_row,
"data" => $data
);
echo json_encode($output);
?>
You can customize according to your need and fetch the data. This code includes Filter data by N days. You can filter data by the days.
answered Jan 1 at 16:58
Vishal RanaVishal Rana
14
If you want to fetch data and display via PHP and Ajax . Then you have to follow this code strategy . I hope it will help you . I really tried and tested .
<?php
//fetch.php
include("config.php");
$column = array("fname", "lname");
$query = "
SELECT * FROM persons WHERE
";
if(isset($_POST["is_days"]))
{
$query .= "date BETWEEN CURDATE() - INTERVAL ".$_POST["is_days"]." DAY AND CURDATE() AND ";
}
if(isset($_POST["search"]["value"]))
{
$query .= '(fname LIKE "%'.$_POST["search"]["value"].'%" ';
$query .= 'OR fname LIKE "%'.$_POST["search"]["value"].'%") ';
}
if(isset($_POST["order"]))
{
$query .= 'ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['7']['dir'].' ';
}
else
{
$query .= 'ORDER BY id DESC ';
}
$query1 = '';
if($_POST["length"] != -1)
{
$query1 .= 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}
$number_filter_row = mysqli_num_rows(mysqli_query($mysqli, $query));
$result = mysqli_query($mysqli, $query . $query1);
$data = array();
while($row = mysqli_fetch_array($result))
{
$sub_array = array();
$sub_array = $row["fname"].' '.$row["lname"];
$data = $sub_array;
}
function get_all_data($mysqli)
{
$query = "SELECT * FROM persons";
$result = mysqli_query($mysqli, $query);
return mysqli_num_rows($result);
}
$output = array(
"draw" => intval($_POST["draw"]),
"recordsTotal" => get_all_data($mysqli),
"recordsFiltered" => $number_filter_row,
"data" => $data
);
echo json_encode($output);
?>
You can customize according to your need and fetch the data. This code includes Filter data by N days. You can filter data by the days.
answered Jan 1 at 16:58
Vishal RanaVishal Rana
14
answered Jan 1 at 16:58
Vishal RanaVishal Rana
14
answered Jan 1 at 16:58
Vishal RanaVishal Rana
14
answered Jan 1 at 16:58
Vishal RanaVishal Rana
14
14
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f41565907%2ffetching-data-from-database-and-display-it-using-ajax%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Do we have a fix_my_code tag already?
– mvw
Jan 10 '17 at 9:55
what do you have on the
result? is it the value are you expecting from the server?– Elmer Dantas
Jan 10 '17 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
Jan 10 '17 at 10:08
try to change your method from
POSTtoGET...you need also check if the server response is what you need. Debug is your friend– Elmer Dantas
Jan 10 '17 at 10:11
change this : ` data: {search: search_data},` with :
data: 'search='+search_data,– prakash tank
Jan 10 '17 at 12:27