1

我正在一个网站上工作，我有一个页面，用户可以从一组屏幕截图中选择视频的封面图片。我已经将图像全部显示在一个网格中，并且我添加了 jQuery，以便用户最后点击的任何视频都被“选中”并在其周围有一个框架。

我需要帮助的是将其写入数据库。我正在寻找的只是一种保存此选择的方法。

这就是我现在所拥有的。在视频控制器中：

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

这是在视频/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 :videos这样 Rails 就不会查找 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 回答