Managing Html text in popup

I'm using OpenLayer popup. when initializing it, there a parameter required to contain the html displayed in the popup. this parameter is javascript string.

I have a conflict, on the one hand the html text is long so I prefer to place it in html file 开发者_如何学Goand read the file to the variable.

On the other hand, the html depends on other local variables, so if I leave it on its place I can concatenate some strings and local variables to compose the final variable containing the html text. but it is very long and ugly code...

Maybe experienced javascript programmers can help me to find a design solution to this problem?

thanks

As you are using OpenLayers you can use the OpenLayers.loadURL function to retrieve HTML from your server.

http://dev.openlayers.org/releases/OpenLayers-2.10/doc/apidocs/files/OpenLayers/Ajax-js.html

If you want to pass in local variables to server side HTML you can set up a simple handler that accepts variables, and integrates these into some static HTML (using string formatting or a template).

If you are using .NET then a .ashx file can do this. See http://dotnetperls.com/ashx for an example.

Another solution is to use an Ajax request to load your file, and then print the content inside the popup.

Using JQuery:

$.get('myfile.php',function(content){
   var popup = new OpenLayers.Popup("popupid",
         new OpenLayers.LonLat(mouseX,mouseY),         
         new OpenLayers.Size(360,200),               
         content,
         true);  
   map.addPopup(popup);
});

When the Ajax request is completed, you can create the popup and fill it with the file content previously loaded.

I would recommend geographikas solution, and also try to use different js-classes to improve maintainability and readability. Don't do everything in the same object, make your own popup object that inherits from or uses OpenLayers.Popup.Anchored or something, and make the Ajax server call from there. This way you won't clutter your other code with this. Also makes it easy to reuse and substitute when needed.

I would go for something like this (untested!):

mynamespace.mypopup = function(o) {

    var size = new OpenLayer.Size(100, 70);
    var icon = new OpenLayers.Icon(); // Fill it
    var popup = new OpenLayers.Popup.Anchored(o.id, o.lonlat, size, getContent(), icon, false, null);

    var getContent = function() {
        // ajax call
        // return a string
    }

    return popup;
}

in a file called "mypopup.js"

and call it with:

 var popup = new mynamespace.mypopup({id: 'whatever', lonlat: myLonLat});