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

问题描述

我试图在我的rails网站的索引上建立一个用户"链接，以便它显示已注册的用户(User.all)，但是我希望该链接显示在网站的右侧，部分一个div而不从一开始就加载整个页面.

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.

我知道这可以通过旧的原型和远程=> true来实现 但是使用Rails 3.1和jQuery(以及资产)时，我不知道该怎么做.

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?

推荐答案

实际上很容易，因为它是新的，所以感觉很重要.基本上，有了新的不引人注目的javascript支持，rails ujs脚本公开了可以绑定javascript函数的一组事件，它们是:

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-在发送之前触发
2. ajax:success-发送后触发，包含响应
3. ajax:complete-成功事件发生后触发
4. ajax:error-出现错误时触发

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

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.

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

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>

您需要做的就是提供类似下面的功能，以便将服务器的响应放入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);
           });
});

确实，您使用javascript所做的所有工作都是在从服务器返回响应时对其进行处理.您实际上不必执行任何特殊操作即可发起XHR请求，并且还可以安全地将此方法存储在.js文件中，该文件被用作静态资产.如果使用的是Rails 3.1，则应将其放在与控制器相对应的适当命名的javascript文件中.在您的控制器中，您需要确保在responss_with()方法中指定:layout => false，这样，控制器将仅返回其呈现的部分或模板，而不是完整的页面.此设置还可与返回要由客户端执行的javascript以及JSON的操作一起使用，具体取决于您在请求中指定的数据类型.

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.

我发现此博客文章非常有帮助: http://www.alfajango.com/blog/rails- 3-远程链接和表格/

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

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