Geek asks and answers

Jquery not working on my asp page

I tried to find out what was wrong with this over the past few minutes.

<%@ Page Title="test" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

<%@ PreviousPageType VirtualPath="~/Top.aspx" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
    <style>
        #pagediv { width: 1500px !important; }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $("#ddModel").change(function () {
            var selVal = $(this).find(":selected").text();
            var rows = $("#gvTop tr:gt(0)");
            alert(selVal);
            if (selVal == "ALL") {
                $("#gvTop tr").show();
            }
            else {
                var rowToShow = rows.find("td:eq(3)").filter(":contains(" + selVal + ")").closest("tr");
                rows.show().not(rowToShow).hide();
            }
        });
    });
</script>
</asp:Content>

I don’t know yet.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <asp:DropDownList ID="ddModel" runat="server" DataSourceID="ddmodelsource" DataTextField="Column1" DataValueField="Column1">
    </asp:DropDownList>
    <asp:GridView ID="gvTop" runat="server" CellPadding="2" CellSpacing="2" GridLines="Vertical">
    </asp:GridView>
</asp:Content>
0
source share
1 answer

This is because on the content page, ASP.NET changes the assigned identifier to something else. If you are viewing the source of the page, you can see it. So an alternative is to access controls with CssClass.

For example, add CssClassto your GridViewandDropDownList

<asp:DropDownList ID="ddModel" runat="server" DataSourceID="ddmodelsource" DataTextField="Column1" DataValueField="Column1" CssClass="dropdown">
</asp:DropDownList>

<asp:GridView ID="gvTop" runat="server" CellPadding="2" CellSpacing="2" 
        GridLines="Vertical" CssClass="grid">
    </asp:GridView>

Now navigate to it from jquery as follows.

$(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();
        }
    });
});
+3
source

More articles:


All Articles