Question

尝试通过在表中包含ajax来使我的应用程序更具功能性。我使用这个http://asciicasts.com/episodes/240-search-sort-paginate-with-ajax教程来创建我的代码，并且非常非常接近指令。

我正在使用IE8（可能是问题的原因，因为它始终是导致问题的原因）和第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（）。

使用anonymous function - won't work with 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对象的delegates - 意味着来自Ajax的任何更新都将绑定到页面上的元素，无论该对象是否在DOM加载时可用< / p>

-

<强>调试

对于JS问题，您确实需要测试每个小问题。首先，你需要确保JS被称为＆amp;被解雇。如果没关系，我们需要查看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代码，因为＆＃39; live＆＃39;不能使用我的jquery版本并与turbolinks冲突！

AJAX无法在桌面上工作

3 个答案: