updating open layers popup with asynch URL request

Question

My mapsApp uses openLayers popup for markers on the map. When I create the pop-up I prepopulate it with a link and a CSS spinner. I then launch an asynch URL request.

What I want to do is then remove the spinner and add the info I receive back from the URL request afterward. I can't figure out how to reference the html portion of the popup (finalString).

Here's the code I have.

function showPopUp (markerID,itemID) {

// **Tested** this creates a spinner and works with CSS

wxString =   "<div class=\"spinner\" style=\"width: 34px; height: 34px\"><div class=\"bar1\"></div><div class=\"bar2\"></div><div class=\"bar3\"></div><div class=\"bar4\"></div><div class=\"bar5\"></div><div class=\"bar6\"></div><div class=\"bar7\"></div><div class=\"bar8\"></div><div class=\"bar9\"></div><div class=\"bar10\"></div><div class=\"bar11\"></div><div class=\"bar12\"></div></div>";
}

var markerString =   "<a title=\""+itemID+"\" href=\"http://www.mywebsite.com/item/"+itemID+"\" target=\"_blank\">"+itemID+"</a>";
var finalString = markerString + "</br>"+ wxString;

popup = new OpenLayers.Popup.FramedCloud(icaoID,
                     markerID.lonlat,
                     new OpenLayers.Size(200, 200),
                     finalString,
                     null, true);

map.addPopup(popup);
getWX(itemID,popup);        //asynch request that will remove the popup
}

my getWx function uses an XMLhttp request

function getWX (item) {

if (window.XMLHttpRequest) {    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else {                          // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function() {

    if (xmlhttp.readyState==4 && xmlhttp.status==200) {     //If finished loading

        return xmlhttp.responseText; 
    }
}

xmlhttp.open("GET","getwx.php?q=" + item,true);
xmlhttp.send();

}

Answer 1

I can help you with the first step - the access to your popup object. But I haven't found out how to change the text once you called the constructor.

(EDIT The Popup object has a setContentHTML function, which would be inherited by FramedCloud class.)

You are calling the getWX function with two parameters, but you only accept one. Start by adding the popup object to that like this:

function getWX (item, popup)

then when the call is ready (readyState == 4), change the popups text:

if (xmlhttp.readyState==4 && xmlhttp.status==200) {     //If finished loading

    popup.setContentHTML(xmlhttp.responseText); 
}

Maybe it's easier if you waited for the text before you create the popup?

Then it would be something like this:

Pass in a reference to the map object:

function getWX (item, map)

Create the popup when the text is ready:

if (xmlhttp.readyState==4 && xmlhttp.status==200) {     //If finished loading
     popup = new OpenLayers.Popup.FramedCloud(icaoID,
                 markerID.lonlat,
                 new OpenLayers.Size(200, 200),
                 finalString,
                 null, true);

    map.addPopup(popup);
}