If you are beginner then this post is for you. For showing the new content on page without refresh we will use JQuery Reload Page without Refresh and server side PHP. In this article, I will demonstrate to show the latest content from server without refreshing the page. This is useful in case of showing like unlike button, showing latest content, changing the data on user request.
In this tutorial we will take example of JQuery Reload Page without Refresh and Changing content of element on click and check status.
Let’s start the tutorial with steps:
Step 1: Create a html file
First step is to create the html and setup basic elements of page.
<!DOCTYPE html>
<html>
<body>
<h2>Change content without reloading page - Readerstacks.com</h2>
<div id="content">
<h1>This is a dummy content, i am going to change it</h1>
<p>Let's change it with jquery click</p>
</div>
<div class="footer">
<button id="load_btn">Load New </button>
</div>
</body>
</html>
Step 2: Add jQuery
So, we are going to use jQuery to update the content
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
Step 3: Add jQuery code to change content
We have created content and included jQuery , so now it’s time to apply the logic
<script>
$(function(){
$("#load_btn").click(function(){
$("#content").load("http://localhost/refresh_page_jquery/new_dynamic_content.php");
});
});
</script>Here, we added click event to load_btn and using load method of query to change the content. we can also append some fragment of loaded content using below example
$( "#content" ).load( "ajax/test.html #new_content" );Using get or post method to update the content
<script>
$(function(){
$("#load_btn").click(function(){
$.get('http://localhost/refresh_page_jquery/new_dynamic_content.php',function(data){
$('#content').html(data);
})
});
});
</script>Below is the live screenshot
