javascript - Trouble with FixedHeader - Stack Overflow

admin管理员组

文章数量:1391964

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 (.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:
-
-
-

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./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./00d1pe963a
- http://awesomescreenshot./09e1pe9581
- http://awesomescreenshot./0d21pe9a2b

• javascript
• jquery
• ruby-on-rails
• fixed-header-tables

Share Improve this question Follow edited Mar 8, 2017 at 22:25 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 8, 2013 at 6:51 Adam ZernerAdam Zerner 19.3k1818 gold badges101101 silver badges174174 bronze badges 13

• 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 Commented Sep 8, 2013 at 7:10
• $(document).ready( function () { new FixedHeader( $('.table-fixed-header').get(0) ); } ); This is from fixed header example datatables/release-datatables/extras/FixedHeader/… the code said 2. HTML table node - when using FixedHeader without DataTables so it may only work with table. – j03w Commented Sep 10, 2013 at 7: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 Commented Sep 10, 2013 at 17:24
• apparently jQuery.browser has been deprecated. Look here jquery./upgrade-guide/1.9/#jquery-browser-removed You can modify the source code of FixedHeader or use this stackoverflow./a/15540975/832759 Also, please do the research yourself. Read the doc. Try Google. Don't just throw any error on SO. – j03w Commented Sep 11, 2013 at 1: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 Commented Sep 11, 2013 at 3:26

 |  Show 8 more ments

3 Answers 3

Sorted by: Reset to default 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>

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./assets/application-ef423e68595cb2b66d22d6028d65f673.css" media="all" rel="stylesheet" type="text/css" />
  <script src="https://carousel_photos.s3.amazonaws./assets/application-3a98859cd4322442bddf86e94e81f7d6.js" type="text/javascript"></script>
  <link href="https://carousel_photos.s3.amazonaws./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./analytics.js','ga');

    ga('create', 'UA-42526156-1', 'collegeanswerz.');
    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, ments, 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./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-autoplete" 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-autoplete" 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./assets/colleges-ae0a0221043603109dfe50ccaa4b7ded.css" media="all" rel="stylesheet" type="text/css" />
<script src="https://carousel_photos.s3.amazonaws./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.

As suggested here:

Try to add Ajax call to update your table Automatically!

本文标签： javascriptTrouble with FixedHeaderStack Overflow