How can I load a div in rails in response to clicks on another div?

Question

I'm very new to Rails (and web) programming, so I'm not even sure what technology I should be looking for for this.

I've downloaded and run through the first five chapters of the Rails tutorial , but now have a very simple request.

On the left hand side of a web page, I will have a table. If the user clicks on an element in that table, I want to have the right hand side of the page show something new.

I already have a page to display the table, viz:

<div class="center hero-unit">
   <div class="container">
   <h2>2012 Yearly Report</h2>
     <div class="row-fluid">
       <div class="span12">
           <div class="span4">
            <table border="1">
            </table>
           </div>
           <div class="span6">
                <!-- load stuff here based on what someone clicks on in the table -->
           </div>
         </div>
      </div>
   </div>
</div>

And I'm using bootstrap layouts to display everything. I just don't understand how to change the contents of the 'span6' div based on user behavior in 'span4'.

Answer 1

This is a difficult question to answer. It really depends on what kind of data you're trying to display and what sort of interactivity you're looking for.

You don't really provide much information about what you're trying to accomplish, but if I had to guess, you're trying to load data from your database and insert it into an element without leaving the current page. This is what AJAX is for (your tutorial goes into it a bit in chapter 11) and involves a good deal of javascript, which is generally beyond the scope of a server side language like Ruby. Luckily, rails includes helpers for making it easy to include AJAX features into your web application without having to write a lot of javascript (although you'll have to write some).

As an example, suppose your table has a list of articles, and you want to display the contents of an article in a div when its link is clicked on.

First the link:

<%= link_to article.name, article_url(article), :remote => true %>

The remote option tells Rails that it's an AJAX link.

Next, you need to render a javascript template for your article's show action. You'll name it show.js.erb.

Supposing the div you want the data to be loaded into looks like this,

<div id='article-content'></div>

you'll want your show.js.erb to contain the following:

$('#article-content').html("<%=javascript_escape @article.content %>");

This javascript (with embedded ruby) code will be evaluated when one of your remote links is clicked and will replace the content of your div with the article's content.

There is plenty of resources online to give you more information. It looks like railscasts just released an episode on this topic just a week ago. It requires a subscription to view, but is well worth it (especially if you're just starting out).