インフォボックス内にajaxを含むフォームを送信するGoogleMaps API

Question

開発初心者はここにあります。私は自分のウェブサイト上のGoogleマップ上の各インフォボックス内にフォームを作成しようとしています。私はすべてのマーカーとそれぞれのマーカーの内容を生成する1つの関数を持っています。

私の問題は、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)); 
    } 
}}); 

をいただければ幸い、この機能とは別に、私はあなたのスクリプトを見ていることで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

を行い、jQueryのを持って、事実のいくつかのポイントがあります。

• まず、属性 '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スクリプトを書いて、ここからinit関数でありますそれは 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