1

ユーザーが一連のスクリーンショットからビデオのカバー画像を選択できるページを持っているサイトに取り組んでいます。すべての画像がグリッドに表示され、jQuery を追加して、ユーザーが最後にクリックしたビデオが「選択」され、その周りにフレームが表示されるようにしました。

私が助けを必要としているのは、これをデータベースに書き込むことです。私が探しているのは、この選択 を保存する方法だけです。

これは私が今持っているものです。ビデオ コントローラーで:

  def cover_selected
    @video.cover_url = params[:selected_cover]
    @video.save
  end

これは、videos/show.html.erb にあります。

<%= stylesheet_link_tag 'application.css' %> 
<% provide(:movie_url, @h264_encoding.url) %>
<div class="container">
<% if @original_video.status == "success" %>
  <div id="strobemediaplayback">Movie goes here!</div>
  <br/><h2>Select a cover image</h2>
  <% @h264_encoding.screenshots.each_with_index do |screenshot,i| %>
    <% if i%3 == 0 %> 
        <div class="row">
    <% end %>
    <div class="span3" style="margin-bottom:20px"><img class="screenshot" id="<%= i %>" src="<%=  screenshot %>" />
    </div>
    <% if i%3 == 2 %>
        </div>
    <% end %>
  <% end %>
<% end %>
</div>

<script>
  $(document).ready(function(){
    $('div.row img').click(function(e) {
      e.preventDefault();
      $('div.row img.selected').removeClass('selected');
      $(this).addClass('selected');
      $.ajax({
       url: '/videos/cover_selected/',
       data: { selectedCover: this.id },
      });     
    });
  });
</script>

そして、私のビデオ スキーマには以下が含まれます。

  create_table "videos", :force => true do |t|
    t.string    "title"
    t.timestamp "created_at",       :null => false
    t.timestamp "updated_at",       :null => false
    # ... and so on
    t.string    "cover_url"
  end

@video の cover_url 属性を更新するにはどうすればよいですか?

4

2 に答える 2

1

これを行うには、3 つのピースが同時に動作する必要があります--

1) コントローラー内のアクション 2) show.html.erb 内の適切な jQuery、および 3) Rails が受信データを正しいアクションに送信できるようにするためのルート。

コントローラーのアクションは近いものでした。これは機能します。

  def cover_selected
    @video = Video.find(params[:video_id])
    @video.update_attribute(:cover_url, params[:selected_cover])
    respond_to do |format|
      format.all { render :nothing => true, :status => 200 }
    end
  end

jQuery コードは問題ありませんでしたが、ページにアクセスしたときにどの表紙が選択されたかを表示するように更新することもできます。

  $(document).ready(function(){
    var video_id = <%= @video.id %>;
    $('div.row img[id=<%= @video.cover_url || 0 %>]').addClass('selected');
    $('div.row img').click(function(e) {
      e.preventDefault();
      $('div.row img.selected').removeClass('selected');
      $(this).addClass('selected');
      $.ajax({
       url: '/videos/cover_selected/',
       data: { 'selected_cover': this.id,
               'video_id': video_id },
      });     
    });
  });

最後に、Rails 3 では、ルートを追加して、Rails がリクエストを処理する方法を認識できるようにする必要があります。

  get 'videos/cover_selected'

resources :videosRails が id=cover_selected のビデオを検索しないように、これをの行の上に置いてください。

于 2012-06-19T23:24:20.087 に答える
0

サーバーへの非同期呼び出し (AJAX) を使用する必要があります。

$('div.row img').click(function(e) { 
    e.preventDefault();  // FYI - only need this for <a href="" /> elements

    $.ajax({
       url: '/mysite/saveSelectedCover/',
       data: { selectedCover: this.id },
       ...
    });     
});

jQuery の AJAX 関数について知っておく必要があることはすべて、そのドキュメントに記載されています。 http://api.jquery.com/jQuery.ajax/

于 2012-06-16T01:07:21.583 に答える