How to update page data without reload in jquery?

Spread the love

If you are beginner then this post is for you. For showing the new content on page without refresh we will use jQuery 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 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