Question

I have been working with Rails for a little while now. I got some stuff figured out, but I am struggling with this. I have an array of blog posts, rendered with just their title. In the controller the object looks simply like:

@articles

On my main page I render it through a partial and display just the title.

<%= render 'shared/article_view', :collection => @articles %>

This gives me a list of articles on the main page. When I click on the title I would like to open it up in a separate div. I have this working with a form. However, I’m not sure how to pass a parameter to the javascript that is getting called. I’m assuming I could pass the id to my view_article.js.erb file and could from there call

@article = Article.find_by_id(id)

and then

<p><%= @article.text %></p>

However, I have no idea how to pass any sort of parameter to this file. It may not even work and I could be entirely wrong in doing this. As I said, still learning. Anyway, thanks for the help!

Answer 1

My syntax might be a little off, but here’s how I would go about it:

HTML

 <div data-id="<%= @article.id %>" class="article"><%= @article.title %></div>

JS

This might help explain how your js would work: http://guides.rubyonrails.org/asset_pipeline.html. What I usually do is create an object that contains all my bindings (and other methods) for a particular view. Then in the view, somewhere at the bottom, I’ll create an instance of the object in a document ready block and bind up the DOM. All your js will be added by the manifest file (application.js) wherever you include it in your layout.

app/assets/javascripts/users.js

// Wraps your binding in a document ready function
// Runs as soon as the DOM is loaded
$(function() {
  $('.article').on('click', function() {
    var id = $(this).attr('data-id');
    $.get('articles/' + id, function(data) {
      // Handle the result
      $('.article-window').html(data);
    });
  });
});

app/assets/javascripts/application.js

  // This directive will include all your js files in the javascripts folder
  //= jquery
  //= require_tree .

app/views/layouts/application.html.erb (or wherever your layout is)

  // This adds all your js to the page
  <%= javascript_include_tag "application" %>

Rails Controller

class ArticlesController < ApplicationController
  respond_to :html, :json
  def show
    @article = Article.find(params[:id]
    respond_with do |format|
      format.json { render :json => @article }
    end
  end
end