Rails Tabbed View using Javascript

Question

I'm trying to use tabifier in my rails app so I have:

<%= stylesheet_link_tag "example", "example-print" %>
<%= javascript_include_tag 'tabber.js' %>

<script>

/* Optional: Temporarily hide the "tabber" class so it does not "flash"
   on the page as plain HTML. After tabber runs, the class is changed
   to "tabberlive" and it will appear. */

document.write('tabber{display:none;}');
</script>

<div class="tabber">

     <div class="tabbertab">
    <h2>Tab 1</h2>
    <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put }) do |f| %>
      <%= devise_error_messages! %>
      <div><%= f.label :peeruser %><br />
      <%= f.select :peeruser, [['Not yet','not yet'],['Beginner','beginner'],['Intermediate','intermediate'],['Expert','expert']] %></div>

      <div><%= f.label :discipline %><br />
      <%= f.text_field :discipline %></div>

      <div><%= f.label :course %><br />
      <%= f.text_field :course %></div>

      <div><%= f.label :concept %><br />
      <%= f.select :concept, [['Yes','yes'],['No','no']] %></div>

      <div><%= f.submit "Continue" %></div>
    <% end %>
     </div>


     <div class="tabbertab">
    <h2>Tab 2</h2>
    <p>Tab 2 content.</p>
     </div>


     <div class="tabbertab">
    <h2>Tab 3</h2>
    <p>Tab 3 content.</p>
     </div>

</div>

<%= link_to "Back", :back %>

And I can't figure out why it's not loading correctly like the examples:

http://www.barelyfitz.com/projects/tabber/

I put the javascript if under public->javascripts and the css under public->stylesheets - like it just shows the text, none of it is linkable and it displays all the form information.

m_x · Accepted Answer · 2011-11-09 20:52:11Z

1

not exactly a solution, but why not use a more popular and feature-rich library ?

JqueryUI features a nice and simple way to implement tabs. Once the lib is loaded, all you will have to do is

<script>
$(function() {
    $( ".tabber" ).tabs();
});
</script>

then add some links, reclass all your divs and bam ! instant tabs. Plus, you have all the Jquery Lib, which is pure awesomeness.

answered Nov 9, 2011 at 20:52

m_x

12.6k7 gold badges49 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

eWizardII · Accepted Answer · 2011-11-12 04:09:35Z

0

Turns out I had not put the css and js in the assets folder which was causing the problem.

answered Nov 12, 2011 at 4:09

eWizardII

1,9464 gold badges34 silver badges56 bronze badges

Collectives™ on Stack Overflow

Rails Tabbed View using Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related