Auto Refresh Div Content Using AJAX and jQuery

Total Views : 166
Zoom In Zoom Out Read Later Print

We have created this tutorial on how to auto-refresh div content/data using Ajax and JQuery with PHP Script. We have used JQuery load() method, that is called when the page is ready and sends requests to the server and fetches data from the server and by using jQuery selector we can refresh HTML div content/data without page refresh.

In this tutorial, we are going to learn how to auto-refresh div content on a regular interval using Ajax and jQuery method in PHP.

In this tutorial, we will first Insert form data into Mysql table using Ajax jQuery method in PHP. After inserting data into the database using jQuery load() method, which fetches data from the database. After this load() method has been used in jQuery setInterval(), this method will execute load() method on regular interval set by us until we have called clearInterval(). So this way we can Autoload and refresh div content/data on every predefined interval with jQuery and Ajax.

 

index.php

<html>
	<head>
		<title>Auto Refresh Div Content Using Ajax and jQuery </title>
		<style>
			body {
				margin:0;
				padding:0;
				background-color:#f1f1f1;
			}
			.box {
				width:1000px;
				height:500px;
				border:1px solid #EAEAEA;
				background-color:#FFF;
				border-radius:5px;
				margin-top:100px;
			}
			#load_comments {
				padding:16px;
				margin-bottom:40px;
			}
			#load_comments p {
				padding:15px;
				border-bottom:1px dotted #EAEAEA;
			}
		</style>
		
		<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" />
		
	</head>
	<body>
		<div class="container box">
			<form name="new_comment" method="post">
				<h3 align="center">Comments</h3>
				<div class="form-group">
					<textarea name="commnet" id="commnet" class="form-control" rows="3"> </textarea>
				</div>
				<div class="form-group" align="right">
					<input type="button" name="commnet_button" id="commnet_button"  value="Commnet" class="btn btn-info" />

				</div>
			</form>

			<div id="load_comments" style="margin-top:20px"/>
			<!-- Refresh Div content/data every second!-->
		</div>
	</body>
	<script>
		$(document).ready(function(){
			$('#commnet_button').click(function() {
				var commnet_txt = $('#commnet').val();
				//trim() is used to remove spaces
				if($.trim(commnet_txt) != '') {
					$.ajax({
						url:"new_comment.php",
						method:"POST",
						data:{comment:commnet_txt},
						dataType:"text",
						success:function(data) {
							$('#comment').val("");
						}
					});
				}
			});
			//setInterval() method execute on every second (interval) set by us
			setInterval(function(){
				//retrive data from fetch_comments.php page
				$('#load_comments').load("fetch_comments.php").fadeIn("slow");

			}, 1000);

		});
	</script>
</html>

fetch_comments.php

<?php
	
	$connect = mysqli_connect("localhost", "root", "", "pro_devs");
	$query = "SELECT * FROM tbl_comments ORDER BY comment_id DESC";
	$result = mysqli_query($connect, $query);
	if(mysqli_num_rows($result) > 0) {
		while($row = mysqli_fetch_array($result)) {
			echo '<p style="border:1px solid black;">'.$row["comment"].'</p>';
		}
	}
?>

new_comment.php

<?php
	if(isset($_POST["comment"])) {
		$connect = mysqli_connect("localhost", "root", "", "pro_devs");
		$comment = mysqli_real_escape_string($connect, $_POST["comment"]);
		$sql = "INSERT INTO tbl_comments (comment) VALUES ('".$comment."')";
		mysqli_query($connect, $sql);
	}
?>

You can download the PHP project from below link.

See More

Latest Photos