Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to time-out javascript?

    I have a website where I have a search box (supplied by Javascript) that shows source information and live inventory from my suppliers website.

    All works 'okay' most of the time and I am fairly happy with it but with two exceptions.

    Once a day my supplier updates their inventory and their server is down for 5-30 minutes in the early hours of the morning (UK time). The problem is that my website therefore cannot load the script and the rest of the page won't load until such time as my supplier's website is back online. We have customers world-wide so it isn't ideal as 2.00am UK time obviously isn't the case elsewhere in the world.

    Also the loading of the search box can at times delay the loading of my webpages (the search box is on a number of pages).

    Two questions:

    1. Is there a way to get the javascript to load last (it is placed quite high up on the page - above the fold)

    2. If the javascript doesn't load after a number of seconds.. say 10s - is it possible to load a message in its place - ie.. "Inventory updating please call back shortly"

    Thanks for any advice...

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,302
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Quote Originally Posted by Gemini23 View Post
    Two questions:

    1. Is there a way to get the javascript to load last (it is placed quite high up on the page - above the fold)

    2. If the javascript doesn't load after a number of seconds.. say 10s - is it possible to load a message in its place - ie.. "Inventory updating please call back shortly"

    Thanks for any advice...
    1) Yes. Place the Javascript immediately before the </body> tag.

    2) Yes. Provided you can identify the name of a global Javascript variable in the downloaded script,


    Code:
    <script type = "text/javascript">
    
    function testifloaded() {
    if (typeof thirdpartglobalvariable == "undefined") {
    alert ("Inventory updating please call back shortly");
    }
    }
    
    window.setTimeout(testifloaded,10000);  // 10 seconds
    
    </script>
    Naturally the above script must come after the third-party script. Instead of the primitive alert you might prefer to display a styled message in a <span>.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 12-04-2012 at 09:18 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,574
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    If the inventory is "loaded" using an AJAX call, you can control the AJAX timeout and, upon that timeout, do the same thing Philip showed.

    But Philip's answer is a pretty good generic one. Even if the variable is defined, if it doesn't have the value or kind of value you are expecting, you can use that same basic pattern.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    you can add the defer or async attribute to the script tag so that your page does not wait on the script to load before rendering the html.

    visually, you want to use HTML and CSS to indicate to all users every time that the script is "loading". after ten seconds, you tell them that it is "unavailable", and when the script arrives, it replaces the "loading"/"unavailable" text with the data/functionality provided by the script, intuitively replacing the message with functionality.

    a <progress></progress> usually looks good in those kind of empty containers...
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%


  •  

    Posting Permissions

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