Stop repeating div content in PHP AJAX MySQL

  • A+
Category:Languages

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> 

 


Just 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) 

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: