0

我有一个用于搜索目的的表格。这种形式是“AJAX-ed”并且运行良好。现在我正在尝试添加微调器功能，如下所示：

index.html.haml

#spinner{:style => 'display: none;'} LOADING...  
= render 'articles/show_data'

搜索.js.erb

$("#search_form")
    .bind("ajax:beforeSend", function(){
      alert('xx');
      //$("#spinner").show();
    })
    .bind("ajax:complete", function(){
      $("#spinner").hide();
    })
$('.show_articles').html("<%= escape_javascript(render(partial: '/articles/show_data')) %>");

数据打印正确，问题是，当我发送表单时，微调器没有显示。（表单的 ID 元素实际上称为search_form）

显示和隐藏微调器的代码应该放在哪里？我试图放入一个单独的文件，也放入通过 AJAX 呈现数据的 JS 文件（上面的狙击手），但这些都对我不起作用。

我正在使用 jQuery 1.9。

我会很感激能帮助我解决这个问题。谢谢

4

3 回答 3

1

致评论者：使用.js.erb. 但是，OP 显然不明白它如何适应请求/响应的概念。

表单已提交，Rails 将提交路由到您的控制器和操作。然后，您的控制器操作会执行任何操作，并进行响应，search.js.erb并且浏览器在接收到它时将其作为 javascript 执行。所以，这意味着在表单发送之前你不会告诉#search_form它的beforeSend钩子。

TLDR；将您的$('#search_form')..代码移动到与页面一起加载的 JS 资产文件中。

哦，取消注释实际显示微调器的行...

哦，最后，关于 AJAX 微调器的页面/帖子大约有 400 万个，偶尔搜索一下。

于 2013-03-25T16:16:41.550 回答
0

在你的表格中，你有remote: true吗？尝试 ajax:before 而不是 beforeSend：

$("#search_form")
.bind("ajax:before", function(){
  alert('xx');
  //$("#spinner").show();
})
...

这对我行得通。

于 2013-03-25T16:13:40.297 回答
0

由于我无法在超过 2 小时内解决此问题，因此我通过以下方式解决了此问题：

custom_js.js

$(document).ready(function() {
  $("#form_submit_input").click(function(){
    $('#spinner').show();
  });
});

这将在提交表单时显示微调器。

之后，在search.js.erb

$('.show_articles').html("<%= escape_javascript(render(partial: '/articles/show_data')) %>");
$('#spinner').hide();

何时呈现来自数据库的内容，然后隐藏微调器。这可能不是处理微调器的最干净的方法，但它是有效的解决方案。

于 2013-03-25T17:19:05.543 回答