Jquery DataTables does not show up after following tutorial

Question

PROBLEM FIXED FOR NOW.

I fixed it by deleting my javascript section for a sticky header that scrolls with the page. i really don't know why my javascript is crappy when that code is in application.html.erb

My datatables will work when my application.html.erb looks like this:

<!DOCTYPE html>
<html>

    <head>
        <title>Dummyapp1</title>
          <%= stylesheet_link_tag "application" %>
          <%= javascript_include_tag "application", "contractens" %>
          <%= csrf_meta_tags %>

    <div>

    </head>

<body>
==rest of script==

and it does not work when my application.html.erb looks like this:

<!DOCTYPE html>
<html>

    <head>
        <title>Dummyapp1</title>
          <%= stylesheet_link_tag "application" %>
          <%= javascript_include_tag "application", "contractens" %>
          <%= csrf_meta_tags %>

    <div>

</div>

    <!-- If you have jQuery directly, then skip next line -->
    <script src="http://www.google.com/jsapi"></script>

    <script type="text/javascript">
    // If you have jQuery directly, then skip next line
    google.load("jquery", "1");

    function sticky_relocate() {
      var window_top = $(window).scrollTop();
      var div_top = $('#sticky-anchor').offset().top;
      if (window_top > div_top)
        $('#sticky').addClass('stick')
      else
        $('#sticky').removeClass('stick');
      }
    // If you have jQuery directly, use the following line, instead
    // $(function() {
    // If you have jQuery via Google AJAX Libraries
    google.setOnLoadCallback(function() {
      $(window).scroll(sticky_relocate);
      sticky_relocate();
      });
    </script>

    </head>

<body>

I follow this Railscasts Tutorial for datatables in rails. i had this in my other app. there it works fine. I did the same thing as the other app but it is showing me text instead of the actual table.

Here´s my view for the table:

    <h1>Listing contracten</h1>

    <table id="contractens" class="display">
      <thead>
          <tr>
            <th>Naam</th>
            <th>Omschrijving</th>
            <th>Datumingang</th>
            <th>Contractduur</th>
            <th>Opzegtermijn</th>
            <th>Betalingstermijn</th>
          </tr>
      </thead>
    <tbody>
      <%= @contractens.each do |contracten| %>
      <tr>
        <td><%= contracten.naam %></td>
        <td><%= contracten.omschrijving %></td>
        <td><%= contracten.datumingang %></td>
        <td><%= contracten.contractduur %></td>
        <td><%= contracten.opzegtermijn %></td>
        <td><%= contracten.betalingstermijn %></td>
      </tr>
    <% end %>
    </tbody>
    </table>

<%= link_to "Nieuw", new_contracten_path %>

and my javascript files are filled in correct.

here´s a screenshot of the issue:

issue

Hope you can help me :)

EDIT: it should look like this with no css:

enter image description here

and it should look like this with css:

enter image description here

This is my contractens.js.coffee :

jQuery ->
        $('#contractens').dataTable
          sPaginationType: "full_numbers"
          bJQueryUI: true

This is my application.js:

//= require jquery
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require_tree .

And this is my application.css:

/*
*= require_self
*= require dataTables/jquery.dataTables
*= require_tree .
*/

EDIT 2:

when i have a javascript function to hide a div when clicking a checkbox. when i have

jQuery ->
        $('#contractens').dataTable

in my contractens.js.coffee it does work, but when i have:

jQuery ->
        $('#contractens').dataTable
        sPaginationType: "full_numbers"
        bJQueryUI: true

it does not work either. so something is blocking the jquery i guess.

did you called $('#contractens').dataTable() ?

Daniel
– Daniel

2012-06-27 13:53:57 +00:00
Commented Jun 27, 2012 at 13:53 — Daniel
– Daniel, Commented Jun 27, 2012 at 13:53
yes i did in my contractens.js.coffee file

Kees Sonnema
– Kees Sonnema

2012-06-27 13:59:31 +00:00
Commented Jun 27, 2012 at 13:59 — Kees Sonnema
– Kees Sonnema, Commented Jun 27, 2012 at 13:59

carpamon · Accepted Answer · 2012-06-27 14:13:38Z

2

Change

<%= @contractens.each do |contracten| %>

for

<% @contractens.each do |contracten| %>

The <%= %> tag set is used when you want output.

answered Jun 27, 2012 at 14:13

carpamon

6,6333 gold badges41 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Kees Sonnema Over a year ago

Strange but the text is now gone, i still can't see the table

carpamon Over a year ago

Why strange? You were printing the contractens instance variable when using <%= %>.

Kees Sonnema Over a year ago

no i mean strange that the table is still not showing after i editted it

Kees Sonnema Over a year ago

i also expected that my other javascript code in my application.js isn't working when i have the jquery command in de contractens.js.coffee file, i think it's blocking each other in some way.

carpamon Over a year ago

Please explain better what's your problem, edit your question if necessary.

|

Sachin Prasad · Accepted Answer · 2013-07-02 07:05:01Z

1

I also had the same Issue I changed this one: in my application.js:

//= require jquery
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require_tree .

TO

//= require jquery
//= require_tree .
//= require jquery_ujs
//= require dataTables/jquery.dataTables

And it works now.

answered Jul 2, 2013 at 7:05

Sachin Prasad

5,37212 gold badges56 silver badges101 bronze badges

2 Comments

Sachin Prasad Over a year ago

@KeesSonnema Yup :) its only for those people who might have this type of issue.

Kees Sonnema Over a year ago

In my case it was a bugging js file. but it's helpful anyway :) thanks for mentioning.

Collectives™ on Stack Overflow

Jquery DataTables does not show up after following tutorial

2 Answers 2

8 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related