AJAX not working on table

Question

tried to make my application more functional by including ajax to my tables. I used this http://asciicasts.com/episodes/240-search-sort-paginate-with-ajax tutorial to create my code and kept very, very close to the instructions.

I'm using IE8 (what could be the cause of the problem since its always the cause of the problem) and Rail 4.

My 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>

I also ran rails g jquery:install

My layout 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>

Does anyone know what could be the problem here? If its IE8, is there a way to integrate AJAX nevertheless?

Best regards my friends!

`since its always the cause of the problem` LOL – Richard Peck Jun 13 '14 at 08:48 — Richard Peck, Jun 13 '14 at 08:48

score 1 · Answer 1 · edited May 23 '17 at 10:33

1

The problem you have is likely your use of live (which is depreciated to .on):

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

This will be further compounded by your use of the anonymous function - this won't work with turbolinks

Fix

I would immediately do this:

  // 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;
 });

This delegates from your document object - meaning any updates from Ajax will be bound to the elements on your page, regardless of whether the object was available on DOM load or not

--

Debugging

With JS problems, you really need to test every little issue. Firstly, you need to be sure the JS is being called & fired. If that's okay, we then need to see whether the ajax functionality is working, and then see how to get it working on the page

edited May 23 '17 at 10:33

Community

1
1

answered Jun 13 '14 at 09:00

Richard Peck

76,116
9
93
147

I really dont get what you mean. Event function is the one that gets triggered in click in my application.js? Not sure how to test if its firing could you be a little more specific? Sorry for my noobiness but I'm a total beginner. – Syk Jun 13 '14 at 12:22
Okay I found an error while debugging that says that theres a ";" missing in my view! But its an html.erb file so I dont use any ";" at all there? ANd moreover my sort function is not working anymore since I included the new code Rich Peck provided so I probably need to change something. – Syk Jun 16 '14 at 06:32
Does the console mention say which line the error occurs on? – Richard Peck Jun 16 '14 at 06:38
It says line 1 character 5087, but if I click on the error message it redirects me directly to the line and its simply a line within my html table that should be rendered using ajax. And if I try to sort my different columns the error message is changing the character number completly senseless. – Syk Jun 16 '14 at 06:53
Hmmm and the ajax is unobtrusive or your own defined code? – Richard Peck Jun 16 '14 at 06:56
What do you mean by unobtrusive? – Syk Jun 16 '14 at 07:01
Having called `remote: true` for example – Richard Peck Jun 16 '14 at 07:01
No, you can see my code at my first post. I just included your code and tried some changes that didnt work. – Syk Jun 16 '14 at 07:03
Do I have to add a respond_to block for my index function in my pimps controller? Or does Rails 4 automatically responds to js? – Syk Jun 16 '14 at 07:14
1

Okay works now! Big thanks Rick! Really appreciate it! – Syk Jun 16 '14 at 07:27

score 0 · Answer 2 · answered Jun 13 '14 at 09:33

0

add this line in your application.js

//= require_self

answered Jun 13 '14 at 09:33

Stary

178
10

score 0 · Accepted Answer · answered Jun 16 '14 at 07:27

Holy moly! Took some time but finally found the problem.

index.js.erb

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

Last bracket was too much! Changed it to:

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

And now it works fine.

Also had to add Ricks code because 'live' doesnt work with my jquery version and conflicts with turbolinks!

AJAX not working on table

3 Answers3