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 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2007
    Location
    Skipton, North Yorkshire, UK
    Posts
    31
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Re-loading a div including JavaScripts located within it...

    Hi,
    I am wanting to use the Met Office weather widget on a web page, but it doesn't provide any easily accessible facility for users to change the location of the forecast. I have been working on a way of to allowing users to choose from locations in a drop-down box that will then change the location in the weather widget.

    The weather widget is initiated by two bits of JavaScript:

    <code>
    <script type="text/javascript" moWWidgetParams="moAllowUserLocation:true~moBackgroundColour:white~moColourS cheme:white~moDays:5~moDomain:www.metoffice.gov.uk~moFSSI:351649~moListStyle :vertical~moMapDisplay:none~moShowFeelsLike:true~moShowUV:true~moShowWind:tr ue~moSpecificHeight:350~moSpecificWidth:250~moSpeedUnits:M~moStartupLanguage :en~moTemperatureUnits:C~moTextColour:black~moGridParams:weather,temperature ,wind,pop~"; </script>
    </code>
    and
    <code>
    <script type="text/javascript" src="http://www.metoffice.gov.uk/public/pws/components/yoursite/loader.js"> </script>
    </code>
    These are positioned in the html within a div with id 'weatherWidget'.

    I have then added a <select> drop-down for users to select the location of their choice - the values of each option corresponds to the location code required by the first bit of JavaScript, above - '~moFSSI:351649'. When a user selects a location from the drop-down, the location code is saved into a JavaScript variable using an onchange on the <select>. In the Met Office JavaScript I have replaced the location code with the variable -

    '~moFSSI:351649'

    becomes

    '~moFSSI:"+weatherLocation+"' .


    What I therefore need to do once the variable had been set is to refresh/reload the div that contains the weather widget, <div id="weatherWidget">. I have initially tried to do this with:

    <code>
    $('#weatherWidget').load('/ #weatherWidget', function() { alert('Load was performed.'); });
    </code>
    But of course, because I have specified the div id to reload, the JavaScripts do not re-load when the div reloads. I have tried a range of things to get the scripts working - using .getScript, adding 'script' after '#weatherWidget' in the .load brackets, but to no avail.

    Can anyone suggest how I can get the weather widget to re-load please? I am now at a loss!
    I set up an example page with the widget at http://www.admin.webstu.co.uk/weather-test.html.

    Many thanks,
    Stu

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,659
    Thanks
    80
    Thanked 4,640 Times in 4,602 Posts
    Put it in an <iframe> inside the <div> and then reload the iframe.

    Use script to write the weather script in the iframe.
    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.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,659
    Thanks
    80
    Thanked 4,640 Times in 4,602 Posts
    Here. This seems to work:
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Home</title>
    </script>
    </head>
    <body>
    <div id="load">
        <p>Choose a location from the following list:</p>
        <select id="changer" class="weatherLocationSelect">
            <option value="351649" selected>Grassington</option>
            <option value="320309">Skipton</option>
            <option value="352560">Masham</option>
            <option value="353400">Settle</option>
        </select>
    
        <div id="weatherWidget" style="position: relative; width: 288px; height: 332px;">
            <iframe id="weatherIframe" style="width: 288px; height: 332px; border: none;"></iframe>
        </div>
    </div>
    
    <script type="text/javascript">
    function setWeatherLocation( )
    {
        var weatherLocation = document.getElementById("changer").value;
        document.getElementById("weatherIframe").src = "weatherIFrame.html?" + weatherLocation;
    }
    setWeatherLocation();
    document.getElementById("changer").onchange = setWeatherLocation;
    </script>
    </body>
    </html>
    And then this is the code for weatherIFrame.html:
    Code:
    <!DOCTYPE>
    <html>
    <head>
    <style type="text/css">
    * { margin: 0px; }
    </style>
    <body>
    <script type="text/javascript">
        var weatherLocation = location.search.substring(1);
        var params = "moAllowUserLocation:true~moBackgroundColour:black~moColourScheme:grey"
            + "~moDays:5~moDomain:www.metoffice.gov.uk~moFSSI:" + weatherLocation
            + "~moListStyle:vertical~moMapDisplay:none~moShowFeelsLike:true~moShowUV:true"
            + "~moShowWind:true~moSpeedUnits:M~moStartupLanguage:en~moTemperatureUnits:C"
            + "~moTextColour:white~moGridParams:weather,temperature,wind,feelslike,uv~"; 
        document.write('<scr' + 'ipt type="text/javascript">var moWWidgetParams="' + params + '";</' + 'script>\n');
        document.write('<scr' + 'ipt type="text/javascript" '
                  + ' src="http://www.metoffice.gov.uk/public/pws/components/yoursite/loader.js"></' + 'script>');
    </script>
    </body>
    </html>
    So you can move the position of the widget by just moving the <div>.
    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.

  • Users who have thanked Old Pedant for this post:

    stuartw (05-19-2013)

  • #4
    New Coder
    Join Date
    Nov 2007
    Location
    Skipton, North Yorkshire, UK
    Posts
    31
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks for your help, Old Pendant.
    Another thing that occurred to me was that the Met Office script actually contained a document.write() - this is not Ajax friendly so it wouldn't re-render the widget.
    I downloaded the script and saved it locally, changing the document.write() for html() and hey presto!, it works just as I want it and doesn't use iframes.
    I don't know why, but I have something in my mind that makes me think iframes aren't great (accessibility?, not sure), so I am happy to have found a non-iframe solution!
    Working version at http://www.admin.webstu.co.uk/weather-test.html
    Many thanks,
    Stu

  • #5
    New Coder
    Join Date
    Nov 2007
    Location
    Skipton, North Yorkshire, UK
    Posts
    31
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks for the suggestion, old pendant.
    I don't know why, but I have it in the back of my mind that iframes are the best solution (accessibility?), so I happened to download the script and have a look at it. Turns out that it contains a 'document.write()' - not AJAX friendly! So, it's no wonder that the widget wouldn't re-load!
    Anyway, I have downloaded the script and changed the document.write() to an html(), and refer to the script locally instead of externally.
    All now is fine and works just as I want it to!
    Now all I need to do is make sure that the terms of use of the script don't say that I can't change it!
    Working example at http://www.admin.webstu.co.uk/weather-test.html

    Very best wishes,
    Stu


  •  

    Posting Permissions

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