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:
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 -
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:
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
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:
<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>
<script type="text/javascript" src="http://www.metoffice.gov.uk/public/pws/components/yoursite/loader.js"> </script>
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'
- '~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:
- $('#weatherWidget').load('/ #weatherWidget', function() { alert('Load was performed.'); });
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