如何使用jquery click事件的路径助手?

时间:2013-03-07 14:55:55

标签: jquery ruby-on-rails ruby-on-rails-3

我在erb模板中有一个div,点击后我想触发控制器的show动作。

<div class = "box"> 
  Content within the box
</div>

<script>
  $(document).ready(function() {
    $('.box').click(function(){
      $.get(<%=hack_path(h) %>)
    });
  });
</script>

我收到错误'错误的参数数量(0表示1)'。我想知道我是否在正确的轨道/模式上达到了预期的效果,还是应该使用其他技术?

这是实际的模板:

<h1>Hacks</h1>

<% @hack.each do |h| %> 
  <div class = "box">
    <table>
    <h3><%= h.hack_name %></b></h3>
    <%= h.id %>
    <span id = "showhack"> <%= link_to 'Show', hack_path(h) %></span>
    <%= link_to 'Edit', edit_hack_path(h) %>
    <%= link_to 'Destroy', hack_path(h), method: :delete, data: { confirm: 'Are you sure?' } %>
    <%= link_to "Get Data", :controller => :admins, :action => :checkSerials, :method => :get %>

  <% h.serials.each do |s| %>  
    <tr>
      <th>Series Title</th>
      <th>Series Name</th>
      <th>Series Id</th>
      <% s.observations.sort{|a,b| a.id <=> b.id}.last(5).each do |o| %>
        <th><%= o.date %></th>
      <% end %>
    </tr>    
    <tr>
      <td><%= link_to s.title, [h, s] %></td>
      <td><%= s.series_name %></td>
      <td><%= s.id %></td>
    <% s.observations.sort{|a,b| a.id <=> b.id}.last(5).each do |o| %>
    <% if s.units_short == 'Mil. of $' %>
      <td><%= number_to_currency(convertMtoBHack(o.value), :precision => 0) %></td>
    <% else %>
    <td><%= number_to_currency(o.value, :precision => 0) %></td>
  <% end %>
  <% end %>
  </tr>
  <tr>
    <td><%= s.frequency_short %></td>
    <td><%= s.units_short %></td>
  </tr>

<% end %>
</table>
</div>
   
 <script>
 $(document).ready(function() {

   $('.box').click(function(){
   $.get(<%= hack_path(@hack).to_json %>)
   });
  });
 </script>

<div><%= link_to 'New Hack', new_hack_path %></div>

1 个答案:

答案 0 :(得分:1)

你必须逃避字符串。否则它将呈现为$.get(/what/ever/path)当然是错误的。

我建议使用to_json(),它也可以保护您免受其他恶意事件的侵害:

$.get(<%= hack_path(h).to_json %>) 
# renders to $.get("/what/ever/path")

但通常你有多个地方使用相同的处理程序,你最终会使用数据标签将URL添加到标记并使用$.data()读取它们。

<div data-url=<%= hack_path(h).to_json %>> 

并在javascript部分内:

var url = $(target).data("url");

例如,如果您想使'hack'的标题可点击:

<td class="hacktitle" data-url=<%= hack_url(h).to_json %>><%= link_to s.title, [h, s] %></td>

/* somewhere else in javascript */

$("table.hacks").on("click", "td.hacktitle", function(event) {
    var targetTd = $(event.target);
    var url = targetTd.data("url");
    $.get(url);

当您使用HAML(我建议无论如何)时,这一切都更方便

%div{:data => {:url => hack_path()}}
  some content