按顺序执行jquery语句

时间:2014-01-16 15:16:20

标签: jquery ruby-on-rails

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

1 个答案:

答案 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')) %>");