我有一个Ruby on Rails应用程序,带有一些jquery来异步渲染部分。首先,我想更改为选项卡的活动状态,然后清除选项卡页面,然后加载部分:
$('#availability').addClass('active');
$('#overview').removeClass('active');
$('#availabilityTab').addClass('active').addClass('in');
$('#overviewTab').removeClass('active').removeClass('in');
$("#availabilityTab").html("<%= escape_javascript(render(partial: 'availability')) %>");
这很好用,但是当我点击标签来触发它时,我希望首先看到一个空白的标签页和加载的数据。发生的事情是,当单击选项卡时,似乎没有任何事情发生,然后在3秒后,部分显示出来。这是因为数据库调用需要一段时间(需要优化:-))。这对用户来说很困惑,我宁愿首先看到一个空的标签页。我怎么能这样做?
更新:这是控制器操作的样子:
def index
@customers = Customer.order(:name)
@target = params[:target] unless params[:target].blank?
respond_to do |format|
format.html
format.js
end
end
这是index.js.erb
:
<% if @target == "overview" -%>
$('#availability').removeClass('active');
$('#overview').addClass('active');
$('#overviewTab').addClass('active').addClass('in');
$('#availabilityTab').removeClass('active').removeClass('in');
$("#overviewTab").empty().html("<%= escape_javascript(render(partial: 'overview')) %>");
<% elsif @target == "availability" -%>
$('#availability').addClass('active');
$('#overview').removeClass('active');
$('#availabilityTab').addClass('active').addClass('in');
$('#overviewTab').removeClass('active').removeClass('in');
$("#availabilityTab").html("<%= escape_javascript(render(partial: 'availability')) %>");
<% end %>
答案 0 :(得分:0)
在我看来,你在Ajax中使用async: false
(这会冻结浏览器直到请求完成)
即使不是这种情况,您的效果也会依赖于您的数据库调用,这就是您遇到延迟的原因。要解决此问题,您需要重新配置系统以使围绕 Ajax工作,或者您需要尽可能自然地触发您的影响(在处理db调用后的后端中的IE)
以下是两种观察方式:
Ajax回调
wait for a jquery ajax callback from calling function
我们成功使用Ajax Callbacks在我们的一个生产应用程序中加载部分内容,以下是我们的工作方式:
//app/assets/application.js
$(".your_element").on("click", function() {
fetch_modal("link", function(data){
//success
, function(data) {
//error
});
});
//Ajax
function fetch_modal(link, success, error) {
$.ajax({
url: link,
success: function(data) { success(data); },
error: function(data) { error(data); }
});
}
这不会冻结浏览器,并且可以同步工作
我有一个脚本,如果你想要链接,可以使用这种技术通过Ajax调用partials。我一直想发布它
处理之后数据库调用
如果您在事件发生后调用JS而不是结果
,则会看到这些问题的一个原因为了解决这个问题,我会在JS处理完之后看一下“效果”代码,如下所示:
#app/controllers/example_controller.rb
def example
@example = Example.find(1)
respond_to do |format|
format.html { redirect_to root_path }
format.js
end
end
#app/views/example/example.js.erb
# Only fires after the DB call
$('#availability').addClass('active');
$('#overview').removeClass('active');
$('#availabilityTab').addClass('active').addClass('in');
$('#overviewTab').removeClass('active').removeClass('in');
$("#availabilityTab").html("<%= escape_javascript(render(partial: 'availability')) %>");