CODEWITHSUNDEEP
javascriptruby-on-railsgoogle-mapsonclickmagnific-popup
Andrew Fleischer
Andrew Fleischer

Reputation: 61

Javascript onClick function only works once in rails magnific popup

I'm using the google maps api in a rails app in order to be able to mark an object by clicking on the map. Clicking on the map should bring up a rails form for the object using the magnific popup gem and the form can be submitted to create a new object. This process will work for the first time you click on the map but the second time you try to press the submit button on the popup, nothing will happen. Pressing the submit button should send a post request to my create action and close the popup but neither of that is happening. Heres the relevant js code:

google.maps.event.addListener(handler.getMap(), 'click', function 
   (event) {
       handleClickEvent(event);
    });

handleClickEvent code

displayPopup(event.latLng.lat(), event.latLng.lng(), <%=current_user.id %>);
  var submitButton = document.getElementsByClassName('mfp-close')['submitButton'];
  submitButton.onclick = function() {
    var text = "<h4> marked by: @<%= current_user.username %> </h4></br> info will load on refresh" ;
      createMarker(event.latLng.lat(), event.latLng.lng(), text);
    };

The magnific popup js

function displayPopup(lat, lng, user){
      $.magnificPopup.open({
           items: {
               src: '#pothole-popup',
               type: 'inline'
           },
           callbacks: {
             change: function() {
               this.content[0].children[0][2].value = lat;
               this.content[0].children[0][3].value = lng;
               this.content[0].children[0][4].value = user;
             }}
       });
     }

Standard adding a marker

 function createMarker(lat, lng, text){
    var marker = handler.addMarker({
      lat: lat,
      lng: lng,
      infowindow: text
    }, {animation: google.maps.Animation.DROP});
  }

The form that pops up:

<%= form_for :pothole, url: potholes_path do |form| %>

<h3>Mark a pothole</h3>
<br>
  <%= form.number_field :latitude, step: :any, class: "gone"%>
  <%= form.number_field :longitude, step: :any, class: "gone"%>
  <%= form.number_field :user_id, class: "gone"%>

<p>
  <%= form.label "Comments" %><br>
  <%= form.text_field :comment %>
</p>

<p>
  <%= form.label "Severity" %><br>
  <%= form.select :severity, (1..10) %>
</p>

<%= form.submit "Submit", class: "mfp-close" %>

<% end %>

The "mfp-close" class enables the button to close the magnific popup, but even that is not firing on the second click of the submit button. http://dimsemenov.com/plugins/magnific-popup/documentation.html#closebtninside

I'm thinking this may be a javascript problem because of the nested onClick function but I'm not sure. Any suggestions?

Upvotes: 0

Views: 156

Answers (1)

Andrew Fleischer
Andrew Fleischer

Reputation: 61

I figured out the problem, the data-disable-with attribute was added for some reason so I needed to remove it

submitButton.removeAttribute("data-disable-with");

Upvotes: 0

Related Questions