0

I am trying to recreate this table in my rails 3 app. I believe I have included all of the necessary javascript files but I keep getting this error:

Uncaught TypeError: Cannot read property 'oStdClasses' of undefined

I copied his HTML and javascript files directly so I am not sure what the issue could be. I am very new with jquery/javascript so I'm sure I'm just missing something silly. Any hints would be great.

edit: I am guessing the files are getting loaded in the wrong order because when I look at my console this is what I see:

Started GET "/" for 127.0.0.1 at 2012-03-29 11:17:14 -0400
Processing by HomeController#index as HTML
Rendered home/index.html.erb within layouts/application (18.0ms)

Compiled bootstrap-responsive.css  (0ms)  (pid 37780)
Compiled bootstrap.css  (0ms)  (pid 37780)
Compiled docs.css  (0ms)  (pid 37780) 
Compiled home.css  (16ms)  (pid 37780)
Compiled scaffolds.css  (0ms)  (pid 37780)
Compiled application.css  (33ms)  (pid 37780)
Compiled jquery.js  (1ms)  (pid 37780)
Compiled jquery_ujs.js  (0ms)  (pid 37780)
***Compiled DT_bootstrap.js  (0ms)  (pid 37780)  #=> Wrong order?
Compiled bootstrap-alert.js  (0ms)  (pid 37780)
Compiled bootstrap-button.js  (0ms)  (pid 37780)
Compiled bootstrap-carousel.js  (0ms)  (pid 37780)
Compiled bootstrap-collapse.js  (0ms)  (pid 37780)
Compiled bootstrap-dropdown.js  (0ms)  (pid 37780)
Compiled bootstrap-modal.js  (0ms)  (pid 37780)
Compiled bootstrap-popover.js  (0ms)  (pid 37780)
Compiled bootstrap-scrollspy.js  (0ms)  (pid 37780)
Compiled bootstrap-tab.js  (0ms)  (pid 37780)
Compiled bootstrap-tooltip.js  (2ms)  (pid 37780)
Compiled bootstrap-transition.js  (0ms)  (pid 37780)
Compiled bootstrap-typeahead.js  (0ms)  (pid 37780)
Compiled google-code-prettify/prettify.js  (0ms)  (pid 37780)
Compiled home.js  (118ms)  (pid 37780)
***Compiled jquery-1.7.1.min.js  (1ms)  (pid 37780)
***Compiled jquery.dataTables.js  (6ms)  (pid 37780)   
***Compiled jquery.dataTables.min.js  (0ms)  (pid 37780)
Compiled application.js  (292ms)  (pid 37780)
Completed 200 OK in 574ms (Views: 573.7ms)

I'm going to try to manually reorder them and see if that makes a difference.

Josh
  • 5,631
  • 1
  • 28
  • 54
  • A code example would be helpful. Also ensure that you did include the DataTables script in the head of your document? – khollenbeck Mar 29 '12 at 16:10
  • I included `<%= javascript_include_tag "application" %>` in my head and I can see the file from Chrome when I inspect it. – Josh Mar 29 '12 at 16:21
  • Sorry, but could I also see the code you are using to initiate it. I am assuming it is the same as the link you posted. Is that correct? – khollenbeck Mar 29 '12 at 16:27
  • 1
    Also, I don't know anything about Ruby. But I have used DataTables before so I am familiar with that. But looking at the what you posted. It looks like you are including the DataTables script twice. ***Compiled jquery.dataTables.js (6ms) (pid 37780) ***Compiled jquery.dataTables.min.js (0ms) (pid 37780) I don't think that would cause a problem. But you should only need one because they are both the same file. – khollenbeck Mar 29 '12 at 16:30

2 Answers2

2

My issue was the files were not loading in the proper order. I used this answer to reorder the files manually which made it work.

Community
  • 1
  • 1
Josh
  • 5,631
  • 1
  • 28
  • 54
1

If you're using the jquery-datatable-rails gem ensure that you're requiring both the base datatables JavaScript as well as the twitter bootstrap variant in your application.js, e.g.:

//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap

Including only the the bootstrap JS file will result in the error.

Noz
  • 6,216
  • 3
  • 47
  • 82