how to reload javascript function without reloading the whole page

Question

Previously i found the solution for div here Stackoverflow link

this page talks about reloading a div but my problem is different here is my index page

<?php
$message = "";
$minutes = "";
$limit = 2;
$effect = "";
$start = "";
$end = "";
require_once('db.php');
$query = mysql_query("SELECT message FROM kioskmessage where recNo = 1");
$row = mysql_fetch_assoc($query);
$message = $row['message'];
?>

<?php
$query = mysql_query("SELECT effect FROM kioskmessage where recNo = 1");
$row = mysql_fetch_assoc($query);
$effect = $row['effect'];      
if($effect == "blink")
{
 $start = '<p class="blink_text">';
 $end = "</p>";
}
elseif($effect == "scrolling")
{
 $start = "<marquee>";
 $end = "</marquee>";
}
else
{
 $start = '<p class="normalmessage">';
 $end = "</p>";
}
?>
<?php
$query = mysql_query("select minutes from getminutes where id = 1");
$row = mysql_fetch_assoc($query);
$minutes = $row['minutes']; 

?>
<html>

<header> 
<div class="img"> <img src="images/logo.png"> 
</div> 
<div class="container" id="nav">
  <p id="time"></p>
 </div>
</header>
<head>

<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>TT</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="style/style.css" rel="stylesheet" type="text/css">



<script>
document.body.style.zoom="95%"
</script>
<script>
function ins()
        {
            nextDepartures(<?=$minutes?>, <?=$limit?>);
            nextDeparturesTrains(120);
            nextDeparturesTrams(60);
            startTime();
        }
  </script>
<script>
    $(document).ready(
            function() {
                setInterval(ins(), 5000);
            });
</script>



    
    <script src="data.js"></script>
     <script src="sprintf.js"></script>
     <script type="text/javascript" src="2.0.0-crypto-sha1.js"></script>
    <script type="text/javascript" src="2.0.0-hmac-min.js"></script>
 
 
</head>

<body onload="ins()">

<table class="table table-bordered table-stripped table-hover" id="depart" style="float:left;  border: 1px solid black; width:30%;"> 
    <thead>
        <tr>
  <td colspan="4" class="danger" style="text-align: center; font-weight: bold;">Buses Departing from this Stop</td>
  <tr>
  
  
  <tr>
            
            <th>Bus No. & Name</th>
            <th>Time</th>
            <th>Remaining Mins</th>
        </tr>
    </thead>

    <tbody>
        
    </tbody>
</table>
<!-- This table for train information-->
<table class="table table-bordered table-stripped table-hover" id="departTrains" style="float:left;  border: 1px solid black; width:30%;"> 
    <thead>
   <tr>
  <td colspan="4" class="danger" style="text-align: center; font-weight: bold;">Trains Departing from varios stations</td>
  <tr>
        <tr>
            <th>Station</th>
            <th>Destination</th>
            <th>Time</th>
            <th>Remaining Mins</th>
        </tr>
    </thead>

    <tbody>
       
    </tbody>
</table>

<!-- This table for tram information-->
<table class="table table-bordered table-stripped table-hover" id="departTrams" style="float:left;  border: 1px solid black; width:30%;"> 
    <thead>
   <tr>
  <td colspan="4" class="danger" style="text-align: center; font-weight: bold;">Tram Departing from plenty road</td>
  <tr>
        <tr>
            <th>Tram Name</th>
            <th>Time</th>
            <th>Remaining Mins</th>
            
        </tr>
    </thead>

    <tbody>
     
    </tbody>
</table>
<footer id="footer">
    <?=$start?><?=$message?><?$end?>
</footer>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.js"></script>
</body>
</html>

Now i have a javascript function ins() which further have stored functions in it which sends data to the tables defined in the page with relevant information.

Also, i have a script defined in the page which i think could be the possible solution, but its not working here is that script

<script>
    $(document).ready(
            function() {
                setInterval(ins(), 5000);
            });
</script>

this is the sample data which function ins() is pushing into tables on load the page

What is the question? Do you wish to only refresh the table? Which part is not working the interval, the insertion? — donkon, Sep 25 '16 at 05:34
`setInterval(ins(), 5000);` will not work. You want `setInterval(ins, 5000);`. — Makyen, Sep 25 '16 at 05:37
@donkon yes i want the data in the table to refresh. this table is getting data from ins() function which was defined in data.js and have document.getElementById("depart").innerHTML — Garry, Sep 25 '16 at 05:42

score 2 · Accepted Answer · answered Sep 25 '16 at 05:43

If you want to load the JavaScript function without reloading the Entire page you can follow up the AJAX structure and you can make the changes as per the requirement you need.

Since loading up of the JavaScript without reloading the page will perform good only if it is done in AJAX. If the process is done in AJAX it will load the particular div where you want to display the JS output as required.

You can use the ins() function in Ajax and you can reload the page as the success function so that it will load the content under the DIV what you have provided as the success div.

how to reload javascript function without reloading the whole page

1 Answers1