0

繰り返してインデックスページに表示している写真のセットがあります。各画像をクリックすると、モーダルがポップアップし、画像のより大きなバージョンが表示されるはずです。jQueryを使用してモーダルのinnerHTMLを変更しようとしています。

問題は、写真変数を渡そうとすると、が得られることundefined local variable or method 'photo'です。インデックスページがまったく読み込まれません。

photos.js

jQuery(function () {
  $('.photo_container').click(function (e) {
    $('#basic_modal').html("<p><%= image_tag modal_url(photo), :class=>'modal_image' %></p>");
    return false;
  });

  $('.photo_container').click(function (e) {
    $('#basic_modal').modal({
      overlayClose:true
    });
  return false;
  });
});

エラーは、.photo_containerがクリックされたときにいくつかのrailsコードを渡そうとする上記の最初の関数で発生します。

index.html.erb

<% @photos.each do |photo| %>


  <%= link_to '#', :class => 'basic' do %>
    <div class="photo_container">
      <%= image_tag flickr_url(photo) %>
    </div>
  <% end %>

  <div id="basic_modal">
  </div>

<% end %>

コントローラ

class PhotosController < ApplicationController

  def index
    if params[:search].empty?
      redirect_to root_path
    else
      @title = params[:search]
      @photos = flickr.photos.search(:tags => params[:search], :has_geo => 1)
    end
  end
end

写真パラメータを渡す方法についての手がかりはありますか？

4

1 に答える 1

0

image_tagモーダル URL を erb に入れるだけです。コンテンツを動的に追加する必要はありません。basic_modal基本的なCSSでdivを非表示にすることができます。次に、javascript 関数の最初の部分を取り除くことができます。

また、その JavaScript コードはphotos.js、アプリケーション レイアウトではなく にある必要があります。

編集

erb は次のようになります。

<% @photos.each do |photo| %>

  <%= link_to '#', :class => 'basic' do %>
    <div class="photo_container">
      <%= image_tag flickr_url(photo) %>
    </div>
  <% end %>

  <div class="basic_modal">
    <%= image_tag modal_url(photo), :class=>'modal_image' %>
  </div>

<% end %>
于 2012-09-23T03:54:11.410 に答える