Wednesday 23 December 2015

Auto Refresh Div Content Using jQuery and AJAX

           , , ,      6 comments   



We have make this tutorial on how to auto refresh div content by using JQuery and Ajax with PHP Script. We have use JQuery load() method, that send requests to server and fetch data from server and by using Jquery selector we can refresh HTML div content without page refresh.

In this tutorial we are going to learn auto refresh div content on regular interval by using JQuery and Ajax method in PHP programming. In this tutorial we will first Insert or form data into Mysql table by using Ajax Jquery method in PHP. After Inserting data into database then after by using Jquery load() method which fetch data from database. Then after this load() method has been used in Jquery setInterval(), this method will execute load() method on regular interval until we have called clearInterval(). So this way we can Auto load and refresh div content on every predefine interval with Jquery and Ajax.

See Also





Source Code


index.php


<html>
 <head>
  <title>Auto Refresh Div Content Using jQuery and AJAX</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  <style>
  body
  {
   margin:0;
   padding:0;
   background-color:#f1f1f1;
  }
  .box
  {
   width:500px;
   border:1px solid #ccc;
   background-color:#fff;
   border-radius:5px;
   margin-top:100px;
  }
  #load_tweets
  {
   padding:16px;
   background-color:#f1f1f1;
   margin-bottom:30px;
  }
  #load_tweets p
  {
   padding:12px;
   border-bottom:1px dotted #ccc;
  }
  </style>
 </head>
 <body>
  <div class="container box">
   <form name="add_tweet" method="post">
    <h3 align="center">Tweet Page</h3>
    <div class="form-group">
     <textarea name="tweet" id="tweet" class="form-control" rows="3"></textarea>
    </div>
    <div class="form-group" align="right">
     <input type="button" name="tweet_button" id="tweet_button"  value="Tweet" class="btn btn-info" />
     
    </div>
   </form>
   
   <br />
   <br />
   <div id="load_tweets"></div>
   <!-- Refresh this Div content every second!-->
   <!-- For Refresh Div content every second
     we use setInterval() !-->
  </div>
 </body>
</html>
<script>
$(document).ready(function(){
 $('#tweet_button').click(function(){
  var tweet_txt = $('#tweet').val();
  //trim() is used to remover spaces
  if($.trim(tweet_txt) != '')
  {
   $.ajax({
    url:"insert.php",
    method:"POST",
    data:{tweet:tweet_txt},
    dataType:"text",
    success:function(data)
    {
     $('#tweet').val("");
    }
   });
  }
 });
 
 setInterval(function(){//setInterval() method execute on every interval until called clearInterval()
  $('#load_tweets').load("fetch.php").fadeIn("slow");
  //load() method fetch data from fetch.php page
 }, 1000);
 
});
</script>

insert.php


<?php
//insert.php
if(isset($_POST["tweet"]))
{
 $connect = mysqli_connect("localhost", "root", "", "testing");
 $tweet = mysqli_real_escape_string($connect, $_POST["tweet"]);
 $sql = "INSERT INTO tbl_tweet (tweet) VALUES ('".$tweet."')";
 mysqli_query($connect, $sql);
}

?>

fetch.php


<?php
//fetch.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT * FROM tbl_tweet ORDER BY tweet_id DESC";
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
 while($row = mysqli_fetch_array($result))
 {
  echo '<p>'.$row["tweet"].'</p>';
 }
}
?>

6 comments:

  1. Replay31 March 2016 at 18:22

    Perfect Video :) Show to add tags and save to database. Thansk

    ReplyDelete
  2. Replay31 March 2016 at 18:32

    Replay hello, Can you prepare lessons. Could you please

    a file you downloaded. Tagged people can see

    Whether the image upload
    Example pictures link : http://i.hizliresim.com/JAW1Go.png

    ReplyDelete
  3. Fernando Merino4 September 2017 at 14:16

    Thats perfect!!! Thanks!

    ReplyDelete
  4. Fernando Merino4 September 2017 at 15:21

    Thanks!!!

    ReplyDelete
  5. Ancienstory1 July 2019 at 06:39

    very great tetorial

    ReplyDelete
  6. Phil Ant31 March 2020 at 04:09

    Great video but I'd suggest you put the load function rather in the success callback function. So that as soon as there is an AJAX submit it load the fetch.php file

    ReplyDelete