Question

在Rails索引视图中，我正在实现ajax分页，或多或少遵循此Railscast。

当用户点击分页链接时，我希望执行以下步骤：

现有索引淡出。
显示微调器。
新索引内容淡入。

在index.js.erb中，我有以下内容：

$(".ajaxable-content").fadeOut('fast');
$(".ajaxable-content").html('<div class="ajax-spinner></div>');
$(".ajaxable-content").delay(400);
$(".ajaxable-content").html('<%= escape_javascript(render :partial => "my/ajax/content" %>');
$(".ajaxable-content").fadeIn('slow');

尽管有delay功能，但我所看到的是：

呈现新内容。
内容淡出。
内容淡入。

这不是一个非常好的用户体验！

（此外，似乎没有显示微调器。或者可能被替换得太快而无法引人注意）。

在呈现新内容之前，确保淡出完成的正确方法是什么？

设置此项的最佳方法是什么，以便在淡入淡出和旋转器发生的同时在后台发生对数据库的请求？

Answer 1

当其对象已经呈现并传递到客户端时，将执行index.js.erb中的任何操作。所以它只能用于调度内容（并隐藏“加载”微调器）。尝试fadeOut当前页面并在发送ajax请求之前显示微调器，例如（我正在使用截屏视频中的代码）

$(function () {
  $('#products th a').live('click', function () {
    var href = this.href;
    $(".ajaxable-content").fadeOut('fast', function(){
      $(".ajaxable-content").html('<div class="ajax-spinner></div>');
      $.getScript(href);
    });
    return false;
  });
})

在index.js.erb中只剩下最后两行

$(".ajaxable-content").html('<%= escape_javascript(render :partial => "my/ajax/content" %>');
$(".ajaxable-content").fadeIn('slow');

微调器的可见性也取决于你的css：当你显示它时，它的父div被隐藏（淡出）。

如何在ajaxified分页中控制事件顺序？

1 个答案: