I am trying to retrieve the data dynamically from MySQL database into web page using AJAX technique but the div content is repeated. I want to refresh the div without duplicate the information.
here is the code
api.php
<?php
require 'db.php';
$query = "SELECT * FROM variables";
$result = mysqli_query($con,$query);
$data = array();
while ( $row = mysqli_fetch_row($result) )
{
$data[] = $row;
}
echo json_encode( $data );
?>
client.php
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery.js">
</script>
</head>
<body>
<h2> Client example </h2>
<h3>Output: </h3>
<div id="output"></div>
<script id="source" language="javascript" type="text/javascript">
function ajaxcall()
{
$.ajax({
url: 'api.php', data: "", dataType: 'json', timeout:2000,
success: function(rows)
{
for (var i in rows)
{
var row = rows[i];
var id = row[0];
var vname = row[1];
$('#output').append("<b>id: </b>"+id+"<b> name: </b>"+vname)
.append("<hr />");
}
}
});
};
ajaxcall();
setInterval(ajaxcall, (1 * 1000));
</script>
</body>
</html>
I am trying to retrieve the data dynamically from MySQL database into web page using AJAX technique but the div content is repeated. I want to refresh the div without duplicate the information.
here is the code
api.php
<?php
require 'db.php';
$query = "SELECT * FROM variables";
$result = mysqli_query($con,$query);
$data = array();
while ( $row = mysqli_fetch_row($result) )
{
$data[] = $row;
}
echo json_encode( $data );
?>
client.php
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery.js">
</script>
</head>
<body>
<h2> Client example </h2>
<h3>Output: </h3>
<div id="output"></div>
<script id="source" language="javascript" type="text/javascript">
function ajaxcall()
{
$.ajax({
url: 'api.php', data: "", dataType: 'json', timeout:2000,
success: function(rows)
{
for (var i in rows)
{
var row = rows[i];
var id = row[0];
var vname = row[1];
$('#output').append("<b>id: </b>"+id+"<b> name: </b>"+vname)
.append("<hr />");
}
}
});
};
ajaxcall();
setInterval(ajaxcall, (1 * 1000));
</script>
</body>
</html>
- You want to fetch new data and append to existing one without fetching data already in the div? – Masivuye Cokile Commented Sep 14, 2018 at 11:15
-
2
Just replace the
$('#output').append(...)with$('#output').html(...). – Kerkouch Commented Sep 14, 2018 at 11:15 -
Can you clarify what you mean by "refresh the div without duplicate the information"? Do you want to just empty all
divcontent each time you populate? – Scott Commented Sep 14, 2018 at 11:16 - exactly, I want to fetch the data again without repeating it. – Zahraa Ali Commented Sep 14, 2018 at 11:17
3 Answers
Reset to default 10Just change this
success: function(rows)
{
for (var i in rows)
to this
success: function(rows)
{
$('#output').html(''); // empty the container div and append new HTML
for (var i in rows)
try to use $('output').empty(); before the loop in order to avoid duplicating content.
Another way you can do it as:
var htmlData = '';
for (var i in rows)
{
var row = rows[i];
var id = row[0];
var vname = row[1];
htmlData + ="<b>id: </b>"+id+"<b> name: </b>"+vname+"<hr />";
}
$('#output').html(htmlData);