AJAX在表上不起作用

Question

试图通过将ajax包含到表中来使我的应用程序更具功能。 我使用此http://asciicasts.com/episodes/240-search-sort-paginate-with-ajax教程来创建我的代码，并且非常非常接近说明。

我正在使用IE8（可能是问题的原因，因为它始终是问题的原因）和Rail 4。

我的application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree .


    $(function () {
      // Sorting and pagination links.
      $('#pimps th a, #pimps .pagination a').live('click', function () {   
        $.getScript(this.href);   
        return false;   
        });

      // Search form.
      $('#pimps_search').submit(function () {   
        $.get(this.action, $(this).serialize(), null, 'script');   
        return false;
     });   
    }) 

index.js.erb的

$('#pimps').html('<%= escape_javascript(render(:partial =>"pimps")) %>'));  

index.html.erb

<h1>Improvements: Overview</h1>

<%= form_tag pimps_path, :method => 'get', :id => "pimps_search" do %>   
  <%= hidden_field_tag :direction, params[:direction] %>   
  <%= hidden_field_tag :sort, params[:sort] %> 
  <p>   
    <%= text_field_tag :search, params[:search] %>   
    <%= submit_tag "Search", :title => nil %>   
  </p>   
<% end %>

<div id="pimps"><%= render 'pimps' %></div>  


<div class="row">
    <div class="col-md-10"><%= will_paginate @pimps %></div>
    <div class="col-md-2"><%= button_to 'New Improvement', new_pimp_path, :method => :get %></div>
</div>

我也跑了rails g jquery:install

我的布局application.html.erb

<!DOCTYPE html>
<html lang="en">
<head>

  <title>Improvement</title>

  <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  <![endif]-->


</head>
<body>



<%= yield %>

</body>
</html>

有人知道这可能是什么问题吗？ 如果是IE8，是否有办法集成AJAX？

最好的问候我的朋友们！

Answer 1

您遇到的问题可能是您使用live （折旧为.on ）：

从jQuery 1.7开始，不推荐使用.live（）方法。 使用.on（）附加事件处理程序。 较旧版本的jQuery的用户应优先使用.delegate（）而不是.live（）。

使用匿名功能将使情况更加复杂- 不适用于Turbolinks

---

固定

我会立即这样做：

  // Sorting and pagination links.
  $(document).on('click', '#pimps th a, #pimps .pagination a', function () {   
    $.getScript(this.href);   
    return false;   
  });

  // Search form.
  $(document).on('submit, '#pimps_search'function () {   
    $.get(this.action, $(this).serialize(), null, 'script');   
    return false;
 });   

这从您的document对象委托 -意味着Ajax的任何更新都将绑定到页面上的元素，无论对象是否在DOM加载时可用

-

调试

对于JS问题，您确实需要测试每个小问题。 首先，您需要确保JS被调用并被解雇。 如果可以，那么我们需要查看ajax功能是否正常运行，然后在页面上查看如何使其正常工作

Answer 2

在您的application.js中添加这一行

//= require_self

Answer 3

天哪！ 花了一些时间，但终于找到了问题。

index.js.erb的

$('#pimps').html('<%= escape_javascript(render(:partial =>"pimps")) %>'));

最后一个括号太多了！ 更改为：

$('#pimps').html('<%= escape_javascript(render(:partial =>"pimps")) %>');

现在工作正常。

还必须添加Ricks代码，因为“实时”不适用于我的jquery版本，并且与Turbolink冲突！