Home » Php » php – How to reload a javascript function and reload a footer on html page without reloading the whole page?

php – How to reload a javascript function and reload a footer on html page without reloading the whole page?

Posted by: admin February 25, 2020 Leave a comment

Questions:

i have a main.page.php that loads a javascript funtion to get a server up or down status.
i would like to reload this function every 10 seconds to check the server status and update the status message in footer div by refreshing the footer not the whole page.

main.page.php

<head>

<?php require_once 'inc/meta.php'; ?>

<?php require_once 'inc/css.php'; ?>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <script type="text/javascript">

    'use strict';

    function queryPlex (query) {
          return $.ajax({
          type: 'POST',
          url: 'inc/plex-api.php',
          cache: false,
          data: {'postData': query},
          dataType: 'json'
        });
    }

    $(document).ready(function () {
          getServerStatus();   
    });

    function getServerStatus () {

         const serverStatusDiv = $('#server-status-msg'); 
         const getServerStatus = queryPlex('/');
         getServerStatus.done(function (data) {
                 if (data) {     
                 serverStatusDiv.html(' <i style="color:green; font-style:normal;"> &nbsp;ONLINE <span style="color:green;" class="fas fa-fw fa-check-circle" data-fa-transform="grow-4"></span></i>');
                } else {     
                 serverStatusDiv.html(' <i style="color:red; font-style:normal;"> &nbsp;OFFLINE <span style="color:red;" class="fas fa-fw fa-exclamation-circle" data-fa-transform="grow-4"></span></i>');
                }
            });

         getServerStatus.fail(function () {  
         serverStatusDiv.html(' <i style="color:red; font-style:normal;"> &nbsp;OFFLINE <span style="color:red;" class="fas fa-fw fa-exclamation-circle" data-fa-transform="grow-4"></span></i>');
                    });    
}
   </script>

</head>

<body id="body_iframe"  onload="getServerStatus ()">

<!-- ============ Fixed Nav ============ -->

     <?php require_once 'inc/nav_main.php'; ?>

<!-- ============ Begin page content ============= -->


    <div id="container_iframe" style="background-color:black;">
          <iframe id="iframe" name="frame" frameBorder="0" scrollbar="no" src="./?page=media"></iframe>
        </div>


<!-- ============ Sticky Footer ============ -->

    <?php require_once 'inc/footer.php'; ?>

<!-- ============== Bootstrap core JavaScript  ================= -->

<script src="js/jquery.min.js" type="text/javascript"></script>

<?php require_once 'inc/javascripts.php'; ?>

</body>
</html>

footer.php

<!-- ============ Footer ============ -->

<div id="footer_iframe" class="bg-black">
  <div class="text-right">

    <!-- ============ Check Server Status ============ -->

    <p class="text-right">StreamNet Server: <span id="server-status-msg">&nbsp;checking status ....</span></p>  


  </div>
</div>

How can i achieve this?

Thanks.

UPDATE

i updated my main.page.php

added setTimout to the function an added script to reload the footer div.

 <script type="text/javascript">

    'use strict';

    function queryPlex (query) {
          return $.ajax({
          type: 'POST',
          url: 'inc/plex-api.php',
          cache: false,
          data: {'postData': query},
          dataType: 'json'
        });
    }

    $(document).ready(function () {
          getServerStatus();   
    });

    function getServerStatus () {

         const serverStatusDiv = $('#server-status-msg'); 
         const getServerStatus = queryPlex('/');
         getServerStatus.done(function (data) {
                 if (data) {     
                 serverStatusDiv.html(' <i style="color:green; font-style:normal;"> &nbsp;ONLINE <span style="color:green;" class="fas fa-fw fa-check-circle" data-fa-transform="grow-4"></span></i>');
                } else {     
                 serverStatusDiv.html(' <i style="color:red; font-style:normal;"> &nbsp;OFFLINE <span style="color:red;" class="fas fa-fw fa-exclamation-circle" data-fa-transform="grow-4"></span></i>');
                }
            });

         getServerStatus.fail(function () {  
         serverStatusDiv.html(' <i style="color:red; font-style:normal;"> &nbsp;OFFLINE <span style="color:red;" class="fas fa-fw fa-exclamation-circle" data-fa-transform="grow-4"></span></i>');
                    }); 

      setTimeout(getServerStatus, 10000);

}
   </script>

<script>
$(document).ready(function(){
    setInterval(function(){
        $("#footer").load('inc/footer.php')
    }, 10000);
});
</script>

also i removed the php code to load the footer.php at the end of the main.page.php.

<body id="body_iframe"  onload="getServerStatus ()">

<!-- ============ Fixed Nav ============ -->

     <?php require_once 'inc/nav_main.php'; ?>

<!-- ============ Begin page content ============= -->


    <div id="container_iframe" style="background-color:black;">
          <iframe id="iframe" name="frame" frameBorder="0" scrollbar="no" src="./?page=media"></iframe>
        </div>


<!-- ============ Sticky Footer ============ -->
<div id="footer"></div>


<!-- ============== Bootstrap core JavaScript  ================= -->

<script src="js/jquery.min.js" type="text/javascript"></script>

<?php require_once 'inc/javascripts.php'; ?>

</body>

but now my footer isn’t loading anymore?

How to&Answers:

You can use a setInterval

setInterval(getServerStatus, 10000);

setInterval

And for the footer, you can just replace the content using jQuery.

$('#server-status-msg').html('Server is Up');