Uncaught TypeError: $(...).gridviewScroll is not a function

Uncaught TypeError: $(...).gridviewScroll is not a function

Hi there,

I'm new to the forum and am in quite a bind. Been stuck on this for a few days and have been searching for a solution. I'll spare you the sob story.

What I am trying is create a table that can scroll where the first column can be frozen so that it always remains in place. I am doing this with a Gridview.  I found this demo:  http://gridviewscroll.aspcity.idv.tw/Demo.aspx Which is exactly what I'm looking for (Freeze Column, just the first one) and went to Github to bring in the necessary jquery files https://github.com/twlikol/GridViewScroll

I added the JS file to my project and went with it.  I got an error you see in the picture (Uncaught TypeError: $(...).gridviewScroll is not a function.

I checked to see if I had conflicting JQuery libraries, which I don't. I tried using replacing $ with Jquery and that also didn't return anything helpful.  The code is currently on local host and I would be happy to show it, if someone can tell me how?

The thing is, I've had some trouble with this from the start, and am now going to do a stripped down version to see what's going on at the same time. But every answer I've found regarding this has not worked for me.  

I have attached a photo of the error and am pasting some of the code below to show you as much as I can until I can find a way to share more code.

This uses the Government of Canada WET framework as well.


In the header I am bringing in:

<!-- Load closure template scripts -->
<script type="text/javascript" src="https://ssl-templates.services.gc.ca/app/cls/wet/gcweb/v4_0_20/js/compiled/soyutils.js"></script>
<script type="text/javascript" src="https://ssl-templates.services.gc.ca/app/cls/wet/gcweb/v4_0_20/js/compiled/wet-en.js"></script>
<script type="text/javascript" src="https://ssl-templates.services.gc.ca/app/cls/wet/gcweb/v4_0_20/js/compiled/plugins-en.js"></script>
<noscript>
<!-- Write closure fall-back static file -->
</noscript>
<!-- Write closure template -->
<!-- Wet 4.0.18 hybrid header files -->
<link href="https://ssl-templates.services.gc.ca/app/cls/WET/gcweb/v4_0_20/css/printfix.css" rel="stylesheet">
<!-- GoC.WebTemplate Version ASPX 4.0.20.2 -->
<!-- GoC.WebTemplate.Core Version 1.0.5851.20464 -->
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery-ui.js"></script>
<script type="text/javascript" src="scripts/AjaxBase.js"></script>
<script type="text/javascript" src="scripts/Scrollage.js"></script>


Where the soyutils.js, wet-en.js and plugins-en.js don't seem to be interfering

and in the footer:

The Gridview are here:


    <asp:GridView  ID="gvCanada" runat="server" AutoGenerateColumns="false" Width="880px" ToolTip="<%$ Resources:UIStrings, Canada %>">
        <Columns> 
           <asp:BoundField DataField="EnergyVariableEnglish"  />
           <asp:BoundField DataField="EnergyVariableFrench"/>
           <asp:BoundField DataField="p2005" HeaderText="2005" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2006" HeaderText="2006" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2007" HeaderText="2007" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2008" HeaderText="2008" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2009" HeaderText="2009" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2010" HeaderText="2010" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2011" HeaderText="2011" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2012" HeaderText="2012" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2013" HeaderText="2013" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2014" HeaderText="2014" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2015" HeaderText="2015" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2016" HeaderText="2016" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2017" HeaderText="2017" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2018" HeaderText="2018" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2019" HeaderText="2019" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2020" HeaderText="2020" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2021" HeaderText="2021" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2022" HeaderText="2022" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2023" HeaderText="2023" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2024" HeaderText="2024" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2025" HeaderText="2025" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2026" HeaderText="2026" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2027" HeaderText="2027" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2028" HeaderText="2028" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2029" HeaderText="2029" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2030" HeaderText="2030" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2031" HeaderText="2031" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2032" HeaderText="2032" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2033" HeaderText="2033" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2034" HeaderText="2034" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2035" HeaderText="2035" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2036" HeaderText="2036" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2037" HeaderText="2037" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2038" HeaderText="2038" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2039" HeaderText="2039" DataFormatString="{0:n}" NullDisplayText=" " />
           <asp:BoundField DataField="p2040" HeaderText="2040" DataFormatString="{0:n}" NullDisplayText=" " />
        </Columns>
        <HeaderStyle CssClass="GridviewScrollHeader" />
        <RowStyle CssClass="GridviewScrollItem" />
        <PagerStyle CssClass="GridviewScrollPager" />
    </asp:GridView>
       
     <script type="text/javascript">
         $(document).ready(function () {
             $('#<% =gvCanada.ClientID%>').gridviewScroll({
                 freezesize: 1
            });

        });
     </script>


Now I ended up changing the name of the GridViewScroll.js FILE NAME but left the method name, so it is included in the header as Scrollable.js (it wasn't working before the name change either, so I had assumed perhaps it was getting confused)


I know this is a really rough question as well as hard to understand, I will happy to answer as much as I can and get a live version working as soon as possible, thank you in advance!

Shaan