I've added ability for users to add new point on my google map. My code:
GEvent.addListener(map, "click", function(overlay,point) {
if (point) {
var myHtml = '<div id="addpoint"><form id="formadd" name="formadd_point" enctype="multipart/form-data" method="post" action="pointadd.php"><table><tr><td>Place:</td><td>' + point + '</td></tr><tr><td>Name:</td><td><input name="name" type="text" size="32" maxlength="200" /></td></tr><tr><td>Photo (jpg,png:2Mb):</td><td><input type="file" name="image" size="20" accept="image/png,image/jpeg" />&开发者_高级运维lt;/td></tr><tr><td></td><td><input name="pcoord" type="hidden" value="'+point+'" /><input type="hidden" name="MAX_FILE_SIZE" value="2000000" /><input name="subpoint" type="submit" value="Add" /></td></tr></table></form></div>';
map.openInfoWindowHtml(point, myHtml);
$('#formadd').ajaxForm({ beforeSubmit: validate, target:'#addpoint' });
}
});
It should be AJAX post without reloading. But It is not working! I don't know why. Maybe there is some conflict jquery.js and google api? How to submit form without reloading page?
Maybe you try to add eventListener to form before form html successfully added dom. Try this:
GEvent.addListener(map, "click", function(overlay,point) {
if (point) {
$('#formadd').live("load", function(){
$(this).ajaxForm({ beforeSubmit: validate, target:'#addpoint' });
});
var myHtml = '<div id="addpoint"><form id="formadd" name="formadd_point" enctype="multipart/form-data" method="post" action="pointadd.php"><table><tr><td>Place:</td><td>' + point + '</td></tr><tr><td>Name:</td><td><input name="name" type="text" size="32" maxlength="200" /></td></tr><tr><td>Photo (jpg,png:2Mb):</td><td><input type="file" name="image" size="20" accept="image/png,image/jpeg" /></td></tr><tr><td></td><td><input name="pcoord" type="hidden" value="'+point+'" /><input type="hidden" name="MAX_FILE_SIZE" value="2000000" /><input name="subpoint" type="submit" value="Add" /></td></tr></table></form></div>';
map.openInfoWindowHtml(point, myHtml);
}
});
精彩评论