Geek asks and answers

How to use jQuery in the Rails helper

I am trying to use the tabs function from jQuery UI in a Rails application. I use a helper for navigation, and I would like to save it that way. Code in my assistant:

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 inserts code using <% links_for_navigation %>

I added to my application.js:

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

And mine application.html.erbhas:

<%= 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 a page, I get cannot find string HTML before EOF. What am I doing wrong?

+3
source share
1 answer

I recommend using an incomplete rather than an auxiliary method. Partial, I will name it _nav.html.erb, will look like this (pay attention to id="tabs"the environment 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>

render:

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

jQuery, application.js, . "#tabs" $() id="tabs" :

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

/:

  • (ERB) =, , - , .. <%= @user.name %> <% @user.name %>. , - . , , , - , =.
  • HTML. Rails ERB , HTML .
  • HTML *.html.erb. , .
+4

More articles:


All Articles