CODEWITHSUNDEEP
javascriptjqueryformsgoogle-mapsinfowindow
Christian Dechery
Christian Dechery

Reputation: 880

jQuery not working with form inside a InfoWindow

I use JQuery to handle all my form submits, and they are all working fine. But I can't seem to get it working with a form that is inside a dynamically generated (Googlemap's marker) InfoWindow. Should I use it in a different way? Maybe with $(document).on to capture the submit?

This is the code to catch the form submit:

$(function() {
$('#new_marker').submit(function(e) {
    e.preventDefault();
    $.post($("#new_marker").attr("action"), $("#new_marker").serialize(), function(data) {
        var json = myParseJSON( data );
        if( json.status=="success" ) {
            location.href = site_root+'map/modify_marker/'+json.marker_id;
        } else {
            new Messi( json.msg, {title: 'Oops...', titleClass: 'anim error', buttons: [{id: 0, label: 'Fechar', val: 'X'}]});
        }
    }).fail( function() { general_error(); } );
    return false;
});
});

As I've said, a code just like this for all my other forms, but not for the new_marker form that is inside an InfoWindow. It just basically posts the form to action without even aknowledging the Jquery code.

This is the code I use to load contents to the InfowWindow:

function newmarker_infowindow_content(lat, long, infowindow) {
    $.ajax({
    url: site_root +'map/newmarker_infowindow/' + lat +'/' +long,
    success: function(data){
        infowindow.setContent(data);
        processInLineLabels();
    }
});
}

Upvotes: 0

Views: 211

Answers (1)

charlietfl
charlietfl

Reputation: 171690

Since form isn't available on page load...you will need to delegate the submit handler to an asset that is permanent in page. Closest would be element the map is being inserted in but could also use document.

$('#MapDivID').on('submit', '#new_marker', function(e){
     e.preventDefault();
     /* do ajax*/
})

Read more about event delegation in jQuery on() docs

Upvotes: 1

Related Questions