jQuery Limitation the scope of <script>

Question

here is the Manual and the Code of my again trying to make a fixed rows for a Grid :

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/webtoolkit.jscrollable.js" type="text/javascript"></script>
<script src="Scripts/webtoolkit.scrollabletable.js" type="text/javascript"></script> 
<script type="text/javascript">
    $(document).ready(function() {
        jQuery('table').Scrollable(400, 1500);
    });
</script>

    <asp:GridView ID="GridView2" runat="server" 
        DataSourceID="SqlDataSource1" AllowPaging="False" AllowSorting="True" OnPreRender="GridView2_PreRender"
        onrowcreated="GridView1_RowCreated" Width="100%" ondatabound="GridView2_DataBound">
    </asp:GridView>

</asp:Panel>

How to Limit the scope of <Script> on my div or some area with my GridView.

Now it works for whole page and breaks it out.

(also I got a question about fixing this script work , but the main trouble is Limitation the scope of <script>)

Answer 1

If I understand correctly, your problem is that your jQuery selector is running on every table, while you want it to run only on the GridView. The solution is to use a class or id selector, and add that class or ID to the GridView(s).

Either:

<script type="text/javascript">
    $(document).ready(function() {
        jQuery('#<%=GridView2.ClientID%>').Scrollable(400, 1500);
    });
</script>

<asp:GridView ID="GridView2" runat="server" 
    DataSourceID="SqlDataSource1" AllowPaging="False" AllowSorting="True" OnPreRender="GridView2_PreRender"
    onrowcreated="GridView1_RowCreated" Width="100%" ondatabound="GridView2_DataBound">
</asp:GridView>

or:

$(document).ready(function() {
    jQuery('.myGridviews').Scrollable(400, 1500);
});

<asp:GridView ID="GridView2" CssClass=".myGridviews" runat="server" 
    DataSourceID="SqlDataSource1" AllowPaging="False" AllowSorting="True" OnPreRender="GridView2_PreRender"
    onrowcreated="GridView1_RowCreated" Width="100%" ondatabound="GridView2_DataBound">
</asp:GridView>

EDIT: Fixed id, thanks to CMS.

Answer 2

You should select only the client GridView2 table.

You can either get the ClientID server-side property to build your selector:

$(document).ready(function() {
  jQuery('#<%=GridView2.ClientID%>').Scrollable(400, 1500);
});

Or use the attributeEndsWith selector

$(document).ready(function() {
  jQuery('table[id$=GridView2]').Scrollable(400, 1500);
});