5

UPDATE: I talked to the author of FixedHeader, and it seems that it isn't going to work for me. I think the problem is that my table is inside of a tab, which is causing some problems (see the screenshots in my other update), and he said that the current version of FixedHeader doesn't address these issues. I've tried some other plugins and methods for fixed table headers, and they're all giving me similar problems. I suspect it's because my table is inside of a tab. If anyone has any easy solutions, please let me know. Otherwise, don't worry about it. I've got a lot of other stuff to work on for this website, and the fixed table header seems to be taking up too much time.

I'm trying to use FixedHeader for my website.

I downloaded FixedHeader.js and put it in vendor/assets/javascripts. I have //= require FixedHeader in application.js.

In colleges.html.erb I've set a class of table-fixed-header to each of my two tables, and have <%= javascript_include_tag :application %>. In colleges.js, I've got var oTable = $('.table-fixed-header').dataTable(); new FixedHeader( oTable );.

In the development environment, when I go to inspect element > resources (in chrome), FixedHeader.js loads, but there's 2 problems with colleges.js: it says... 

var oTable = $('.table-fixed-header').dataTable();  
Uncaught TypeError: Object [object Object] has no method 'dataTable' (repeated 2 times)
new FixedHeader( oTable );

What can I do to get this to work? (Right now it doesn't work at all.)

EDIT: I just messed around a little and didn't have success. I tried $.browser instead of jQuery.browser, but that gave me the same 'msie' error. Then I tried deleting that code altogether, and there were no javascript errors, but the fixed header didn't really work too well (the header started off at the top of my web page when it shouldn't, it wasn't sized properly etc.).

UPDATE: Using the updated version (https://github.com/DataTables/FixedHeader/blob/master/js/FixedHeader.js) gets the header to appear at the top of the page before you click on the table link (it shouldn't appear yet, and it shouldn't be at the very top). Also, it isn't sized the right way, and it doesn't have the sorting functionality. See these links:
- http://awesomescreenshot.com/00d1pe963a
- http://awesomescreenshot.com/09e1pe9581
- http://awesomescreenshot.com/0d21pe9a2b

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Adam Zerner
  • 17,797
  • 15
  • 90
  • 156
  • Not sure if this is relevant or just a separate problem, but somehow the javascript on my home page got messed up. You're supposed to click the "View Details" buttons for details, but all the content for those buttons are just always being shown. – Adam Zerner Sep 08 '13 at 07:10
  • `$(document).ready( function () { new FixedHeader( $('.table-fixed-header').get(0) ); } );` This is from fixed header example http://datatables.net/release-datatables/extras/FixedHeader/html_table.html the code said `2. HTML table node - when using FixedHeader without DataTables` so it may only work with table. – j03w Sep 10 '13 at 07:44
  • @j03w I just tried that, and it didn't work. Now when I go to Inspect Element > Resources, I get 2 errors in FixedHeader.js, and none in colleges.js. s.bUseAbsPos = (jQuery.browser.msie && Uncaught TypeError: Cannot read property 'msie' of undefined (repeated 2 times) (jQuery.browser.version=="6.0"||jQuery.browser.version=="7.0")); }, – Adam Zerner Sep 10 '13 at 17:24
  • apparently `jQuery.browser` has been deprecated. Look here http://jquery.com/upgrade-guide/1.9/#jquery-browser-removed You can modify the source code of `FixedHeader` or use this http://stackoverflow.com/a/15540975/832759 Also, please do the research yourself. Read the doc. Try Google. Don't just throw any error on SO. – j03w Sep 11 '13 at 01:59
  • @j03w see the edit to my question. I tried messing around, but it looks like the plugin doesn't work. And I do try to do research myself, but I'm an inexperienced programmer and don't really know what to do. I did google this a lot and have tried other plugins too. As I've learned more, I check the things I learn about (I used to not know to restart the web server or check inspect element > resources), but I can't really do more than that. – Adam Zerner Sep 11 '13 at 03:26
  • if sticky header is what you are looking for may be you can try this instead http://css-tricks.com/persistent-headers/ – j03w Sep 11 '13 at 07:46
  • Sticky header is what I'm looking for. I just tried the css-tricks thing, and it didn't work. It made a duplicate of the table header, and it resizes the table header when I scroll down. – Adam Zerner Sep 11 '13 at 18:04
  • I could see that you are have referenced the same JS files multiple times. Please see the HTML on the page loaded and remove the duplicate references. – Rajesh Omanakuttan Sep 11 '13 at 18:37
  • @Rajesh I only use `<%= javascript_include_tag :application %>`. But I have that in my layout file as well as my views. Should I delete it from my views? – Adam Zerner Sep 11 '13 at 18:59
  • Yes, of course. In asset pipeline, we will not normally use js, css specifications inside views as we have it in our layout files – Rajesh Omanakuttan Sep 11 '13 at 19:10
  • @Rajesh Ok, thanks! It didn't fix the table header problem, but at least it cleaned up my code. – Adam Zerner Sep 11 '13 at 19:21
  • would you mind create a jsfiddle for us? may be it's easier for us to help you from there http://jsfiddle.net/ – j03w Sep 11 '13 at 23:32
  • http://jsfiddle.net/CVKtj/. I tried, but it didn't really work. See the update to my question for some pictures of what's happening. – Adam Zerner Sep 12 '13 at 00:00

3 Answers3

1

could you try putting the javascript includes at the bottom of the page, just below the closing ""

  • leave the normal rails stuff at the top
  • add the FixedHeader include at the bottom of the page: <script src="/assets/FixedHeader.js" type="text/javascript"></script>
Jon Soong
  • 117
  • 5
1

Even after the correction you made, I could see duplication in js references. Below is the HTML extracted source from your web page:

<!DOCTYPE html>
<html>
<head>
  <title>Colleges</title>
  <link href="https://carousel_photos.s3.amazonaws.com/assets/application-ef423e68595cb2b66d22d6028d65f673.css" media="all" rel="stylesheet" type="text/css" />
  <script src="https://carousel_photos.s3.amazonaws.com/assets/application-3a98859cd4322442bddf86e94e81f7d6.js" type="text/javascript"></script>
  <link href="https://carousel_photos.s3.amazonaws.com/assets/favicon-443a473c98a5e6627afeec49679d7e7c.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
  <link rel="shortcut icon" href="/favicon.ico" />
  <meta content="authenticity_token" name="csrf-param" />
<meta content="ZoOECcFHyrwgJo8DeOd42DDA86gRx6NBbctJlH9XjGc=" name="csrf-token" />
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-42526156-1', 'collegeanswerz.com');
    ga('send', 'pageview');
  </script>
</head>
<body>
    <header>        
        <p id="sign_in">
            <a href="/mentor">be a mentor</a><br />
            <a href="/find-a-mentor">find a mentor</a><br /><br /><br />
        </p>

        <div class="idea_bar">
          <div class="left_idea_bar">
            <form accept-charset="UTF-8" action="/application_controller/email" id="idea_bar_form" method="post"> 
                <div style="margin:0;padding:0;display:inline"> 
                    <input type="hidden" name="utf8" value="✓"> 
                    <input type="hidden" name="authenticity_token" value="LxYk26gr0kt4jHn9lhSgwdywC8lotwEAqT3od0rsRiA="> 
                </div> 
                <p>Ideas, comments, questions, suggestions? Help us help you!</p> 
                <div class="Left"> 
                    <textarea cols="60" id="message" name="message" rows="4"></textarea> 
                    <button id="submit" type="submit" form="idea_bar_form"><span id="big_submit">Send</span> <span id="small_submit"><br> 
                    • one click<br> 
                    • anonymous</span></button> 
                    </div> 
                <div class="Left"> 
                    <label for="email" style="display:inline">• include your email if you want a response:</label>
                    <input type="text" id="email" name="email" size="36"> 
                    <br> 
                </div> 
            </form>
          </div>
        </div>

        <nav id="main_nav">
            <hr />
            <ul> 
                <li id="logo"><a href="/"><img alt="CollegeANSWERZ" height="50" src="https://carousel_photos.s3.amazonaws.com/assets/favicon-7bc10d21b6efa5ccbd8ba1c3bb40689a.png" width="50" /></a></li> 
                <li><a href="/colleges">Colleges</a></li> 
                <li> | </li> 
                <li><a href="/about-college">About College</a></li> 
                <li> | </li> 
                <li><a href="/essays">Essays</a></li> 
                </ul> 
                <form accept-charset="UTF-8" action="/search" class="form_search ui-autocomplete" id="search_text" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>                   <div id="search"> <input class="input-medium search-query ui-autocomplete" id="search_field" name="search" placeholder="enter college" type="search" /> </div>
</form>         <hr />
        </nav>
    </header>

    <div class="container">
        <link href="https://carousel_photos.s3.amazonaws.com/assets/colleges-ae0a0221043603109dfe50ccaa4b7ded.css" media="all" rel="stylesheet" type="text/css" />
<script src="https://carousel_photos.s3.amazonaws.com/assets/application-3a98859cd4322442bddf86e94e81f7d6.js" type="text/javascript"></script>

<div id="colleges_css">

<h1>Colleges</h1>

Please remove duplicate references from your views. May that would resolve the problem you are facing.

Rajesh Omanakuttan
  • 6,788
  • 7
  • 47
  • 85
  • I removed `<%= javascript_include_tag :application %>` from all my views (but left it in the layout), and I'm still having the same problem. – Adam Zerner Sep 11 '13 at 22:14
1

As suggested here:

Try to add Ajax call to update your table Automatically!

Mogsdad
  • 44,709
  • 21
  • 151
  • 275
user2700307
  • 130
  • 1
  • 5