2010-01-29 20 views
5

He agregado la capacidad para que los usuarios agreguen un nuevo punto en mi mapa de google. Mi código:Google map: openInfoWindowHtml con el problema de jquery

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" /></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' }); 
    } 
}); 

Debe ser la publicación AJAX sin recargar. ¡Pero no está funcionando! No sé por qué. Tal vez hay algún conflicto jquery.js y google api? ¿Cómo enviar formulario sin página de recarga?

Respuesta

1

Quizás intente agregar eventListener al formulario antes de que html se haya agregado con éxito a dom. Pruebe esto:

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); 

    } 
}); 
+0

Muchas gracias por la respuesta. Pasé mucho tiempo tratando de entender cuál es el problema. Fue mi dolor de cabeza ¡Tu código está funcionando incluso si lo escribo después de map.openInfoWindowHtml! El único problema es que tengo que hacer clic en el botón enviar dos veces. Nada sucede después de hacer clic primero. Y el formulario es enviado por Ajax después del segundo clic. ¡Muchas gracias por ayudar a resolver este problema! – SPnova

+0

No estoy seguro de cómo se está ejecutando el plugin ajaxForm, pero me imagino cuál es el problema. First eventHandler que escribí, agrega un controlador para enviar el evento y devuelve falso. Y creo que el complemento ajaxForm agrega eventHandler para manejar el envío del formulario allí. Así que el primer clic no hace más que ejecutar el controlador de eventos ajaxForm. Y segundo clic en el disparador del controlador de ajaxForm. Si puede encontrar una solución para agregar ajaxForm eventHandler por un evento en vivo, su problema desaparecerá. –

+0

Cambié mi código de arriba. Quizás esto funcione. –