Question

I am using JSON data from an AJAX call to build a url and display the Google Map API image on a modal. This means that I am editing the innerHTML using jQuery. To do this,

To show the image, I have to use javascript to reference the longitude and latitude values and build the link.

var google_map_url = 'http://maps.googleapis.com/maps/api/staticmap?center=' + data.location.latitude + ',' + data.location.longitude + '&zoom=14&size=400x300&sensor=false';

"<%= escape_javascript(image_tag " +google_map_url+ ")%>"

The problem is that I am also using escape_javascript with my image_tag (shown above) and this does not generate a picture. My view simply displays +google_map_url+.

The other escape_javascript image_tag works because I don’t have to break up the string into components: "<%= escape_javascript(image_tag photo[:url]) %>"

How can I work around this so that I can still generate my image while using javascript variables?

index.html.erb

<div class="body_container">

    <div id="photos_container">
    <% @photos_array.each do |photo| %>

      <%= link_to '#' do %>
        <div class='each_photo_container', id='<%="#{photo[:id]}"%>' >
          <%= image_tag photo[:s_url] %>
        </div>
      <% end %>


    <!-- Load Modal onClick -->
    <script type="text/javascript">
    jQuery(function() {
      $('#<%=photo[:id]%>').click(function (e) {

        //ajax call to fetch photo info

        var fetch_id = '<%=photo[:id]%>';
        var fetch_secret = '<%=photo[:secret]%>';  

        $.ajax({
          type: 'GET',
          url: '/photos/fetch_info',
          dataType: 'json',
          data: { 'id' : fetch_id, 'secret' : fetch_secret },
          success: function(data){

               var google_map_url = 'http://maps.googleapis.com/maps/api/staticmap?center=' + data.location.latitude + ',' + data.location.longitude + '&zoom=14&size=400x300&sensor=false';          

            //edit innerHTML of basic_modal
            $('.basic_modal').html(

              "<div id='googlemap_image'>"+
                "<%= escape_javascript(image_tag " +google_map_url+ ")%>"+
              "</div>" +

              "<div id='modal_image'>"+
                "<%= escape_javascript(image_tag photo[:url]) %>"+
              "</div>"+

              "<div id='modal_photo_info_container'>"+
                 "<div class='modal_photo_attr'>"
                    +data.title+ 
                 "</div>"+ 
                 "<div class='modal_photo_attr'>"+
                    "By: " +data.owner.username+ 
                 "</div>"+ 
                 "<div class='modal_photo_attr'>"
                    +data.location.region._content+ ", " +data.location.country._content+ 
                 "</div>"+
              "</div>"


             );

            //load modal
        $('.basic_modal').modal({
              overlayClose:true
            });

          } //end success: function(result)
        });


        return false;
      });
    });

    </script>


    <% end %>

    <div class="basic_modal">
    </div>

  </div>
</div>

photos_controller.rb

def fetch_info
  @info = flickr.photos.getInfo(:photo_id => params[:id], :secret=> params[:secret])

  respond_to do |format|
    format.json { render :json => @info }
  end
end

Answer 1

"<%= escape_javascript(image_tag " +google_map_url+ ")%>"

If you write like above one, it will be treated as following

1. "<%= escape_javascript(image_tag "

2.+google_map_url+

 3.  ")%>"

To get desired value, replace inside [ ” ] with [ ‘ ], corrected syntax should be look like

"<%= escape_javascript(image_tag ' +google_map_url+ ')%>"