Ml Ck Ml Ck - 3 years ago 279
HTML Question

ASP.NET javascript blocking other script

I have an HTML Page in which i execute 2 different JavaScripts.

One is for an autocomplete textbox and the other is for hover over a Gridview.

I recently added the hover script and the autocomplete stopped working, im sure im doing something wrong!

<%@ Page Language="C#" AutoEventWireup="true" Inherits="SearchER" CodeBehind="Search.aspx.cs" %>










<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}

#form1 {
height: 645px;
}

.form-control {
}

td {
cursor: pointer;
}

.hover_row {
background-color: #FFFFBF;
}
</style>






<form id="form1" runat="server" style="background-color: #FFFFFF; font-family: tahoma; margin-left: 0px; margin-top: 0px;">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>

<div style="background-color: white; height: 46px;">

<asp:HyperLink ID="HyperLink1" runat="server" Font-Names="Tahoma" Font-Size="X-Large" NavigateUrl="~/Default.aspx">Πίσω στο Εξοδολόγιο</asp:HyperLink>

</div>
<div style="margin-left: AUTO; margin-top: 100px; margin-bottom: 12px; font-family: tahoma; font-size: x-large; width: 627px; height: 63px; margin-right: auto;" align="center">

<script type="text/javascript">

$(document).ready(function () {
$("[id*=txtSearch]").autocomplete({ source: '<%=ResolveUrl("~/Search_CS.ashx" ) %>' });
});

</script>
&nbsp;<asp:Label ID="Label1" runat="server" Text="Find a name:"></asp:Label>
<asp:TextBox ID="txtSearch" runat="server" CssClass="form-control" autocomplete="ON"
Width="296px" OnTextChanged="txtSearch_TextChanged" BorderStyle="Solid" BorderColor="#507CD1" Height="22px" />
<asp:Button ID="Button1" Text="Find" runat="server" OnClick="Submit" BorderStyle="Solid" Height="26px" Style="margin-top: 0px; margin-left: 0px;" Width="96px" BorderColor="#507CD1" />
&nbsp;
</div>

<div style="height: 412px; width: auto; margin-top: 0px; margin-left: auto; margin-right: auto;" align="center">

<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound" OnSelectedIndexChanged="OnSelectedIndexChanged" Height="150px" Style="word-break: keep-all; word-wrap: normal; margin-left: auto; margin-right: auto; width: auto; margin-top: 0px;" AllowSorting="True" CellSpacing="3">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="TripID" HeaderText="id" />
<asp:BoundField DataField="EmployeeName" HeaderText="Όνομα" />
<asp:BoundField DataField="FromDate" HeaderText="Ημερομηνία-(από)" />
<asp:BoundField DataField="ToDate" HeaderText="Ημερομηνία-(μέχρι)" />
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" Font-Names="Tahoma" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
<asp:LinkButton ID="LinkButton1" runat="server"></asp:LinkButton>

</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">

$(function () {

$("[id*=GridView1] td").hover(function () {
$("td", $(this).closest("tr")).addClass("hover_row");
}, function () {
$("td", $(this).closest("tr")).removeClass("hover_row");
});
});

</script>
</form>





In this code GridView hover works, autocomplete doesn't!

Answer Source

You are referencing JQuery twice, remove the bottom one:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Also I would suggest to move the autcomplete code to bottom as well, so you would have one load method - remember $(function() { is a shorthand for $( document ).ready() so declaring it once is cleaner/better (source) :

    <script type="text/javascript">

        $(function () {

             $("[id*=txtSearch]").autocomplete({ source: '<%=ResolveUrl("~/Search_CS.ashx" ) %>' });

            $("[id*=GridView1] td").hover(function () {
                $("td", $(this).closest("tr")).addClass("hover_row");
            }, function () {
                $("td", $(this).closest("tr")).removeClass("hover_row");
            });
        });

    </script>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download