Question

我有一个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 %>

Answer 1

在我看来，你在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')) %>");

按顺序执行jquery语句

1 个答案: