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
1 answers
solution1
2 ACCPTED 2016-09-25 05:43:36
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.