how to reload page just once

this script reloads the page mannually and automatically every 5 seconds. How can i make it to reload the page just once automatically after 5 seconds

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Refresh or Reload a Page Using JQuery</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </head> <body> <div><input id="btReload" type="button" value="Reload Page" /></div> </body> <script type="text/javascript"> $(document).ready(function() { $('#btReload').click(function() { location.reload(true); }); // RELOAD PAGE ON BUTTON CLICK EVENT. // SET AUTOMATIC PAGE RELOAD TIME TO 5000 MILISECONDS (5 SECONDS). setInterval('refreshPage()', 5000); }); function refreshPage() { location.reload(); } </script> </html>

This can be done:

Code:

<!DOCTYPE html> <html> <head> <title>Refresh Once After 5 Secs</title> </head> <body> Some content <script type="text/javascript"> //Place as last thing before the closing </body> tag if(location.search.indexOf('reloaded=yes') < 0){ var hash = window.location.hash; var loc = window.location.href.replace(hash, ''); loc += (loc.indexOf('?') < 0? '?' : '&') + 'reloaded=yes'; // SET THE ONE TIME AUTOMATIC PAGE RELOAD TIME TO 5000 MILISECONDS (5 SECONDS): setTimeout(function(){window.location.href = loc + hash;}, 5000); } </script> </body> </html>

But almost always it should not. The more important question is why you would want to do it. In most cases there's a better solution. So please answer that question - Why do you want to do that?

Answer to the Question @jscheuer1:

i have a google map code, it only works when i refreshed the page. but now i have another issue with the code below

when i run this google map jquery mobile code direct on the browser, it works but when i called it from another page it display every other content on the page except the google map unless i reload the page. now i need to manually refresh the google map div in the code below when button is clicked using jquery as in the line of code below

<div id="map_canvas" style="height:300px;" ></div>

below is the entire code

Code:

<!DOCTYPE html> <html> <head> <title>jQuery mobile with Google maps geo directions example</title> <meta content="en" http-equiv="content-language"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script> <script type="text/javascript"> $(document).on("pageinit", "#map_page", function() { initialize(); }); $(document).on('click', '#submit', function(e) { e.preventDefault(); calculateRoute(); }); var directionDisplay, directionsService = new google.maps.DirectionsService(), map; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); //var mapCenter = new google.maps.LatLng(21.5255962, 39.167697299999986); var mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278); var myOptions = { zoom:10, mapTypeId: google.maps.MapTypeId.ROADMAP, center: mapCenter } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById("directions")); } function calculateRoute() { var selectedMode = $("#mode").val(), start = $("#from").val(), end = $("#to").val(); if(start == '' || end == '') { // cannot calculate route $("#results").hide(); return; } else { var request = { origin:start, destination:end, travelMode: google.maps.DirectionsTravelMode[selectedMode] }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); $("#results").show(); /* var myRoute = response.routes[0].legs[0]; for (var i = 0; i < myRoute.steps.length; i++) { alert(myRoute.steps[i].instructions); } */ } else { $("#results").hide(); } }); } } </script> </head> <body> <div data-role="page" id="map_page"> <div data-role="header"> Map </div> <div data-role="content"> <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"> <div id="map_canvas" style="height:300px;"></div> <div data-role="fieldcontain"> <label for="from">From</label> <input type="text" id="from" value="Goteborg, Sweden"/> </div> <div data-role="fieldcontain"> <label for="to">To</label> <input type="text" id="to" value="Stockholm, Sweden"/> </div> <div data-role="fieldcontain"> <label for="mode" class="select">Transportation method:</label> <select name="select-choice-0" id="mode"> <option value="DRIVING">Driving</option> <option value="WALKING">Walking</option> <option value="BICYCLING">Bicycling</option> </select> </div> <input type="button" value="Reload Page" /> <a data-icon="search" data-role="button" href="#" id="submit">Get directions</a> </div> <div id="results" style="display:none;"> <div id="directions"></div> </div> </div> </div> </body> </html>

OK, if I understand you the solution to the first problem might be to have an empty unload event. That should force all script code to execute (add):

Code:

$(window).unload(function(){});

This is a little known method that prevents browsers from caching script states for that page by letting them know that the script state might have changed the last time the page unloaded.

Or, combined with that, and this might solve the other problem as well. Instead of initializing the map on a document event, do it on a window one. Change:

Code:

$(document).on("pageinit", "#map_page", function() { initialize(); });

to:

Code:

$(window).load(initialize);

The browser cache may need to be cleared and/or the page refreshed to see changes.

If all else fails and you still need a button to reload the map code, then (jQuery not required):

HTML Code:

<input type="button" value="Reload Map" onclick="initialize();>

If you want to use jQuery though, say the button has an id of "reloadmap":

HTML Code:

<input type="button" value="Reload Map" id="reloadmap">

Then you can have:

Code:

$(document).on('click', '#reloadmap', initialize);

If I don't understand you, please clarify what you mean by "when i called it from another page". Do you mean in a frame or iframe, or do you mean as AJAX, or, as what I assumed in my above response, by clicking a link from another page, something else?

am working on it and will get back soon