how do I query a JSON value and include it in a rails helper within javascript?

Question

How can I feed in a json value into a rails helper (for deleting a location).

So an excerpt of my script is this, and what I'm really working with is the last line.

var popupContent = '<div class="popup">' +'<img src="' + feature.properties.image.image.url + '">' +
              '<p style="font-size:94%">' + feature.properties.user_id + ' posted: ' +
               '<p>' + feature.properties.title + '</p>' +
               '<p><span class="timeago" title="'+feature.properties.created_at+'"></span>'+'</p><p><a href="/locations/'+feature.properties.name+'/edit">Edit</a> | ' +
               '<%= link_to "Destroy", @location, method: :delete, data: { confirm: "Are you sure?" } %>';

One approach I tried is to change @location to "location/'+feature.properties.name+'" the HTTP request doesn't add the JSON value to the rails helper. So then rails has no idea what Location I am trying to delete.

Per request, here is the full javascript:

    function load(geojson) {
      // Fetch just the contents of a .geojson file from ... by passing
      // `......` to the Accept header
      // As with any other AJAX request, this technique is subject to the Same Origin Policy:
      // http://en.wikipedia.org/wiki/Same_origin_policy the server delivering the request should support CORS.
      $.ajax({
        headers: {
          'Accept': 'localhost'
        },
        dataType: 'json',
        url: '/locations.json',
        success: function(geojson) {

          // setting URL for json call below.
            // var url = '/locations.json';
          // initializing map, dark theme, and view.

            var map = L.mapbox.map('map', 'examples.map-y7l23tes')
                .addControl(L.mapbox.geocoderControl('examples.map-y7l23tes'))
                .setView([40.7178591652903, -73.985538482666], 12);
                L.control.locate({
                      position: 'topleft',  // set the location of the control
                      drawCircle: true,  // controls whether a circle is drawn that shows the uncertainty about the location
                      follow: false,  // follow the user's location
                      setView: true, // automatically sets the map view to the user's location, enabled if `follow` is true
                      keepCurrentZoomLevel: false, // keep the current map zoom level when displaying the user's location. (if `false`, use maxZoom)
                      stopFollowingOnDrag: false, // stop following when the map is dragged if `follow` is true (deprecated, see below)
                      circleStyle: {radius: 0, weight:3, color: '#ee0', fill: false, opacity:0.25},  // change the style of the circle around the user's location
                      markerStyle: {},
                      followCircleStyle: {},  // set difference for the style of the circle around the user's location while following
                      followMarkerStyle: {},
                      icon: 'icon-location',  // `icon-locate` or `icon-direction`
                      iconLoading: 'icon-spinner  animate-spin',  // class for loading icon
                      circlePadding: [0, 0], // padding around accuracy circle, value is passed to setBounds
                      metric: true,  // use metric or imperial units
                      onLocationError: function(err) {alert(err.message)},  // define an error callback function
                      onLocationOutsideMapBounds:  function(context) { // called when outside map boundaries
                              alert(context.options.strings.outsideMapBoundsMsg);
                      },
                      strings: {
                          title: "",  // title of the locate control
                          popup: "Hello! Seems like you're here.",  // text to appear if user clicks on circle
                          outsideMapBoundsMsg: "You seem located outside the boundaries of the map" // default message for onLocationOutsideMapBounds
                      },
                      locateOptions: {maxZoom: 17}  // define location options e.g enableHighAccuracy: true or maxZoom: 10
                  }).addTo(map);


          // center on tooltip click.
            map.featureLayer.on('click', function(e) {
                map.panTo(e.layer.getLatLng());
            });


          // adding a new marker
            var new_event_marker;
            map.on('click', function(e) {
             if(typeof(new_event_marker)==='undefined')
                {new_event_marker = new L.marker(e.latlng,{ draggable: false});
                new_event_marker.addTo(map)
                .bindPopup('<%= form_for @location, :html => {:multipart => true} do |f| %><% if @location.errors.any? %><div id="error_explanation"><h2><%= pluralize(@location.errors.count, "error") %> prohibited this location from being saved:</h2><ul><% @location.errors.full_messages.each do |msg| %><li><%= msg %></li><% end %></ul></div><% end %><h1>Post it!</h1><p>Click a spot on the map to tag your location.</p><div class="field hide"><%= f.label :latitude %><br><%= f.text_field :latitude, :id => "latitude" %></div><div class="field hide"><%= f.label :longitude %><br><%= f.text_field :longitude, :id => "longitude" %></div><div class="field"><%= f.text_field :title, autofocus: true, placeholder: "Whats going on?" %></div><div class="field"><br><%= f.file_field :image %></div><div class="actions"><%= f.submit "POST" %></div><% end %>').openPopup();   
                window[e.type].innerHTML = e.containerPoint.toString() + ', ' + e.latlng.lng.toString()+ '' + e.latlng.lat.toString();

              latitude.value = e.latlng.lat.toString();
              longitude.value = e.latlng.lng.toString();

              var click = document.getElementById('click'); 
             } else {
              new_event_marker.setLatLng(e.latlng).openPopup();
              window[e.type].innerHTML = e.containerPoint.toString() + ', ' + e.latlng.lng.toString()+ '' + e.latlng.lat.toString();

              latitude.value = e.latlng.lat.toString();
              longitude.value = e.latlng.lng.toString();

              var click = document.getElementById('click'); 
             }
             });


          // for clickable coords //

          $('#map').on('click', '', function() {

              var latitude = document.getElementById('latitude');
              var longitude = document.getElementById('longitude');

              map.on('click', function(e) {
              window[e.type].innerHTML = e.containerPoint.toString() + ', ' + e.latlng.lng.toString()+ '' + e.latlng.lat.toString();

              latitude.value = e.latlng.lat.toString();
              longitude.value = e.latlng.lng.toString();

              var click = document.getElementById('click'); });

});
            // On success add fetched data to the map.
            L.mapbox.featureLayer(geojson).addTo(map);

            // Add custom popups to each using our custom feature properties
            map.featureLayer.on('layeradd', function(e) {

                var marker = e.layer,
                    feature = marker.feature;
                // Create custom popup content
                var popupContent = '<div class="popup">' +'<img src="' + feature.properties.image.image.url + '">' +
              '<p style="font-size:94%">' + feature.properties.user_id + ' posted: ' +
               '<p>' + feature.properties.title + '</p>' +
               '<p><span class="timeago" title="'+feature.properties.created_at+'"></span>'+'</p><p><a href="/locations/'+feature.properties.name+'/edit">Edit</a> | ' +
               '<%= link_to "Destroy", @location, method: :delete, data: { confirm: "Are you sure?" } %>';

                // http://leafletjs.com/reference.html#popup
                return marker.bindPopup(popupContent,{
                    closeButton: false,
                    minWidth: 320
                }); 
            });

                // hover to see tooltip
                map.featureLayer.setGeoJSON(geojson);
                  // map.featureLayer.on('mouseover', function(e) {
                  //     e.layer.openPopup();
                  // });
                  // map.featureLayer.on('mouseout', function(e) {
                  //     e.layer.closePopup();
                  // });


                  // setting up timeline view.
                  var info = document.getElementById('info');

                  // Iterate through each feature layer item, build a
                  // marker menu item and enable a click event that pans to + opens
                  // a marker that's associated to the marker item.
                  map.featureLayer.eachLayer(function(marker) {
                    var link = info.appendChild(document.createElement('a'));
                    link.className = 'item';
                    link.href = '#';

                    // Populate content from each markers object.
                    link.innerHTML = '<img src="' + marker.feature.properties.image.image.url + '" style="width:50px; height:auto;">'+ marker.feature.properties.title +
                      '<br /><small>' + marker.feature.properties.user_id + '</small>';
                    link.onclick = function() {
                      if (/active/.test(this.className)) {
                        this.className = this.className.replace(/active/, '').replace(/\s\s*$/, '');
                      } else {
                        var siblings = info.getElementsByTagName('a');
                        for (var i = 0; i < siblings.length; i++) {
                          siblings[i].className = siblings[i].className
                            .replace(/active/, '').replace(/\s\s*$/, '');
                        };
                        this.className += ' active';

                        // When a menu item is clicked, animate the map to center
                        // its associated marker and open its popup.
                        map.panTo(marker.getLatLng());
                        marker.openPopup();
                      }
                      return false;
                    };
                  });


        }
      });
    }
    $(load);

Answer 1

Does this help?

Inside html.erb

<script type="text/javascript">
 var location=<%= @location %> 
</script>

Inside .js

var popupContent = '<div class="popup">' +'<img src="' + feature.properties.image.image.url + '">' +
              '<p style="font-size:94%">' + feature.properties.user_id + ' posted: ' +
               '<p>' + feature.properties.title + '</p>' +
               '<p><span class="timeago" title="'+feature.properties.created_at+'"></span>'+'</p><p><a href="/locations/'+feature.properties.name+'/edit">Edit</a> | ' +
               '<%= link_to "Destroy", location, method: :delete, data: { confirm: "Are you sure?" } %>';