Upon successful completion of the Ajax call, refresh the page without causing any blinking

Question

Upon successful completion of the Ajax call, refresh the page without causing any blinking

Hey there, I'm facing an issue with my website,

I've implemented ajax to fetch data from my API, and upon successful retrieval, I need to reload the page to display the information,

However, sometimes the page blinks before reloading, while other times it does not.

Since I'm working on a shopping cart page, I am using setTimeout to handle this functionality,

It allows users to edit their shopping cart items.

My plan is: once the user stops clicking the plus or minus buttons or typing for about 1 second,

ajax will be triggered to read the API, and after success, the page will reload.

Is there any way to prevent the page from blinking?

Maybe I can add a loading gif to show on the page?

Here's a snippet of my code:

var timeout = null;
$('.num').on('keyup', function() {
    var newNum = $(this).val();
    var pid = $(this).attr("name");

    clearTimeout(timeout);
    timeout = setTimeout(function() {
        if(newNum <= 0){
            alert("At least 1 product!");
            $(this).val("1");
            $.ajax({
                type: "post",
                url: myAPI,
                async: false,
                data: {
                    pid: pid,
                    newNum: 1
                },
                dataType: "json",
                success:function(data){
                    window.location.reload(true);                
                },
            });
        }else {
            $.ajax({
                type: "post",
                url: myAPI,
                async: false,
                data: {
                    pid: pid,
                    newNum: newNum
                },
                dataType:"json",
                success:function(data){
                    window.location.reload(true);                    
                },
            });
        }
    }, 1000)
});

javascript php jquery ajax

Answer 1

Answer №1

If you want to display a loader gif and then remove it once the document has finished loading, you can follow these steps:

<div class="loader-fix" style="position:fixed;height:100vh;width:100vw;background:#ffffff;">
    <img src="your.gif" />
</div>

<script>
    $(window).on('load', function (e) {

        $('.loader-fix').fadeOut('slow', function () {
            $(this).remove();
        });
    });

</script>

Answer 2

If you want to display a loader gif and then remove it once the document has finished loading, you can follow these steps:

<div class="loader-fix" style="position:fixed;height:100vh;width:100vw;background:#ffffff;">
    <img src="your.gif" />
</div>

<script>
    $(window).on('load', function (e) {

        $('.loader-fix').fadeOut('slow', function () {
            $(this).remove();
        });
    });

</script>

Answer 3

Answer №2

When is it beneficial to utilize ajax for reloading a page in order to display updated data?

success:function(data){
                    window.location.reload(true);                    
                }

What is the purpose of the code snippet above..?

In this scenario, a simple form submission would have sufficed, yet ajax was utilized to fetch data without any further processing.

If your intention is to refresh the page, consider following Şahin Ersever's suggested solution.

For creating a dynamic site that retrieves data from the backend and updates the frontend seamlessly without requiring a full page reload, implement something similar to this example:

<html>
  <body>
    <h1> Dynamic load using AJAX </h1>
    <div class="dynamic_div"> 
      <div class="some_class">
        <!-- additional elements containing potential dynamic or server-side-based data -->
         <!-- For instance: -->
         <h1> Name:- <?php echo $name;?> </h1>
         <p> <?php echo $some_other_variable;?> </p>
         <p> <?php echo $some_other_variable;?> </p>
         ....
        </div>
    </div>
    <button onclick="letsload()">Load</button>
    <script>
      function letsload(){
         $.post("someurl",{ data1: "value1", data2 : "value2"},
            function(data, status){
              if(status == "success"){
                 $('.dynamic_div').html(data);//Loading updated data
             }
         });
      }
    </script>
  </body>
</html>

You can output desired html/json or success/error codes on the data variable, then handle them accordingly within the ajax function.

Edit :-

In response to your comment stating

But I check...reload page, it can work

.

A quick fix involves maintaining the desired element inside a separate file, such as updated.php.

<div class="some_class">
<!-- additional elements containing potential dynamic data or server-side details-->

<!-- Like so -->

<h1> Name:- <?php echo $name;?> </h1>
<p> <?php echo $some_other_variable;?> </p>
<p> <?php echo $some_other_variable;?> </p>
....
</div>

Upon successful ajax execution, load this div into the .dynamic_div container like this.

success:function(data){
                    $('.dynamic_div').load("updated.php");//Load the inside elements into div                
                }

