Отправка формы с помощью ajax в информационном окне GoogleMaps API

Question

Отправка формы с помощью ajax в информационном окне GoogleMaps API

Развитие новичка здесь. Я пытаюсь разместить форму внутри каждого моего информационного окна на карте Google на моем веб-сайте. У меня есть одна функция, которая генерирует все маркеры, а также содержимое каждого из маркеров.

Моя проблема в том, что 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();
}
}
});
});

-1

ajax google-maps infowindow jquery php

Решение

По вопросам рекламы [email protected]

Accepted Answer

Глядя на ваш сценарий, вы обнаружите несколько фактов.

Прежде всего, атрибут «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;
}

0

Другие решения

Других решений пока нет …

Источник