Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Automatic page refresh after site update

I am wondering if is possible to perform this action:

I have a site (WordPress built on Elementor). I will periodically add some content on the site, and once I add/change content on page can I force refresh somehow for all that users that are watching that page?

The question may not be for stackoverlow but looking for help as I wasn’t able to find what I am looking for.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    An answer to this question is in plugin called Force Refresh

    https://wordpress.org/plugins/force-refresh/#installation

    Posting an answer as it may help someone else.


  2. 0

    Force reload is something your user can hate. I would like to suggest different approach: Create JavaScript/jQuery code to periodically check eg. if some file exists. Once you want to reload the page, just create the file.

    The example should be extended of checking if user already reloaded the page to avoid showing the notice bar again, even the file still exists. You can use cookies for that purpose.

    The code below is just to demonstrate the idea, it si not a complex solution.

    jQuery(function($) {
  //check on load - shloud be removed
  checkFileExists();

  //call function every 5 minutes
  setInterval(function() {
    checkFileExists();
  }, 1000 * 60 * 5);

  //check if a given file exists
  function checkFileExists() {
    var http = new XMLHttpRequest();
    http.open('HEAD', "https://file-examples-com.github.io/uploads/2017/02/file_example_JSON_1kb.json", false);
    http.send();
    if (http.status === 200) {
      $("#notice-bar").show();
      //you can reload the page here, just uncomment the line below
      //location.reload(true);
      $("#notice-bar").show();
    } else {
      //File doesn't exists
      $("#notice-bar").hide();
    }
  }
  
  //reload page once the link is clicked 
  $('#reload').click(function() {
    location.reload(true);
  });

});
    #notice-bar {
  position: absolute;
  display: none;
  top: 0;
  width: 100%;
  height: auto;
  text-align: center;
  padding: 0.5em;
  background-color: #FFDDA9;
  color: black;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="notice-bar">
    <p>New version available. Please <a href="#" id="reload">reload the page</a>.</p>
  </div>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search