Passing a variable to jsp when reloading an iframe using javascript

Question

In my javascript code I load a jsp page in an iframe and pass some variables like this:

htmlData[i++]="<iframe id=\"mapframe\" frameborder=\"0\" style=\"width:330px;height:300px\" src=\"" + "mapURL.jsp" +"&lat=" + AjxStringUtil.urlComponentEncode("33.65") +"&lng=" + AjxStringUtil.urlComponentEncode("-84.42") +"&accord=" + AjxStringUtil.urlComponentEncode(accord) +"\"></iframe>";

Then I have to reload that jsp page after an action, and I do this:

accord = ui.newHeader.text(); document.getElementById('mapframe').contentWindow.location.reload();

The reload works except that the "accord" variable is not getting updated. When I call it from the jsp, it still has its original value. How do I pass the new value when reloading the iframe/jsp?

It shouldn't make any difference, but I am working with jquery and this is for a Yahoo zimlet.

Thanks.

Answer 1

How is the ‘accord’ variable getting ‘updated’? At the moment you are merely reloading the same URL you built the first time round; if the JavaScript accord variable has changed and you want to change the URL to reflect that, you must build a new URL and navigate the iframe to the new page with the different accord parameter.

function encodeParameters(o) {
    var s= [];
    for (var k in o)
        if (o.hasOwnProperty(k))
            s.push(encodeURIComponent(k)+'='+encodeURIComponent(o[k]));
    return s.join('&');
}

var accord= ui.newHeader.text(); 
var url= 'mapURL.jsp?'+encodeParameters({
    lat: '33.65', lng: '-84.42', accord: accord
});
document.getElementById('mapframe').src= url;

Note contentWindow is historically an IE extension, and better avoided. Also if you must create your iframe by sticking HTML together, you will need to HTML-escape the URL before including it in the markup. Otherwise the & characters in the URL are invalid and likely to cause trouble when you hit a parameter name that matches an HTML entity name.

function encodeHTML(s) {
    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
}

htmlData[i++]= '<iframe id="mapframe" src="'+encodeHTML(url)+'" frameborder="0" style="width:330px;height:300px"></iframe>';

(I'd generally prefer to create elements using DOM methods, to avoid having to explicitly HTML-encode.)