Question

Is there functionality in RoR to create dynamic panels within a RoR website? What I am trying to accomplish in the main page is to be able to update a panel with a click of a navigation button instead of loading up an entirely new page.

Located in Pages View

Here I want to load new content in my dynamicLoadingPanel with a button click in the navButton span in my home.html.erb:

<span id="navButton" class="button">Content2</span>
<div id="dynamicLoadingPanel"></div>

The page I want to show in the dynamicLoadingPanel is the _categoryOne.html.erb file also located under the Pages View folder.

Thanks for your help!

Answer 1

Like the other answers said, you will want to use ajax. Rails has some nice ajax integration with jquery now, via the jquery_ujs.js file and gem. You should start by installing this gem and running the generators that the readme mentions: https://github.com/rails/jquery-ujs

There’s 4-5 steps to take: in your view, add a remote link along with a div to receive the returned content. Create a .js.erb file named the same as your controller action, a partial that the .js.erb file renders back to your view, and your controller action to handle the remote call. You may have to add a route that matches the controller#action to your new action.

Then set up your page with a div loading its content from a partial. the partial will get reloaded during the ajax call. This assumes your controller is named sort and your action is album_select.

<div id="panels">
  <div id="dynamicLoadingPanel">
    <%=render :partial=>'album_select'%>
  </div>
  <%=link_to 'link text', :url=>'/sort/album_select/params', :remote=>'true', :id=>'navButton'%>
</div>

Or use jquery and an onclick event for your link:

  $("#navButton").bind('click',function(){
    //post to the controller/action/params
    $.post("/sort/album_select?album=100");
  });

In your controller

 def album_select
      @variables_for_your_view

      respond_to do |format|
        format.js 
      end
 # or use the new respond_with(@variables), and make sure to declare respond_to in your controller after the class definition
 end

In your album_select.js.erb file

$("#dynamicLoadingPanel").html("<%=escape_javascript(render :partial=>"album_select")%>");

maybe throw an alert(‘works!’); in here as well to make sure everything is linking up…I find it hard to debug the jquery in the .js.erb files. Double check quotes, javascript escaping, and other easy to miss javascript errors.

In your partial

<p>info I just returned with new instance variables and fanciness</p>

Helps to have a javascript debugger on hand, and / or tail -f your log file.