2010-01-29 10 views
5

Ich habe Fähigkeit für Benutzer hinzugefügt, um einen neuen Punkt auf meiner Google-Karte hinzuzufügen. Mein Code:Google Karte: openInfoWindowHtml mit jquery Problem

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

Es sollte AJAX Post ohne Nachladen sein. Aber es funktioniert nicht! Ich weiß nicht warum. Vielleicht gibt es einen Konflikt jquery.js und Google API? Wie kann ich ein Formular senden, ohne die Seite neu zu laden?

Antwort

1

Vielleicht versuchen Sie, EventListener zu Formular hinzufügen, bevor Formular HTML erfolgreich Dom hinzugefügt. Versuchen Sie dies:

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

Vielen Dank für die Antwort. Ich habe viel Zeit damit verbracht zu versuchen zu verstehen, was das Problem ist. Es waren meine Kopfschmerzen. Dein Code funktioniert auch, wenn ich ihn nach map.openInfoWindowHtml schreibe! Das einzige Problem ist, dass ich zweimal auf "Senden" klicken muss. Nichts passiert nach dem ersten Klick. Und das Formular wird von Ajax nach dem zweiten Klick gesendet. Vielen Dank für die Hilfe bei der Lösung dieses Problems! – SPnova

+0

Ich bin mir nicht sicher, wie das ajaxForm-Plugin läuft, aber ich stelle mir vor, was das Problem ist. Der erste EventHandler, den ich geschrieben habe, fügt einen Handler hinzu, um das Ereignis zu senden und gibt false zurück. Und ich denke, das ajaxForm-Plugin fügt eventHandler hinzu, um das Senden von Formularen dort zu behandeln. Der erste Klick führt lediglich einen ajaxForm-Event-Handler aus. Und der zweite Klick-Trigger von ajaxForms Handler. Wenn Sie eine Lösung zum Hinzufügen von ajaxForm eventHandler durch ein Live-Event finden können, wird Ihr Problem verschwunden sein. –

+0

Ich habe meinen Code oben geändert. Vielleicht wird das funktionieren. –

Verwandte Themen