Chapter 5 – Refresh Content without Reloading Page using Fetch JS API and Python

Content refresh and loading is one of key parts influencing user experiences through an entire web browsing journey. Except for saving dollars by using client side async with server side, the web experience can be enhanced to the next level. In this piece, I would walk through briefly how to use fetch js working with your Python app to refresh content with reloading the page.

Table of Contents: Refresh Content without Reloading Page using Fetch Javascript and Python

• Basic Fetch JS script working with JSON and Python
• Python Initial Route and product feed API
• Function and Control Flow in html
• Full Scripts of refreshing content without reloading page using Fetch Javascript and Python

Basic Fetch JS Script Working with JSON and Python

Essentially there are 5 parts consisted of a fetch function communicating with server side to refresh content

• Add the URL or api endpoint
• Specify data type
• Design the post refreshed content HTML structure
• Data looping
• Miscellaneous

As you can see from the sample script as below, we start with fetch function with api endpoint, and use ‘.then’ to specify the steps with different tasks. In this case, the api endpoint return data type is JSON().

Subsequently, we must design the structure of the html to display the refreshed content using different html elements, such as class, div, row, etc.

fetch('your target API endpoint or product feed URL?parameter' + parameterValue)

               .then(response => response.json())

               .then(data => {

                   const productContent = document.getElementById("product-content");

                   productContent.className = 'row';

                   productContent.innerHTML = '';

                   data.forEach(product => {

                       const productDiv = document.createElement("div");

                       productDiv.className = '';

                       productDiv.innerHTML = `

                       Your content feed in html`;

                       productContent.appendChild(productDiv);

                   });

               })

               .catch(error => {

                   console.error("Error fetching product data:", error);

               });

Additionally, data looping is indispensable, particularly for refreshing a list of products, content, or profiles. We can use data.forEach(){} to build a looping.

In this looping part, we need to add a whole piece of standalone product content html, so that the content can display the layout and content as expected.

Last but not least, we can add an Error alert which displays in browser console that can help us check the logs and fix bugs if applicable.

Python Initial Route and product feed API

Different with normal rendered template content return, refreshing content without reloading basically requires to keep the initial or starting point of content. It means the initial loaded content from your Python route, whatever either is from a rendered template or JSON, has been changed but just the area of content you specify would update to new.

So we need another route with JSON return instead of using the same route that responds to the content to users initially. Then, please be sure to add this route to the fetch api endpoint. For this endpoint, we can also add parameters to customize the content return based on the request purpose. For more details, please subscribe to us and we will send you a full sample.

Function and Control Flow in html

As you can see in the previous section, we create a div named ‘product-content’. This is a id or shortcode name to display the refreshed content where you place it in a moment.

<div id=“product-content”>

Just kindly remind that all initial content would be replaced if you add this div that includes initial html content.

Secondly, you might have different options or filters for user to change the web content. So we need to add an onclick function to capture the unique option ID and feed to the fetch JS.

  function handleRowClick(clickedElement) {

       const id = clickedElement.id;

       refreshProductContent(id)

       activaterefreshContent(id)

       // Your axios code here

    }

Last but not least, don’t forget to add a function with event listener to activate the fetch function created earlier.

   function activaterefreshContent(idg){

       const actualID = document.getElementById(idg);

       actualID.addEventListener("click", function () {

           refreshProductContent();

       });

   }

Full JS and Python Scripts of refreshing content without reloading page using Fetch Javascript and Python

If you are interested in Chapter 5 – Refresh Content without Reloading Page using Fetch JS API and Python, please subscribe to our newsletter by adding the message “Chatper5 Fetch JS API working with Python”. We would send you the script immediately to your mailbox.

I hope you enjoy reading Chapter 5 – Refresh Content without Reloading Page using Fetch JS API and Python. If you did, please support us by doing one of the things listed below, because it always helps out our channel.

• Support and donate to my channel through PayPal (paypal.me/Easy2digital)
• Subscribe to my channel and turn on the notification bell Easy2Digital Youtube channel.
• Follow and like my page Easy2Digital Facebook page
• Share the article on your social network with the hashtag #easy2digital
• You sign up for our weekly newsletter to receive Easy2Digital latest articles, videos, and discount codes
• Subscribe to our monthly membership through Patreon to enjoy exclusive benefits (www.patreon.com/louisludigital)