gMap 3 and jQuery DOM access in infoWindow

Question

I'm working on a custom interface for an social web application and I'm using infoWindows to display information about pois. Now I want to give the user the possiblity to edit some of the pois information and save it. My problem is, I can't access specific DOM elements in the infoWindow. Here I'm parsing a XML file with pois and add infoWindows to them.

function parseXml (xml){
poiXml = xml;
$(poiXml).find("POI").each(function(){

    imgs ="";
    $(this).find("PhotoFile").each(function(){
            imgs += '<tr><td><img src="http://socialdisplay.meinsandkasten.eu/pic/'
                +$(this).attr("name")
                +'?thumb=1"></td></tr>';
    })

    myMarkers.push({
        lat: $(this).find("Latitude").text(), 
        lng: $(this).find("Longitude").text(), 
        data:   '<div id="poiWindow" style="padding:40px">'
                    +'<form id="changeForm">'
                        +'<table>'
                            +'<tr>'
                                +'<th id="poiId" style="display:none">'+$(this).attr("id")+'</th>'
                                +'<th>Titel:<div id="titleChange">'+$(this).attr("title")+'</div></th>'
                            +'</tr>'
                            +'<tr>'
                                +'<td>Geschichte:<div id="storyChange">'+$(this).find("InformationFile").text()+'</div><td>'
                            +'</tr>'
                            +'<tr>'
                                +'<td>Bildbeschreibung:<div id="descriptionChange">'+$(this).find("PhotoDescription").text()+'</div><td>'
                            +'</tr>'
                            +'<tr>'+imgs+'</tr>'    
                            +'<tr>'
                                +'<td><div id="change">Geschichte &auml;ndern</div></td>'
                            +'</tr>'
                        +'</table>'
                    +'</form>'
                +'</div>'           
    })


});

$("#map").gmap3({
        action:'addMarkers',
         markers:myMarkers,
         marker:{
            options:{
                draggable: false
            },
            events:{
                click: function(marker, event, data){
                  var map = $(this).gmap3('get'),
                      infowindow = $(this).gmap3({action:'get', name:'infowindow'});
                  if (infowindow){
                    infowindow.open(map, marker);
                    infowindow.setContent(data);
                  } else {
                    $(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: data}});
                  }
                }
             }
         }      
});
}

And after the initialisation of the map and the document ready function, I want to access the change div in the infoWindow, which doesn't work out. Do I miss something fundamental?

$("#change").click(function(){
    if ($(this).text()=="Geschichte &auml;ndern") {
                    $(this).text("Geschichte speichern");
                    $("#poiWindow").get(0).contentEditable = "true";
                    $("#titleChange").get(0).contentEditable = "true";
                    $("#storyChange").get(0).contentEditable = "true";
                    $("#descriptionChange").get(0).contentEditable = "true";
                     // Weitere Befehle, wenn Button aktiv
          } else {
                     $(this).text("Geschichte ändern");
                     // Weitere Befehle, wenn Button inaktiv
          } 
})

Thanks for the help. Uncle Ho

score 1 · Answer 1 · answered Mar 12 '12 at 23:08

ok I've figured out, that I really missed something very fundamental!!! The DOM elements in the infowindow don't exist in the moment I load the map. They are created dynamically in my App. So I can't access them in the $(document).ready(function(){etc... I have to write the onclick event directly in the html-code of the infowindow and write a seperated onclick function for the change button.

Here is the modified code:

//add Pois to the map
$("#map").gmap3({
        action:'addMarkers',
         markers:myMarkers,
         marker:{
            options:{
                draggable: false
            },
            events:{
                click: function(marker, event, data){   
                  var map = $(this).gmap3('get'),
                      infowindow = $(this).gmap3({action:'get', name:'infowindow'});
                  var infoWinChange =
                                    "<form id='changeForm'>"+
                                        "<table>"+
                                            "<tr>"+
                                                "<th id='poiId' style='display:none'>"+ data.poiId +"</th>"+
                                                "<th>Titel:</th><th><div id='titleChange'>"+ data.title +"</div></th>"+
                                            "</tr>"+
                                            "<tr>"+
                                                "<td>Geschichte:</td><td><div id='storyChange'>"+ data.story +"</div><td>"+
                                            "</tr>"+
                                            "<tr>"+
                                                "<td>Bildbeschreibung:</td><td><div id='descriptionChange'>"+ data.description +"</div><td>"+
                                            "</tr>"+
                                            "<tr>"+ data.previewImg +"</tr>"+   
                                            "<tr>"+
                                                "<td><div id='buttonChange' onclick='clickChange()'>Geschichte &auml;ndern</div></td>"+
                                            "</tr>"+
                                        "</table>"+
                                    "</form>";    
                  if (infowindow){
                    infowindow.open(map, marker);
                    infowindow.setContent( 
                        infoWinChange              
                    );
                  } else {
                    $(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: 
                        infoWinChange
                                  }});
                  }
                }
             }
         }      
});

and the seperated click function

function clickChange(){
// alert("Handler for .click() called.");
    if ($("#buttonChange").text()=="Geschichte ändern") {
                    $("#buttonChange").text("Geschichte speichern");
                    $("#changeForm").get(0).contentEditable = "true";
                    $("#titleChange").get(0).contentEditable = "true";
                    $("#storyChange").get(0).contentEditable = "true";
                    $("#descriptionChange").get(0).contentEditable = "true";
                    // Weitere Befehle, wenn Button aktiv
          } else {
                    $("#buttonChange").text("Geschichte ändern");
                    $("#changeForm").get(0).contentEditable = "false";
                    $("#titleChange").get(0).contentEditable = "false";
                    $("#storyChange").get(0).contentEditable = "false";
                    $("#descriptionChange").get(0).contentEditable = "false";
                    // Weitere Befehle, wenn Button inaktiv
          } 
}

I hope that helps someone else ;-)))

Uncle Ho

gMap 3 and jQuery DOM access in infoWindow

1 Answers1