Доступ к gMap 3 и jQuery DOM в infoWindow - PullRequest
Новая
       18

Доступ к gMap 3 и jQuery DOM в infoWindow

1 голос
/ 03 февраля 2012

Я работаю над пользовательским интерфейсом для социального веб-приложения и использую infoWindows для отображения информации о пуа. Теперь я хочу дать пользователю возможность редактировать некоторую информацию о Pois и сохранять ее. Моя проблема в том, что я не могу получить доступ к определенным элементам DOM в информационном окне. Здесь я разбираю файл XML с помощью pois и добавляю к ним infoWindows. 

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

И после инициализации карты и функции готовности документа я хочу получить доступ к div изменения в infoWindow, который не работает. Я скучаю по чему-то фундаментальному? 

$("#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
          } 
})

Спасибо за помощь. Дядя Хо

1 Ответ

1 голос
/ 13 марта 2012

хорошо, я понял, что я действительно пропустил что-то очень фундаментальное !!! Элементы DOM в информационном окне не существуют в тот момент, когда я загружаю карту. Они создаются динамически в моем приложении. Поэтому я не могу получить к ним доступ в $ (document) .ready (function () {etc ... Я должен написать событие onclick непосредственно в html-коде информационного окна и написать отдельную функцию onclick для кнопки изменения.

Вот модифицированный код: 

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

и функция отдельного щелчка 

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

Надеюсь, это поможет кому-то еще; -)))

Дядя Хо

...