Wednesday, 23 December 2015

Auto Refresh Div Content Using jQuery and AJAX



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.




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>';
 }
}
?>

2 comments:

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

    ReplyDelete
  2. 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