在infowindow中提交一個帶有ajax的表單Google地圖API

Question

在這裏開發新手。我試圖在我的網站上的Google地圖上的每個infowindows中都有一個表單。我有一個函數可以生成所有的標記以及每個標記的內容。

我的問題是應該在我的infowindow中的窗體後被調用的jQuery從未被調用（至少addComment.php從未被調用過）。我環顧四周，找不到任何解決此問題的方法。任何幫助將是非常讚賞

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 15, 
    center: new google.maps.LatLng(38.64806723893503, -90.30880584275044), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var pdata; 
$.ajax({type:'POST', url: 'fetchInfo.php', data: pdata, dataType: 'json', success: function(response) { 

    var infowindow = new google.maps.InfoWindow(); 

    var marker, i; 

    var content = new Array(); 

    for (i = 0; i < response.length; i++) { 

     content[i] = '<div> '+ response[i].added; 

     content[i] += '<div class=description>'+response[i].desc+'</div>'; 
     content[i] += '</div>'; 
     content[i] += '<div class=addCom>'; 
     content[i] += '<textarea rows="4" cols="10" name="comment" id="comment" data-picId='+response[i].picture_id+' placeholder="Enter Comment Here..."></textarea><br>'; 
     content[i] += '<input class="submitComment" type="button" value="Add Comment"/>'; 
     content[i] += '</div>'; 

     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(response[i].lat, response[i].lng), 
      map: map 
     }); 

     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
       map.panTo(marker.position); 
       infowindow.setContent(content[i]); 
       infowindow.open(map, marker); 
      } 
     })(marker, i)); 
    } 
}}); 

然後，從這個功能分開我有一個jQuery執行Ajax調用

$(".submitComment").click(function(){ 
    var comment = $("#comment").val(); 
    var picture_id = $(this).attr('data-picId'); 
    var user_id = usrId; 
    if (comment === ""){ 
     return; 
    } 
    var pdata = { 
     comment : comment, 
     picture_id : picture_id, 
     user_id : user_id 
    }; 
    $.ajax({type:'POST', url: 'addComment.php', data: pdata, dataType: 'json', success: function(response) { 
     if(response.success){ 
      $("#uploadfile_input").val(""); 
      $("#lat").val(""); 
      $("#lng").val(""); 
      $("#desc").val(""); 
      load(); 
     } 
    } 
    }); 
    }); 

Answer 1

通過看你的腳本，也有事實的一些點。

• 首先屬性'id'的意思是唯一性，所以你必須給註釋分配唯一的id。 content[i] += '<textarea rows="4" cols="10" name="comment" id="comment" data-picId='+response[i].picture_id+' placeholder="Enter Comment Here..."></textarea><br>';

• 在元素在DOM中可用之後，必須應用事件偵聽器。在這種情況下，當添加新表單時，應該在創建infoWindow之後對其應用事件偵聽器，然後使用$ .submit（）事件來訂閱此表單提交併使用serializeForm（）來滿足動態關注點。

for(){ 
 
      content[i] = '<form><div> '+ response[i].added; 
 
    
 
      content[i] += '<div class=description>'+response[i].desc+'</div>'; 
 
      content[i] += '</div>'; 
 
      content[i] += '<div class=addCom>'; 
 
      content[i] += '<textarea rows="4" cols="10" name="comment" id="comment" data-picId='+response[i].picture_id+' placeholder="Enter Comment Here..."></textarea><br>'; 
 
      content[i] += '<input class="submitComment" type="button" value="Add Comment"/>'; 
 
      content[i] += '</div></form>'; 
 
    
 

 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
        return function() { 
 
         map.panTo(marker.position); 
 
         infowindow.setContent(content[i]); 
 
         infowindow.open(map, marker); 
 
        } 
 
       })(marker, i)); 
 
     $(content[i]).submit(listenformSubmission()); 
 
     } 
 
      function listenformSubmission(){ 
 
       var comment = $(this).find('[name="comment"]');//here will be the form object 
 
       var picture_id = comment.attr('data-picId'); 
 
       var user_id = usrId; 
 
       if (comment === ""){ 
 
        return; 
 
       } 
 
       var pdata = { 
 
        comment : comment, 
 
        picture_id : picture_id, 
 
        user_id : user_id 
 
       }; 
 
       $.ajax({type:'POST', url: 'addComment.php', data: pdata, dataType: 'json', success: function(response) { 
 
        if(response.success){ 
 
         $("#uploadfile_input").val(""); 
 
         $("#lat").val(""); 
 
         $("#lng").val(""); 
 
         $("#desc").val(""); 
 
         load(); 
 
        } 
 
       } 
 
     return false; 
 
       }

這裏是一個示例代碼 我不刪除上述答案解釋這個答案的更多細節。 這是一個可能在這種情況下幫助你的代碼。所有的 首先我寫了一個點擊監聽器，內存

function addCommentForm(el){ 
var formdata = $(el); 
    var siblings = formdata.siblings(); 
    var comments= $(siblings[1]).val(); 
     console.log(comments); 
     if (comments === "") { 
      return; 
     } 
     var pdata = { 
      comment:comments 

     }; 
    console.log(pdata); 
     $.ajax({ 

      type: 'POST', url: 'addComment.php', data: pdata, dataType: 'json', success: function (response) { 

       alert((JSON.stringify(response))); 
       } 

     }); 
    return false; 

} 

可用，這裏是其中的故事開始

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 15, 
     center: new google.maps.LatLng(38.64806723893503, -90.30880584275044), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    // alert("ok"); 
    $(document).ready(function() { 
     var pdata; 
     $.ajax(
       { 
        type: 'POST', 
        url: 'fetchInfo.php', 
        data: {}, 
        dataType: 'json', 
        success: function (response) { 

         var infowindow = new google.maps.InfoWindow(); 
         var marker, i; 
         console.log(response); 
         var content = []; 
         for (i = 0; i < response.length; i++) { 
          content[i] = '<form ><div> ' + response[i].added; 

          content[i] += '</div>'; 
          content[i] += '<div class=addCom>'; 
          content[i] += '<div class=description>' + response[i].desc + '</div>'; 
          content[i] += '<textarea rows="4" cols="10" name="comment" id="comment" data-picId=' + response[i].picture_id + ' placeholder="Enter Comment Here..."></textarea><br>'; 
          content[i] += '<input onclick="return addCommentForm(this);" class="submitComment" type="button" value="Add Comment"/>'; 
          content[i] += '</div></form>'; 
          marker = new google.maps.Marker({ 
           position: new google.maps.LatLng(response[i].lat, response[i].lng), 
           map: map 
          }) 
          google.maps.event.addListener(marker, 'click', (function (marker, i) { 
           return function() { 
            console.log($(content[i])); 
            map.panTo(marker.position); 
                     infowindow.setContent(content[i]); 


            infowindow.open(map, marker); 
           } 
          })(marker, i)); 

         } 
        } 
       }); 
    }); 
} 

我寫了一些PHP腳本來檢查響應和這裏的初始化函數它是 fetchInfo.php

<?php 
echo json_encode(array(array(
    'lat'=>"38.64806723893503", 
    'lng'=>"-90.30880584275044", 
    'added'=>"1", 
    'desc'=>"Descripion of map", 
    'picture_id'=>1 
))); 

和加Comment.php檢查響應收到

<?php 
     echo json_encode(
    array('result'=>true, 
    'submitdata'=>$_POST 
    ) 
    ); 

我加入行書我已經把一臺服務器上的一個環節。 EXAMPLE