Update and save a variable to the database in Rails3 , jQuery and AJAX (without a form)

Question

I'm working on a site where I've got a page where a user can choose a cover image for a video, from a set of screenshots. I've got the images all displaying in a grid, and I've added jQuery so that whichever video was last clicked by the user is "selected" and has a frame around it.

What I need help with is writing this to the database. All I'm looking for is a way to save this selection.

This is what I have now. In the videos controller:

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

And this is in the 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>

And my video schema includes:

  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

How do I update the cover_url attribute of @video?

Mark Wilbur · Accepted Answer · 2012-06-19 23:24:20Z

You need 3 pieces working in unison to do this--

1) an action in your controller 2) the appropriate jQuery in your show.html.erb, and 3) a route so that rails can sent the incoming data to the right action.

The action in the controller was close, this will work:

  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

The jQuery code was okay, but it can be updated to also show what cover was selected when you got to the page:

  $(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 },
      });     
    });
  });

And finally, in Rails 3, you need to add a route so that Rails knows what to do with the request!

  get 'videos/cover_selected'

Make sure you put that above the line with resources :videos so that Rails doesn't look for a video with id=cover_selected.

Terry · Accepted Answer · 2012-06-16 01:07:21Z

0

You need to use an asynchronous call to the server (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 },
       ...
    });     
});

Everything you need to know about jQuery's AJAX function can be found in their docs. http://api.jquery.com/jQuery.ajax/

answered Jun 16, 2012 at 1:07

Terry

14.2k9 gold badges58 silver badges84 bronze badges

9 Comments

Mark Wilbur Over a year ago

My problem is more on the rails side than the jQuery side. AFIK, there is no URL on my site that would save this info. I created a cover_selected method inside my videos controller, and what I was trying to do was send a request to that controller, with button_to or link_to action => cover_selected, cover => 'this.id', etc... How would I go about implementing your way on the rails side? I've spent several hours looking at rails ajax docs and they seem focused on forms.

Salil Over a year ago

You don't need an URL to have a jquery event. Terry's example is associating the click event on the video thumbnail with the controller action you have in place.

Mark Wilbur Over a year ago

The question was about how to update and save a variable to the db. I already had jQuery associating a click event that put a highlighted box around each icon. I didn't include that code here because I thought it would distract from the question of communicating with the db

Terry Over a year ago

A controller is a URL. In MVC, it's /controller/action/. Whether or not you are using a form explicitly, any data sent to the server is done through HTTP requests (generally GET or POST) and are sent to a controller action. You need to create a controller action that accepts the data you want to save, does the save and returns a result (even if it's just success/fail).

Terry Over a year ago

And for whoever downvoted my answer, I answered the original question - "...send something like "selected_cover = x" and save that without sending the user to a form or leaving the page." if it's not what he's looking for that's not my fault.

|

Collectives™ on Stack Overflow

Update and save a variable to the database in Rails3 , jQuery and AJAX (without a form)

2 Answers 2

Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related