link_to 和 remote => true + jquery:如何?帮助?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7052650/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
link_to and remote => true + jquery : How? Help?
提问by Filippos
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.
我试图在我的 rails 网站的索引上创建一个“用户”链接,以便它显示注册用户(User.all)但我希望它出现在网站的右侧部分,作为部分,在没有从头加载整个页面。
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.
我知道这可以通过旧原型和远程 => true 实现,但是对于 Rails 3.1 和 jQuery(和资产),我不知道该怎么做。
Can anyone help or show me the way to a tutorial?
任何人都可以帮助或向我展示教程的方式吗?
回答by Robert C Whitener III
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:
这实际上很容易,只是感觉很重要,因为它是新的。基本上,通过新的不显眼的 javascript 支持,rails ujs 脚本公开了一组您可以将 javascript 函数绑定到的事件,它们是:
- ajax:beforeSend - fired before the send occurs
- ajax:success - fired after the send occurs, contains the response
- ajax:complete - fired after the success event
- ajax:error - fired when errors are present
- ajax:beforeSend - 在发送发生之前触发
- ajax:success - 发送发生后触发,包含响应
- ajax:complete - 成功事件后触发
- ajax:error - 出现错误时触发
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.
您需要做的就是编写一个函数(您将其包装在 $document.ready 中),该函数依次将一些匿名函数绑定到这些事件中的每一个,或者只是您感兴趣的事件。
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:
例如,假设您有一个 div,您想将响应数据放入 id 为“response_data”,并且您有一个 id 为“ajax_trigger”的链接。像这样的东西:
<%= 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:
您需要做的就是提供一个类似于下面的函数,以便将来自服务器的响应放入 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.
真的,当它从服务器返回时,您使用 javascript 所做的一切就是处理响应。你真的不需要做任何特殊的事情来启动 XHR 请求,你也可以安全地将此方法存储在作为静态资产提供的 .js 文件中。如果您使用的是 Rails 3.1,那么您应该将它放在与控制器对应的适当命名的 javascript 文件中。在您的控制器中,您需要确保在 Responds_with() 方法中指定 :layout => false ,这样控制器只返回它呈现的部分或模板,而不是完整的页面。此设置还适用于返回要由客户端执行的 javascript 以及 JSON 的操作,具体取决于您在请求中指定的数据类型。
I found this blog post to be quite helpful: http://www.alfajango.com/blog/rails-3-remote-links-and-forms/
我发现这篇博文很有帮助:http: //www.alfajango.com/blog/rails-3-remote-links-and-forms/
回答by lbz
Here is a list of useful resources:
以下是有用资源的列表: