Html text management in popup

Question

I am using the OpenLayer popup. when initializing it, you must specify the parameter that should contain the html displayed in the pop-up window. this parameter is a javascript string.

I have a conflict, on the one hand, the html text is long, so I prefer to put it in an html file and read the file in a variable.

Html, on the other hand, depends on other local variables, so if I leave it in its place, I can combine some lines and local variables to form a final variable containing html text. but this is a very long and ugly code ...

Perhaps experienced javascript programmers can help me find a solution to solve this problem?

thank

Answer 1

Since you are using OpenLayers, you can use the OpenLayers.loadURL function to extract HTML from your server.

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

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

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

Answer 2

Another solution is to use an Ajax request to upload your file, and then print the contents 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);
});

Ajax , .

Answer 3

I would recommend the solution of geographikas, and also tried to use various js classes to improve maintainability and readability. Do not do everything in the same object, create your own pop-up object that inherits or uses OpenLayers.Popup.Anchored or something else, and make an Ajax call from there. This way you will not clutter up your other code with this. Also simplifies reuse and replacement if necessary.

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 name it with:

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