Search code examples
ruby-on-railsajaxframesetpartials

rails navigation and partial refresh


Thanks for your time!

I get some reports data on my hand and I want to present these data on the web. The view of the HTML will be divided into two parts, the left part and the right part. There's a tree view in the left part consisting of the report names. In the right part presents the contents of the report.

What I want to achieve is when I click the report name on the left part, it will call an Action in the Controller, and passed the report name as parameter. The Action will fetch the data from the database and represent the data in the right part. And now I am stuck on how to realize this kind of view.

I've Googled a lot on the Internet and found Frameset, Partials or Ajax may capable of this. Because I've never developed web applications before and also new to Rails. So can anyone give me some advise or suggestion?

Things I've already known :

  1. I've used Frameset to accomplish a view like this. But I found it needs a lot of .html files and all these .html files are static. And many people don't suggest it at all.

  2. Then I've Googled Partials. But it seems Partials don't call the Action. It directly loads the _partials.html.erb to the main view. And besides, how can I control the layout? Using CSS?

  3. I've never used Ajax.


Solution

  • This is quite an open question so don't take this answer verbatim, but merely as a guide.

    app/views/layouts/reports.html.erb

    <!DOCTYPE html>
    <html itemscope itemtype="http://schema.org/">
    <head>
       # omitted
    </head>
    <body>
    <div id="body-container">
      <div id="left-column">
        <ul id="reports-list">
          <% for report in @reports %>
            <li><%= link_to report.name, report %></li>
          <% end %>
        </ul>
      </div>
      <div id="right-column">
        <%= yield %>
      </div>
    </div>
    </body>
    </html>
    

    app/controllers/reports_controller.rb

    class ReportsController < ApplicationController
    
      before_filter { @reports = Report.all }
    
      def index
    
      end
    
      def show
        @report = Report.find(params[:id])
      end
    
      def edit
        @report = Report.find(params[:id])
      end
    
      def new
        @report = Report.new
      end
    
      def update
       # omitted
      end
    
      def create
       # omitted
      end
    
      def destroy
       @report = Report.find(params[:id])
      end
    end
    

    routes.rb

    YourApp::Application.routes.draw do
      resources :reports
    
      root to: "reports#index"
    end
    

    This would achieve the effect your after using just rails, of course adding ajax could add a better user experience.