link_to 和远程 =>true + jquery:如何?帮助? [英] link_to and remote => true + jquery : How? Help?

问题描述

我试图在我的 rails 网站的索引上建立一个用户"链接，以便它显示注册用户(User.all)但我希望它出现在网站的右侧部分，作为部分，在一个没有从头加载整个页面的 div.

我知道使用旧原型和遥控器可以做到这一点 => 是的但是对于 Rails 3.1 和 jQuery(和资产)，我不知道该怎么做.

谁能帮我或告诉我教程的方法?

解决方案

其实很简单，只是感觉很重要，因为它是新的.基本上，通过新的不显眼的 javascript 支持，rails ujs 脚本公开了一组您可以将 javascript 函数绑定到的事件，它们是:

1. ajax:beforeSend - 在发送之前触发
2. ajax:success - 在发送发生后触发，包含响应
3. ajax:complete - 成功事件后触发
4. ajax:error - 出现错误时触发

您需要做的就是编写一个函数(将其包装在 $document.ready 中)，该函数依次将一些匿名函数绑定到这些事件中的每一个，或者只是您感兴趣的事件.

例如，假设您有一个 div，您想将响应数据放入 id 为response_data"，并且您有一个 id 为ajax_trigger"的链接.像这样:

<%= link_to "My Link", some_model_path(@model_instance),:远程 =>真，:html =>{:id =>ajax_trigger"}%><div id="response_data">

您需要做的就是提供一个类似于下面的函数，以便将来自服务器的响应放入 div:

$(document).ready(功能(){$("a#ajax_trigger").bind("ajax:success",功能(EVT，数据，状态，xhr){//这假设操作返回一个 HTML 片段$("div#response_data").html(data);}).bind("ajax:error", function(evt, data, status, xhr){//对这里的错误做一些事情$("div#errors p").text(data);});});

实际上，您使用 javascript 所做的一切就是在响应从服务器返回时处理响应.你真的不需要做任何特殊的事情来启动 XHR 请求，你也可以安全地将此方法存储在作为静态资产提供的 .js 文件中.如果您使用的是 Rails 3.1，那么您应该将它放在与控制器对应的适当命名的 javascript 文件中.在您的控制器中，您需要确保在 Responds_with() 方法中指定 :layout => false ，这样控制器只返回它呈现的部分或模板，而不是完整的页面.此设置还适用于返回要由客户端执行的 javascript 以及 JSON 的操作，具体取决于您在请求中指定的数据类型.

我发现这篇博文很有帮助:http://www.alfajango.com/blog/rails-3-远程链接和表单/

Im trying to make an "Users" link on the index of my rails website so that it shows the registered users (User.all) BUT i want that to appear on the right part of the website, as a partial, in a div without loading the whole page from the start.

I knew that this was possible with old prototype and remote => true but with Rails 3.1 and jQuery (and assets) i have no idea how to do it.

Can anyone help or show me the way to a tutorial?

解决方案

It is actually quite easy, it just feels like a big deal because it is new. Basically, with the new unobtrusive javascript support, the rails ujs script exposes a set of events you can bind javascript functions to, they are:

1. ajax:beforeSend - fired before the send occurs
2. ajax:success - fired after the send occurs, contains the response
3. ajax:complete - fired after the success event
4. ajax:error - fired when errors are present

all you need to do is write a function (which you wrap in $document.ready) that in turns binds some anonymous functions to each of these events, or just the events you are interest in.

For example, suppose you have a div that you want to put the response data in with an id of "response_data", and you have a link with an id of "ajax_trigger". Something like this:

<%= link_to "My Link", some_model_path(@model_instance), 
                       :remote => true, :html => {:id => "ajax_trigger"} %>
<div id="response_data">
</div>

All you need to do is provide a function like the one below in order to put the response from the server into the div:

$(document).ready(
     function(){
          $("a#ajax_trigger").bind("ajax:success",
                   function(evt, data, status, xhr){
                        //this assumes the action returns an HTML snippet
                        $("div#response_data").html(data);
           }).bind("ajax:error", function(evt, data, status, xhr){
                    //do something with the error here
                    $("div#errors p").text(data);
           });
});

Really, all you are doing with the javascript is handling the response when it comes back from the server. You don't really have to do anything special to initiate the XHR request, and you can also safely store this method away in .js file that gets served up as a static asset. If you are using Rails 3.1, then you should put it in the appropriately named javascript file that corresponds to the controller. In your controller you need to make sure that you specify :layout => false in the responds_with() method, that way the controller just returns the partial or template it renders, rather than a complete page. This setup also works with actions that return javascript to be executed by the client as well as JSON, depending on what data-type you specify on the request.

I found this blog post to be quite helpful: http://www.alfajango.com/blog/rails-3-remote-links-and-forms/

这篇关于link_to 和远程 =>true + jquery:如何?帮助?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！