javascript - Administrar texto Html en ventana emergente

openlayers popup on marker click

Question

Estoy usando OpenLayer popup. al inicializarlo, hay un parámetro requerido para contener el html que se muestra en la ventana emergente. este parámetro es cadena de javascript.

Tengo un conflicto, por un lado, el texto html es largo, por lo que prefiero colocarlo en un archivo html y leer el archivo en la variable.

Por otro lado, el html depende de otras variables locales, por lo que si lo dejo en su lugar puedo concatenar algunas cadenas y variables locales para componer la variable final que contiene el texto html. pero es un código muy largo y feo ...

Tal vez los programadores de JavaScript con experiencia pueden ayudarme a encontrar una solución de diseño para este problema.

Gracias

Answer 1

Como está utilizando OpenLayers, puede usar la función OpenLayers.loadURL para recuperar HTML de su servidor.

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

Si desea pasar variables locales al lado del servidor HTML, puede configurar un controlador simple que acepte variables, y las integre en un HTML estático (utilizando el formato de cadena o una plantilla).

Si está usando .NET, entonces un archivo .ashx puede hacer esto. Ver http://dotnetperls.com/ashx para un ejemplo.

Answer 2

Otra solución es usar una solicitud de Ajax para cargar su archivo, y luego imprimir el contenido dentro de la ventana emergente.

Usando 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);
});

Cuando se completa la solicitud de Ajax, puede crear la ventana emergente y llenarla con el contenido del archivo previamente cargado.

Answer 3

Recomendaría la solución geographikas, y también trataré de usar diferentes clases de js para mejorar el mantenimiento y la legibilidad. No hagas todo en el mismo objeto, crea tu propio objeto emergente que hereda o usa OpenLayers.Popup.Anchored o algo así, y realiza la llamada al servidor Ajax desde allí. De esta forma no confundirás tu otro código con esto. También hace que sea fácil de reutilizar y sustituir cuando sea necesario.

Me gustaría ir por algo como esto (no probado):

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;
}

en un archivo llamado "mypopup.js"

y llámalo con:

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