如何让阿贾克斯微调展示在特定网页？ [英] How to have Ajax spinner show on specific page?
问题描述
我有问题，显示我的ajax微调。现在，我在我的测试该本地主机：3000 /测试具有以下code：
I'm having issues showing my ajax spinner. Right now I am testing this on my localhost:3000/test with the following code:
我点击一个链接，以获得加载器来显示（Ruby on Rails的code）：
I click a link to get the loader to show (Ruby on Rails code):
<li><%= link_to "New Test", new_test_path, :remote => true %></li>
我有 DIV 装载机应该出现内部：
I have the div the loader should appear inside:
<div id="generate-add-form">
<div class="ajax-loader"></div>
</div>
然后我的功能，使之出现：
Then my functions to make it appear:
jQuery( function($) {
$('#generate-add-form').ajaxStart( function() {
$(this).children('.ajax-loader').show();
});
$('#generate-add-form').ajaxStop( function() {
$(this).children('.ajax-loader').hide();
});
});
最后就是我的CSS（有些东西注释掉，看看它的需要与否）：
Last is my css (some stuff commented out to see if its needed or not):
.ajax-loader {
display: none;
/*position: fixed;*/
z-index: 1000;
/*top: -13em;
left: 6em;*/
background:url('ajax-loader.gif') 50% 50% no-repeat;
}
body.loading {
overflow: hidden;
}
body.loading .ajax-loader {
display: block;
}
为什么当我点击它不显示的链接？
How come when I click the link it doesn't show?
编辑：
<li><%= link_to "Test", new_test_path, :class => "add-link", :remote => true %></li>
<li><%= link_to "Study Guide", new_study_guide_path, :class => "add-link", :remote => true %></li>
$('#generate-add-form').children('.ajax-loader').hide();
$('.add-link').click( function() {
$('#generate-add-form').children('.ajax-loader').show();
});
我先躲了微调，然后点击再次显示。那么在切换到另一条链路？
I hide the spinner first and then show it again on click. What about in between when switching to another link?
推荐答案
好了，首先，你要隐藏的东西，显示您的AJAX装载机。首先，给一个id或独特的类的链接，使您可以针对它：
Ok, so first, you want to hide something and show your ajax loader. First, give an id or an unique class to your link so you can target it:
<%= link_to "New Test", new_test_path, :remote => true, :id => 'you_link_id' %>
然后添加一些JavaScript来处理链接点击：
Then add some javascript to handle the click on the link:
$('#your_link_id').click(function(){
$('#generate-add-form').children('.ajax-loader').show();
$('#id_of_the_stuff_you_want_to_hide').hide();
});
在控制器动作，将要new_test_path回应，在最后补充一点：
In the controller action that will respond to new_test_path, add this at the end:
respond_to do |format|
format.js
end
在这里，你正在你的控制器动作响应您的JavaScript请求（这就是遥控器一样）。你也可以添加的format.html 来为HTML请求作出回应。你可能想这样做，如果你也想成为你的页面给人以禁用JavaScript（1到所有用户的2％）。
Here, you are making your controller action respond to your javascript request (that's what remote does). You could also add format.html to respond to html requests. You'll probably want to do this if you also want serve your page to people with javascript disabled (1 to 2% of all users).
然后，创建视图的名称 your_action.js.erb 。注意JS，而不是通常的HTML。在里面，你就可以隐藏任何你想要你的ajax的微调和表演。你甚至可以呈现在网页中定义的谐音。
Then, create your view with the name your_action.js.erb. Notice the js instead of the usual html. Inside, you can then hide your ajax spinner and show whatever you want. You can even render partials defined in that page.
$('#generate-add-form').children('.ajax-loader').hide();
$('#id_of_the_stuff_you_now_want_to_show').show();
$("#div_containing_your_partial").html('<%= escape_javascript(render 'name_of_your_partial') %>');
如果你想，克隆这个仓库我做了前一段时间，显示只是如何做到这一点。
If you want, clone this repository I made some time ago that shows just how to do this.
最后，当你得到这个工作，你可能会想看看的方式，使显示和隐藏的东西在prettier方式。尝试使用隐藏的淡入，而不是展示和淡出，而不是如。
And finally, when you get this working, you'll probably want to look at ways to make showing and hiding stuff in a prettier way. Try using fadeIn instead of show and fadeOut instead of hide for example.
此外，最后一个细节。在jQuery中，功能没有得到顺序调用。它们都被称为在同一时间。所以，如果你想使一些只出现的在的东西消失，你必须使用回调。这里有一个例子：
Also, one final detail. In jQuery, functions don't get called sequentially. They are all called at the same time. So if you want to make something appear only after something disappears, you have to use of callbacks. Here's an example:
# without a callback, both actions take place at the same time
$("#id").hide();
$("#id2").show();
# with a callback, show will only be called after hide ends
$("#id").hide(function(){
$("#id2").show();
});
编辑：做你想要什么，你必须删除：远程=＆GT;您的链接的真实部分，基本程序是什么的Rails已经为你自动完成。使用这些链接来指导自己：
To do what you want, you have to remove the :remote => true part of your link and basically program what Rails already does automatically for you. Use these links to guide yourself:
的http://www.alfajango.com/blog/rails-3-remote-links-and-forms-data-type-with-jquery/
和那么这可能是你在找什么：
And then this is probably what you're looking for:
但是，这一切相当复杂，特别是对于Railsbeginner：/
But this is all rather complicated, specially for a Railsbeginner :/
这篇关于如何让阿贾克斯微调展示在特定网页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
