Databases
StackOverflow2013
Postsdbo
POJquery DataTables does not show up after following tutorial
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery DataTables does not show up after following tutorial
    text
    copied!<p>PROBLEM FIXED FOR NOW.</p> <p>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</p> <hr> <p>My datatables will work when my application.html.erb looks like this:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Dummyapp1&lt;/title&gt; &lt;%= stylesheet_link_tag "application" %&gt; &lt;%= javascript_include_tag "application", "contractens" %&gt; &lt;%= csrf_meta_tags %&gt; &lt;div&gt; &lt;/head&gt; &lt;body&gt; ==rest of script== </code></pre> <p>and it does not work when my application.html.erb looks like this:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Dummyapp1&lt;/title&gt; &lt;%= stylesheet_link_tag "application" %&gt; &lt;%= javascript_include_tag "application", "contractens" %&gt; &lt;%= csrf_meta_tags %&gt; &lt;div&gt; &lt;/div&gt; &lt;!-- If you have jQuery directly, then skip next line --&gt; &lt;script src="http://www.google.com/jsapi"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; // 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 &gt; 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(); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; </code></pre> <p>I follow this <a href="http://railscasts.com/episodes/340-datatables?view=asciicast" rel="nofollow noreferrer">Railscasts</a> 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.</p> <p>Here´s my view for the table:</p> <pre><code> &lt;h1&gt;Listing contracten&lt;/h1&gt; &lt;table id="contractens" class="display"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Naam&lt;/th&gt; &lt;th&gt;Omschrijving&lt;/th&gt; &lt;th&gt;Datumingang&lt;/th&gt; &lt;th&gt;Contractduur&lt;/th&gt; &lt;th&gt;Opzegtermijn&lt;/th&gt; &lt;th&gt;Betalingstermijn&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;%= @contractens.each do |contracten| %&gt; &lt;tr&gt; &lt;td&gt;&lt;%= contracten.naam %&gt;&lt;/td&gt; &lt;td&gt;&lt;%= contracten.omschrijving %&gt;&lt;/td&gt; &lt;td&gt;&lt;%= contracten.datumingang %&gt;&lt;/td&gt; &lt;td&gt;&lt;%= contracten.contractduur %&gt;&lt;/td&gt; &lt;td&gt;&lt;%= contracten.opzegtermijn %&gt;&lt;/td&gt; &lt;td&gt;&lt;%= contracten.betalingstermijn %&gt;&lt;/td&gt; &lt;/tr&gt; &lt;% end %&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;%= link_to "Nieuw", new_contracten_path %&gt; </code></pre> <p>and my javascript files are filled in correct.</p> <p>here´s a screenshot of the issue:</p> <p><img src="https://i.stack.imgur.com/GK7HJ.png" alt="issue"></p> <p>Hope you can help me :)</p> <p>EDIT: it should look like this with no css:</p> <p><img src="https://i.stack.imgur.com/hbKKD.png" alt="enter image description here"></p> <p>and it should look like this with css:</p> <p><img src="https://i.stack.imgur.com/R6htl.png" alt="enter image description here"></p> <p>This is my contractens.js.coffee :</p> <pre><code>jQuery -&gt; $('#contractens').dataTable sPaginationType: "full_numbers" bJQueryUI: true </code></pre> <p>This is my application.js:</p> <pre><code>//= require jquery //= require jquery_ujs //= require dataTables/jquery.dataTables //= require_tree . </code></pre> <p>And this is my application.css:</p> <pre><code>/* *= require_self *= require dataTables/jquery.dataTables *= require_tree . */ </code></pre> <p>EDIT 2:</p> <p>when i have a javascript function to hide a div when clicking a checkbox. when i have</p> <pre><code>jQuery -&gt; $('#contractens').dataTable </code></pre> <p>in my contractens.js.coffee it does work, but when i have:</p> <pre><code>jQuery -&gt; $('#contractens').dataTable sPaginationType: "full_numbers" bJQueryUI: true </code></pre> <p>it does not work either. so something is blocking the jquery i guess.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload