I’m putting a third-party widget into a web page by pasting in the JS script provided by the third party. In basic form it works fine. The widget can be customised (before downloading the script). The customisation is contained in a string variable (it looks rather like a query string but has tilde separators; I’ve not come across its like before). The downloaded script has two parts: first there’s the variable string, then a remote JS script is called and the variable is referenced from it.
<script type='text/javascript'>
widgetParams="param1:value1~param2:value2~param3:value3~"; // simplified version
</script>
This is followed by a call to the widget on a remote JS file:-
<script type='text/javascript'
src="http://www.example.com/path/to/file/widget.js">
</script>`
One of the customisable values is the geographical location, and I want to make it easy for the site visitor to change it. I’ve got an HTML Select to change the value in the variable. My problems arise when I try to reload the script with the new value.
My first attempts worked on the initial page load (the default value of the location was successfully inserted into the ‘widgetParams’ variable which was read by the remote script). But although I could subsequently change the value of the location in the ‘widgetParams’ variable (via the Select) I couldn’t get the script to re-read it, and the widget remained unchanged. (This remains the case when using the remote widget script, see below).
I’ve now progressed (to some extent). I’ve tried using a local copy of the widget script (unchanged). It’s still OK on initial page load, but goes wrong after that. I can get the widget to reload with the new value, but it loads as a new page, which is NOT what I want.
<script>
var metloc = '351469'; // sets initial value (default location)
function doNewloc() { // called from HTML Select
var metloc = document.getElementById('metloc').value;
alert ('Met Loc set by Select is ' + metloc);
doMetWigdet(metloc);
}
function doMetWigdet(metloc) {
// var src = "http://www.metoffice.gov.uk/public/pws/components/yoursite/loader.js"; // remote version
var src = "lib/loader.js"; // local copy of the remote widget script
$('script[src="' + src + '"]').remove(); // remove the previous version of the script
alert ('Metloc in Params is now ' + metloc);
widgetParams="param1:value1~param2:" + metloc + "~param3:value3~"; // simplified version
var tgt = document.getElementById('mo'); // 'mo' is ID of containing <div>
$('<script>').attr('src', src + '?loc=' + metloc).appendTo(tgt); // query string as cache-buster
alert ('reLoadScript has run'); // see text
}
doMetWigdet(metloc);
</script>
My apologies for that lengthy explanation, but I feel it’s necessary for understanding of the problem…
My remaining problem boils down to: Why does the widget load in a new page on the second iteration ?
There’s reason to believe there may be some timing issues:
- Using the remote version of the widget script doesn’t work at all (not even first time) UNLESS I have the alert ‘reLoadScript has run’ at the end of the function ‘doMetWidget’ (the actual text is irrelevant, of course, but serves to identify). Comment out that alert and the widget doesn’t load.
- Using the remote version of the widget script (with alert) does work on page load, but there’s no change thereafter (nor does a new page load).
- Using the local copy of the script works WITH or WITHOUT the alert, but still loads a new page on change of location.
Perhaps I need to introduce some delays in a less obtrusive manner than an ‘alert’.
Also I’d much prefer NOT to use a local copy of the widget script.
You can see this (not) working here Scroll down to bottom of page to see the widget. The example is using the local copy of widget script, with the ‘alert’. It works first time (inserting default location), then when the location is changed using the ‘Select’ it loads the widget (with new location) in a new page. I’ve left some other alerts in too, but I don’t think their presence affects the result like the last one does.