This facilitates displaying updated data without refreshing the entire webpage, as changes were already implemented on the backend and loaded dynamically through load().

Feel free to leave a comment for any inquiries.

Answer 4

When is it beneficial to utilize ajax for reloading a page in order to display updated data?

success:function(data){
                    window.location.reload(true);                    
                }

What is the purpose of the code snippet above..?

In this scenario, a simple form submission would have sufficed, yet ajax was utilized to fetch data without any further processing.

If your intention is to refresh the page, consider following Şahin Ersever's suggested solution.

For creating a dynamic site that retrieves data from the backend and updates the frontend seamlessly without requiring a full page reload, implement something similar to this example:

<html>
  <body>
    <h1> Dynamic load using AJAX </h1>
    <div class="dynamic_div"> 
      <div class="some_class">
        <!-- additional elements containing potential dynamic or server-side-based data -->
         <!-- For instance: -->
         <h1> Name:- <?php echo $name;?> </h1>
         <p> <?php echo $some_other_variable;?> </p>
         <p> <?php echo $some_other_variable;?> </p>
         ....
        </div>
    </div>
    <button onclick="letsload()">Load</button>
    <script>
      function letsload(){
         $.post("someurl",{ data1: "value1", data2 : "value2"},
            function(data, status){
              if(status == "success"){
                 $('.dynamic_div').html(data);//Loading updated data
             }
         });
      }
    </script>
  </body>
</html>

You can output desired html/json or success/error codes on the data variable, then handle them accordingly within the ajax function.

Edit :-

In response to your comment stating

But I check...reload page, it can work

.

A quick fix involves maintaining the desired element inside a separate file, such as updated.php.

<div class="some_class">
<!-- additional elements containing potential dynamic data or server-side details-->

<!-- Like so -->

<h1> Name:- <?php echo $name;?> </h1>
<p> <?php echo $some_other_variable;?> </p>
<p> <?php echo $some_other_variable;?> </p>
....
</div>

Upon successful ajax execution, load this div into the .dynamic_div container like this.

success:function(data){
                    $('.dynamic_div').load("updated.php");//Load the inside elements into div                
                }

This facilitates displaying updated data without refreshing the entire webpage, as changes were already implemented on the backend and loaded dynamically through load().

Feel free to leave a comment for any inquiries.

Answer 5

Answer №3

Utilize AJAX to retrieve data from a web server after the page has been fully loaded
Refresh a web page without having to reload it entirely
Efficiently send data to a web server in the background

Discover more about Ajax here

If you do not wish to reload the entire page, refrain from making an ajax call, but if you intend to fetch and display data through ajax, make use of JavaScript to update your HTML within the success message.

Answer 6

Utilize AJAX to retrieve data from a web server after the page has been fully loaded
Refresh a web page without having to reload it entirely
Efficiently send data to a web server in the background

Discover more about Ajax here

If you do not wish to reload the entire page, refrain from making an ajax call, but if you intend to fetch and display data through ajax, make use of JavaScript to update your HTML within the success message.

Upon successful completion of the Ajax call, refresh the page without causing any blinking

Answer №1

Answer №2

Answer №3

Similar questions

Unable to retrieve login information from the mysql database

CORS headers not functioning as expected for Access-Control-Allow-Origin

How can I transfer a value from one form to another using AngularJS?

Is it possible for a MySQL loop to only delete the first entry?

The Flux Router in React Native

The error message "TypeError: Trying to access properties of an undefined object (reading '800')" is being displayed

Modifying the color of an empty string is not feasible in Javascript

PHP displaying incorrect value after modifying value in JavaScript

Incorporating an external SVG link into a React application

Unable to trigger JQuery .blur event

Revamp the HTML page by automatically refreshing labels upon every Get request

The callback functions, such as afterMove, are not being executed

Update the div and table without waiting for a specific time interval when an event happens

Waiting for an Element to Become Visible in Selenium-Webdriver Using Javascript

A PHP guide on iterating through statement results to populate an associative array

The synopsis cannot be displayed by the RottenTomatoes API

Autonomous JQuery Modules

Having trouble with accessing controls within an UpdatePanel?

"Efficiently fetching and handling multiple rows with

The button works properly in JSFiddle, however, it is not able to clear the ordered list in the