Home/ Questions/Q 5997761
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T00:18:36+00:00

I am trying to use the tabs function from jQuery UI in a Rails

  • 0

I am trying to use the tabs function from jQuery UI in a Rails app. I am using a helper for the navigation and I would like to keep it that way. The code in my helper is:

def links_for_navigation
  html = ""
  html  = <<HTML
   <ul>
     <li><a href="#tabs-1">Courses</a></li>
     <li><a href="#tabs-2">Parts</a></li>
     <li><a href="#tabs-3">Categories</a></li>
   </ul>    
  <div id="tabs-1"><% link_to "Courses", courses_path %>
  <div id="tabs-2"><% link_to "Parts", parts_path %>
  <div id="tabs-3"><% link_to "Categories", categories_path %>
  HTML
end

My view pulls in the code with <% links_for_navigation %>

I added to my application.js:

jQuery(function() {
 jQuery("#tabs").tabs();
});

And my application.html.erb has:

<%= stylesheet_link_tag 'courses', 'jquery-ui-1.8.13.custom.css' %>
<%= javascript_include_tag :defaults %>
<%= javascript_include_tag 'jquery-1.5.1.min.js', 'jquery-ui-1.8.13.custom.min.js', 'application' %>

When I try to load the page I get cannot find string HTML before EOF. What am I doing wrong?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I recommend using a partial, rather than a helper method. The partial, I’ll call it _nav.html.erb, would look like the following (note the id="tabs" on the surrounding div):

    <div id="tabs">
    <ul>
        <li>
            <a href="#tabs-1">Courses</a>
        </li>
        <li>
            <a href="#tabs-2">Parts</a>
        </li>
        <li>
            <a href="#tabs-3">Categories</a>
        </li>
    </ul>

    <div id="tabs-1">
        <%= link_to "Courses", courses_path %>
    </div>
    <div id="tabs-2">
        <%= link_to "Parts", parts_path %>
    </div>
    <div id="tabs-3">
        <%= link_to "Categories", categories_path %>
    </div>
</div>

    Then in the appropriate view file, you can insert the partial with a call to render:

    <%= render :partial => 'nav' %>

    I’ve never used jQuery tabs but try adding this to application.js, based on this example. The "#tabs" selector inside $() corresponds to the id="tabs" from above:

    $(function() {
    $( "#tabs" ).tabs();
});

    I’ll offer a couple tips/reminders as well:

    • Embedded ruby (ERB) tags needs to have an = if you want them to print something, i.e. <%= @user.name %> versus <% @user.name %>. The first will output a string into the file, the second will not. There are cases where you might not want to print something, so you would leave off the =.
    • Be sure to close all your HTML tags. Rails’ ERB files can get messy anyways, so proper HTML structure is key.
    • Avoid using HTML outside of *.html.erb files. This isn’t a golden rule, but it’s a good rule of thumb.
    • 0