Results 1 to 5 of 5

Thread: how to reload page just once

  1. #1
    Join Date
    Aug 2013
    Posts
    86
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 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>
    Last edited by mutago; 04-09-2014 at 09:38 PM. Reason: just added code tag

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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?
    Last edited by jscheuer1; 04-10-2014 at 01:36 AM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2013
    Posts
    86
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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?
    Last edited by jscheuer1; 04-12-2014 at 01:30 AM. Reason: add question for further clarification
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2013
    Posts
    86
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    am working on it and will get back soon

Similar Threads

  1. stepcarousel crashes page on reload in IE
    By rofls in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 09-07-2009, 07:53 AM
  2. Tabbed navigation (no page reload)
    By Anexx in forum Looking for such a script or service
    Replies: 1
    Last Post: 08-06-2009, 12:25 PM
  3. Page reload
    By Mike4x4 in forum Looking for such a script or service
    Replies: 9
    Last Post: 04-13-2008, 11:55 PM
  4. Iframe SSI script Page reload
    By loomy in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 08-09-2007, 06:31 PM
  5. Execute Function On Page Reload
    By kermit_cof in forum JavaScript
    Replies: 1
    Last Post: 01-28-2006, 02:50 AM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •