When i use webform it works fine. but with master page it's not wroking, i provided almost all code here.
there is a textbox and a table. purpose is to Search using any keyword.
there are 3 files links which i also linked in my master page
Here is Master Page
<html>
<head runat="server">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Master Page</title>
<link rel="icon" href="favicon.ico" type="img/ico">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.min.css" />
<link id="themecss" rel="stylesheet" type="text/css" href="http://www.shieldui.com/shared/components/latest/css/light/all.min.css" />
<link rel="stylesheet" type="text/css" href="css/theme.css" />
<link rel="stylesheet" type="text/css" href="css/dashboard.css" />
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
<script type="text/javascript" src="js/theme.js"></script>
</body>
</html>
Web Form With Master Page
<%@ Page Title="FJ - DashBoard | Company" Language="C#" MasterPageFile="~/AdminMaster.Master" AutoEventWireup="true" CodeBehind="Company.aspx.cs" Inherits="FJ_System.Company1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="js/Search.js"></script>
</asp:Content>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title text-center" style="font-size: large"><i class="fa fa-list"></i>Company Details</h3>
</div>
<div class="panel-body">
<asp:TextBox ID="myInput" Style="text-align: center; font: bold; font-size: large" CssClass="form-control" placeholder="Search..." runat="server"></asp:TextBox>
<br />
<table class="table table-bordered table-striped table-responsive table-hover">
<thead style="text-align-last: center; background-color: black; color: white">
<tr>
<th>Id</th>
<th>Company</th>
<th>Adress</th>
<th>City</th>
<th>Opening Balance</th>
<th>Salesman</th>
</tr>
</thead>
<tbody id="myTable" style="text-align: center;">
<tr>
<td>1</td>
<td>Umair</td>
<td>latifabad</td>
<td>Hyderabad</td>
<td>15000</td>
<td>David</td>
</tr>
<tr>
<td>2</td>
<td>Farzan</td>
<td>Unitno4</td>
<td>Hyderabad</td>
<td>15000</td>
<td>Parker</td>
</tr>
<tr>
<td>3</td>
<td>Huzaifa</td>
<td>Malir</td>
<td>Karachi</td>
<td>20000</td>
<td>Salman</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Search.js
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Please help me to resolve this problem.
The rendered id is not always the same as you type it, especial when you add it on master page. To get the rendered on page id from <asp:TextBox ID="myInput" Style="text-align: center;... you must use the .ClientID as
$("#<%=myInput.ClientID%>").on("keyup", function () {
the full code will be
$(document).ready(function () {
$("#<%=myInput.ClientID%>").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
note that the myTable is not asp.net control, so we left it as it is
You can also read about Accessing control client name and not ID in ASP.NET
If you have this code out side of asp.net them its not going to work because you can not find the id, neither render it. Move this javascript code inside the page, or render the ids before you load this code and use that ids in the external code like this example