Jquery Not Working On My Asp Page

I've been trying to figure out what's wrong with this for the past few minutes.. <%@ Page Title='test' Language='C#' MasterPageFile='~/Site.master' AutoEventWireup='true' CodeFi

Solution 1:

Thats because in a content page, ASP.NET changes the assigned ID to something else. If you View Source of the page you could see that. So, the alternative is to access the controls using CssClass.

For example add a CssClass to your GridView and DropDownList

<asp:DropDownListID="ddModel"runat="server"DataSourceID="ddmodelsource"DataTextField="Column1"DataValueField="Column1"CssClass="dropdown"></asp:DropDownList><asp:GridViewID="gvTop"runat="server"CellPadding="2"CellSpacing="2"GridLines="Vertical"CssClass="grid"></asp:GridView>

Now access it from jquery like this.

$(document).ready(function () {
    $(".dropdown").change(function () {
        var selVal = $(this).find(":selected").text();
        var rows = $(".grid tr:gt(0)");
        alert(selVal);
        if (selVal == "ALL") {
            $(".grid tr").show();
        }
        else {
            var rowToShow = rows.find("td:eq(3)").filter(":contains(" + selVal + ")").closest("tr");
            rows.show().not(rowToShow).hide();
        }
    });
});