在信息窗口 GoogleMaps API 中提交带有 ajax 的表单
Submitting a form with ajax within infowindow 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();
}
}
});
});
通过查看您的脚本,有一些事实要点。
首先属性'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;
}
这里是故事开始的 init 函数
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
)));
和addComment.php检查是否收到回复
<?php
echo json_encode(
array('result'=>true,
'submitdata'=>$_POST
)
);
我正在添加我放在服务器上的 link 的 运行 脚本。
EXAMPLE
这里是开发新手。我试图在我网站上的 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();
}
}
});
});
通过查看您的脚本,有一些事实要点。
首先属性'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;
}
这里是故事开始的 init 函数
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
)));
和addComment.php检查是否收到回复
<?php
echo json_encode(
array('result'=>true,
'submitdata'=>$_POST
)
);
我正在添加我放在服务器上的 link 的 运行 脚本。 EXAMPLE