0

I have a little Google Maps app that draws markers with an Info Window. I'd like to be able to edit the info in the window and submit if. I can do this - but only once. I looked here Adding event to element inside Google Maps API InfoWindow which helped a bit, but with my code the submit event doesn't seem to fire.

Here is my code:

// get the data       
    $.getJSON( 'csvToJson.php', function(data) { 
      // Loop through it
      $.each( data, function(i, m) {        
        // Add the marker
        var title = m.Namn + ': ' + m.Meddelande;
        $('#map_canvas').gmap('addMarker', { 
          'position': new google.maps.LatLng(m.Lat, m.Lng), 
          'bounds':false, 
          'title': title } 
          ).click(function() {
            // Initialise the info window
            var divName = "detail" + m.id; // come back to this?
            var infoWindowContent = [
              "<form id='detail_form' action='bib.php' method='post'>",
              "Namn: <br><input type='text' name='Namn' value='" + m.Namn + "'></input>",
              "<br>Meddelande: <br>"  + m.Meddelande,
              "<br><input type='submit' value='Spara ändringar'></input></form>"
             ].join("");

            var info = new google.maps.InfoWindow({
              content: infoWindowContent
            });                    

            google.maps.event.addListener(info, 'domready', function() {
              $(document).off("submit");
              $(document).on("submit", (function() {
                console.log("Hi");
              })); // end addEvent
            }); // end addListener 
            $('#map_canvas').gmap('openInfoWindow', info, this);                 
        }); // end addMarker click(function)     
      }); // end $.each
    }); // end $.getJSON

All help appreciated.

Mini

Community
  • 1
  • 1
minisaurus
  • 1,099
  • 4
  • 17
  • 30

1 Answers1

0
  1. there is no jQuery-method addEvent, use on instead

  2. you open the infoWindow before you add the domready-handler, so it may happen that the domready-event already has been fired when you apply the listener. Move the line:

    $('#map_canvas').gmap('openInfoWindow', info, this);

...to the end of the click-listener

Dr.Molle
  • 116,463
  • 16
  • 195
  • 201
  • Thanks Dr.Molle, didn't seem to change anything. However, I noticed this in Firebug when the php runs: 'TypeError: b.split is not a function' "http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" line 45. – minisaurus Feb 11 '13 at 14:27
  • ignore messages in firebug when running a page that uses jQuery, the error-messages most of the time are wrong. Use another tool, e.g. chrome developer tools to get correct details for the error – Dr.Molle Feb 11 '13 at 14:32
  • Have now edited code as suggested and it does work. Thanks. Got a new problem now - each time I submit the form, it calls the submit handler one time more, i.e. the first time, it calls it once, the 2nd time twice, and so on. What's happening? Sorry, I'm an old C programmer from the 90's, so it's all a bit new for me, but great fun :) – minisaurus Feb 19 '13 at 08:06
  • each time you open the infoWindow you add a new submit-handler to the form. Use [`$.off()`](http://api.jquery.com/off/) before `$.on()` to remove previously attached handlers. – Dr.Molle Feb 19 '13 at 08:24
  • In stead of using `.off()` and `.on()` this might also be helpful: "To attach an event that runs only once and then removes itself, see `.one()`" - from [the jQuery API documentation](http://api.jquery.com/on/) – elgehelge May 03 '13 at 12:38