0

AJAX呼び出しからのJSONデータを使用してURLを作成し、GoogleMapAPIイメージをモーダルに表示しています。これは、jQueryを使用してinnerHTMLを編集していることを意味します。これをする、

画像を表示するには、javascriptを使用して経度と緯度の値を参照し、リンクを作成する必要があります。

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 +")%>"

問題は、image_tag（上に表示）でescape_javascriptも使用しているため、画像が生成されないことです。私のビューは単にを表示します+google_map_url+。

他のescape_javascriptimage_tagは、文字列をコンポーネントに分割する必要がないため、機能します。"<%= escape_javascript(image_tag photo[:url]) %>"

これを回避して、JavaScript変数を使用しながら画像を生成できるようにするにはどうすればよいですか？

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
4

1 に答える 1

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

上記のように書くと以下のように扱われます 

1. "<%= escape_javascript(image_tag "

2.+google_map_url+

 3.  ")%>"

目的の値を取得するには、[ " ] 内を [ ' ] に置き換えます。修正後の構文は次のようになります。

"<%= escape_javascript(image_tag ' +google_map_url+ ')%>"
于 2012-09-26T05:18:52.717 に答える