Question

I want to trigger jQuery from a GMap info window. I have these code for my GMap:

var theContent = "<form action='#' method='post' onSubmit='return false;'><input type='text' name='firstname' />";
theContent += "<input type='submit' value='Save' /></form>";

var infowindow = new google.maps.InfoWindow({       
    content: theContent
});
infowindow.open( map, marker);

and these code for jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type='text/javascript'>
    $(document).ready(function() {
        $('form').bind('submit',function() {
            var str = $('form').serialize();

            $.ajax({
                type: "POST",
                url: "save.php",
                data: str,
                success: function(msg){
                    alert('Saved!');
                }
            });

            return false; //so the page won't refresh
        });
    });
</script>

The problem is, my input to the infowindow textbox isn’t saving, that’s why I think jQuery isn’t triggered inside GMap infowindow/bubble.

When I tried the form outside GMap, it works fine.

Thanks for any help!

Answer 1

Right now, the jQuery code is binding to the form on document ready, but not necessarily when the info window is open. Therefore, it’s possible you are binding to the form when the infowindow is not even part of the DOM, which is not possible. You need to either:

1. Call $('form').bind(...) RIGHT AFTER infowindow.open(...) OR
2. Change $('form').bind(...) to $('form').live(...). This will target all present and future forms on the page.