Question

我正在一个网站上工作，我有一个页面，用户可以从一组屏幕截图中选择视频的封面图片。我已经将图像全部显示在网格中，并且我添加了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属性？

Answer 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的视频。

Answer 2

您需要使用对服务器的异步调用（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/

在Rails3，jQuery和AJAX中更新并将变量保存到数据库（没有表单）

2 个答案: