Rails 3 / Ajax - 将 link_to 转换为 Jquery 链接答案

【问题标题】：Rails 3 / Ajax - Turning link_to into a Jquery linkRails 3 / Ajax - 将 link_to 转换为 Jquery 链接
【发布时间】：2011-07-26 20:10:19
【问题描述】：

我正在尝试将超链接更改为 ajax 链接。这样我就可以在更新模型数据的同时链接到外部目标，而无需将用户发送到自定义控制器操作来处理发布/重定向。

我的应用程序是一个基本的图片库，每张图片都链接到一个外部网站：

这是我的部分 _pictures.html.erb：

<% @galleries.each do |g| %>
    <% for image in g.images %>
    <div id="picture">
      <%= render 'top_nav'%>

      <%= link_to g.source, :target => true do %>
        <%= image_tag image.file_url(:preview) %>
      <% end %>

      <%= will_paginate(@galleries, :next_label => "Forward", :previous_label => "Previous") %>
    </div>

    <br />

    <div class="image_description">
      <h2>
      <%= g.title %>,
      <span class="time">
        <%= distance_of_time_in_words(g.created_at, Time.now, include_seconds = false)%> ago
      </span>
      </h2>
    </div>      
    <% end %>
<% end %>

在我的 index.html.erb 上呈现：

<h1>Share and click images to unlock more...</h1>

<div id="galleries">
<%= render 'pictures' %>
</div>

我相信我已经能够在 application.js 中将链接更改为 ajax 链接：

$(function() {
  $("#picture a").live("click", function() {

    return false;
  });
});

由于 link_to 不起作用（这是我所期望的）。现在，我正在尝试在 index.js.erb 中编写处理程序（不确定这是否是正确的词），我知道这是错误的，但我拼凑起来的是：

$("#picture").html.("<%= escape_javascript(render)("pictures")) %>")

如何通过 javascript 使此链接恢复工作？如果我想对模型方法进行 ajax 调用，我应该从哪里开始编写该代码，在 application.js 或 index.js.erb 中？

强制防御机制：我很擅长 javascript。

【问题讨论】：

标签： jquery ruby-on-rails ajax ruby-on-rails-3

【解决方案1】：

$(function() {
    $("#picture a").live("click", function(event) {
        event.preventDefault(); // prevent the click from linking anywhere

        $.ajax({
            url:'/my_ajax_file.erb',
            dataType:'html',
            data: $(this).attr('id'), // send whatever here...
            type: 'post',
            success:function(data){
                $('#picture').html(data);
            }
        });

    });
});

【讨论】：

【解决方案2】：

试试$("#picture").html("<%= escape_javascript(render("pictures")) %>");

但是如果你使用原型和 jquery 改变 $ 为 jQuery.noConflict()

  $(function() {
      $("#picture a").live("click", function() {
          $.getScript(this.href);
          return false;
      });
  });

【讨论】：

感谢大家的帮助。使用这个，我似乎拥有成功的 ajax 链接，因为我的分页链接不再更改 URL 并且正在工作。外部链接虽然什么都不做，有什么想法吗？

【解决方案3】：

别忘了在你的控制器里有这样的东西：

respond_to do |format|
   format.html do
      redirect_to #whatever you normally redirect to for html
   end
   format.js do
      render :json => some_json_thing #this will get passed back as the data element in the ajax callback above
   end
end

【讨论】：