Starting: 1st of Every Month 
+91 8409492687 
Contact@DevOpsSchool.com
In this tutorial we are going to learn how to do auto load and refresh div every second by using JQuery and Ajax method with PHP Script. In this tutorial we will first Insert 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.
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_posts | |
| { | |
| padding:16px; | |
| background-color:#f1f1f1; | |
| margin-bottom:30px; | |
| } | |
| #load_posts p | |
| { | |
| padding:12px; | |
| border-bottom:1px dotted #ccc; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container box"> | |
| <form name="add_post" method="post"> | |
| <h3 align="center">Post Page</h3> | |
| <div class="form-group"> | |
| <textarea name="post_name" id="post_name" class="form-control" rows="3"></textarea> | |
| </div> | |
| <div class="form-group" align="right"> | |
| <input type="button" name="post_button" id="post_button" value="Post" class="btn btn-info" /> | |
| </div> | |
| </form> | |
| <br /> | |
| <br /> | |
| <div id="load_posts"></div> | |
| <!-- Refresh this Div content every second!--> | |
| <!-- For Refresh Div content every second | |
| we use setInterval() !--> | |
| </div> | |
| </body> | |
| </html> | |
| <script> | |
| $(document).ready(function(){ | |
| $('#post_button').click(function(){ | |
| var post_name = $('#post_name').val(); | |
| //trim() is used to remover spaces | |
| if($.trim(post_name) != '') | |
| { | |
| $.ajax({ | |
| url:"post.php", | |
| method:"POST", | |
| data:{post_name:post_name}, | |
| dataType:"text", | |
| success:function(data) | |
| { | |
| $('#post_name').val(""); | |
| } | |
| }); | |
| } | |
| }); | |
| setInterval(function(){//setInterval() method execute on every interval until called clearInterval() | |
| $('#load_posts').load("display.php").fadeIn("slow"); | |
| //load() method fetch data from fetch.php page | |
| }, 1000); | |
| }); | |
| </script> |
by post.php
| <?php | |
| //insert.php | |
| if(isset($_POST["post_name"])) | |
| { | |
| $connect = mysqli_connect("localhost", "root", "", "auto_refresh"); | |
| $post_name = mysqli_real_escape_string($connect, $_POST["post_name"]); | |
| $sql = "INSERT INTO tbl_post (post_name) VALUES ('".$post_name."')"; | |
| mysqli_query($connect, $sql); | |
| } | |
| ?> |
display.php
| <?php | |
| //fetch.php | |
| $connect = mysqli_connect("localhost", "root", "", "auto_refresh"); | |
| $query = "SELECT * FROM tbl_post ORDER BY post_id DESC"; | |
| $result = mysqli_query($connect, $query); | |
| if(mysqli_num_rows($result) > 0) | |
| { | |
| while($row = mysqli_fetch_array($result)) | |
| { | |
| echo '<p>'.$row["post_name"].'</p>'; | |
| } | |
| } | |
| ?> |
tbl_post.sql
| CREATE TABLE `tbl_post` ( | |
| `post_id` int(11) NOT NULL, | |
| `post_name` text NOT NULL | |
| ) ENGINE=InnoDB DEFAULT CHARSET=latin1; |
I’m a DevOps/SRE/DevSecOps/Cloud Expert passionate about sharing knowledge and experiences. I am working at Cotocus. I blog tech insights at DevOps School, travel stories at Holiday Landmark, stock market tips at Stocks Mantra, health and fitness guidance at My Medic Plus, product reviews at I reviewed , and SEO strategies at Wizbrand.
Please find my social handles as below;
Rajesh Kumar Personal Website
Rajesh Kumar at YOUTUBE
Rajesh Kumar at INSTAGRAM
Rajesh Kumar at X
Rajesh Kumar at FACEBOOK
Rajesh Kumar at LINKEDIN
Rajesh Kumar at PINTEREST
Rajesh Kumar at QUORA
Rajesh Kumar at WIZBRAND
