how to use jQuery in Rails helper_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-11 19:51 出处：网络

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:

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' %>开发者_JAVA百科

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

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.