Wednesday, 23 December 2015

Auto Refresh Div Content Using jQuery and AJAX

How to do Auto Load and Refresh  Div every Seconds with jQuery and Ajax. So today I needed content in a div to refresh every seconds, so I used AJAX shorthand method .load() and setInterval() and then simply sets a call for the data every seconds. So every second div content will refresh automatically.




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;  
           }  
           #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="btn_tweet" id="btn_tweet" 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(){  
      $('#btn_tweet').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(){  
           $('#load_tweets').load("fetch.php").fadeIn("slow");  
      }, 1000);  
 });  
 </script>  

insert.php


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

fetch.php

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


Database

 --  
 -- Table structure for table `tbl_tweet`  
 --  
 CREATE TABLE IF NOT EXISTS `tbl_tweet` (  
  `tweet_id` int(11) NOT NULL AUTO_INCREMENT,  
  `tweet` varchar(500) NOT NULL,  
  PRIMARY KEY (`tweet_id`)  
 ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;  
 --  
 -- Dumping data for table `tbl_tweet`  
 --  

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