jQuery AutoComplete and DatePicker not working together on same page

gowri

SOLVED CLOSED ACTIVE ANSWERED
User: gowri
Posted: on Jun 23, 2014 03:04 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 6824

1) I'm very sorry i tried as ur example code but didnt work for me plz look at my code and let me know if any changes have to made

2) Master page as below,

if i delete the scripts and links in body section of master page datepicker is working and autocomplete is not working, if i place those 3 line autocomplete is working but datepicker is not working.

<%@ Master 
    Language="C#" 
    AutoEventWireup="true" 
    CodeBehind="AutoLoanMasterPage.Master.cs" 
    Inherits="SA.AutoLoan.Web.AutoLoanMasterPage" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
      
<head runat="server">
    <title></title>    
            <link href="Styles/autocomplete-jquery.autocomplete.css" rel="stylesheet" />
            <link href="Styles/MasterStyles.css" rel="stylesheet" />
            
            <link href="Styles/datepicker-jquery-ui-1.10.4.custom.css" rel="stylesheet" />
            <link href="Styles/datepicker-jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />

            <script src="Scripts/datepicker-jquery-1.10.2.js"></script>
            <script src="Scripts/datepicker-jquery-ui-1.10.4.custom.js"></script>
            <script src="Scripts/datepicker-jquery-ui-1.10.4.custom.min.js"></script>
   
            <script src="Scripts/autocomplete-jquery-1.6.2.min.js" type="text/javascript"></script>
            <script src="Scripts/autocomplete-jquery.autocomplete.js" type="text/javascript"></script>
      
    <script type="text/javascript">
        $(document).ready(function () { 
            $(".searchBox").autocomplete('AutoCompleteHandler.ashx');        
        });
    </script>

    <asp:ContentPlaceHolder ID="DatePickerScriptsAndStyles" runat="server"></asp:ContentPlaceHolder>

</head>
    <body runat="server">

        <link href='<%=ResolveUrl("Styles/autocomplete-jquery.autocomplete.css")%>' rel="stylesheet" />
        <script src='<%=ResolveUrl("Scripts/autocomplete-jquery-1.6.2.min.js")%>' type="text/javascript"></script>
        <script src='<%=ResolveUrl("Scripts/autocomplete-jquery.autocomplete.js")%>' type="text/javascript"></script>

3) content page

<%@ Page 
    Language="C#" 
    MasterPageFile="~/AutoLoanMasterPage.Master"
    AutoEventWireup="true" 
    CodeBehind="MakeALoan.aspx.cs" 
    Inherits="SA.AutoLoan.Web.MakeALoan" 
    EnableEventValidation="false"
    Theme="Default"
      %>


<asp:Content ID="DatePickerContent" runat="server" ContentPlaceHolderID="DatePickerScriptsAndStyles">
    <script type="text/javascript">
        $(document).ready(function () {
            $("#<%= txtGuarantorDateOfBirth.ClientID %>").datepicker({ dateFormat: 'dd-mm-yy', changeYear: true, yearRange: "-100:+0", maxDate: '-1d' });
            $("#<%= txtApplicantDateOfBirth.ClientID %>").datepicker({ dateFormat: 'dd-mm-yy', changeYear: true, yearRange: "-100:+0", maxDate: '-1d' });
            $("#<%= txtOpeningDate.ClientID %>").datepicker({ dateFormat: 'dd-mm-yy', changeYear: true, yearRange: "-100:+100" });
            $("#<%= txtTakenDate.ClientID %>").datepicker({ dateFormat: 'dd-mm-yy', changeYear: true, yearRange: "-100:+100" });
            $("#<%= txtReturnDate.ClientID %>").datepicker({ dateFormat: 'dd-mm-yy', changeYear: true, yearRange: "-100:+100" });
       });
    </script>
</asp:Content>

<asp:Content
    ID="LoansContent"
    runat="server"
    ContentPlaceHolderID="body">

4) At run time the code is as follows and getting the exception at the line 25

And the exception is,

Unhandled exception at line 19, column 13 in http://localhost:2791/MakeALoan.aspx

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'datepicker'

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
      
<head><title>

</title><link href="Styles/autocomplete-jquery.autocomplete.css" rel="stylesheet" /><link href="Styles/MasterStyles.css" rel="stylesheet" /><link href="Styles/datepicker-jquery-ui-1.10.4.custom.css" rel="stylesheet" /><link href="Styles/datepicker-jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />

            <script src="Scripts/datepicker-jquery-1.10.2.js"></script>
            <script src="Scripts/datepicker-jquery-ui-1.10.4.custom.js"></script>
            <script src="Scripts/datepicker-jquery-ui-1.10.4.custom.min.js"></script>
   
            <script src="Scripts/autocomplete-jquery-1.6.2.min.js" type="text/javascript"></script>
            <script src="Scripts/autocomplete-jquery.autocomplete.js" type="text/javascript"></script>
      
    <script type="text/javascript">
        $(document).ready(function () { 
            $(".searchBox").autocomplete('AutoCompleteHandler.ashx');        
        });
    </script>

    
    <script type="text/javascript">
        $(document).ready(function () {
            $("#body_WizardLoans_txtGuarantorDateOfBirth").datepicker({ dateFormat: 'dd-mm-yy', changeYear: true, yearRange: "-100:+0", maxDate: '-1d' });
            $("#body_WizardLoans_txtApplicantDateOfBirth").datepicker({ dateFormat: 'dd-mm-yy', changeYear: true, yearRange: "-100:+0", maxDate: '-1d' });
            $("#body_WizardLoans_txtOpeningDate").datepicker({ dateFormat: 'dd-mm-yy', changeYear: true, yearRange: "-100:+100" });
            $("#body_WizardLoans_txtTakenDate").datepicker({ dateFormat: 'dd-mm-yy', changeYear: true, yearRange: "-100:+100" });
            $("#body_WizardLoans_txtReturnDate").datepicker({ dateFormat: 'dd-mm-yy', changeYear: true, yearRange: "-100:+100" });
       });
    </script>
</head>
    <body>

        <link href='/Styles/autocomplete-jquery.autocomplete.css' rel="stylesheet" />
        <script src='/Scripts/autocomplete-jquery-1.6.2.min.js' type="text/javascript"></script>
        <script src='/Scripts/autocomplete-jquery.autocomplete.js' type="text/javascript"></script>

Download FREE API for Word, Excel and PDF in ASP.Net

Azim

0 2

Reply
ANSWER
User: Azim
Replied: on Jun 23, 2014 04:32 AM
Report

Reference

jQuery UI AutoComplete TextBox with Database in ASP.Net

Master Page

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
        type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
        rel="Stylesheet" type="text/css" />
    <script src='<%=ResolveUrl("scripts/jquery.autocomplete.js")%>' type="text/javascript"></script>
    <script src='<%=ResolveUrl("scripts/jquery.dynDateTime.min.js")%>' type="text/javascript"></script>
    <script src='<%=ResolveUrl("scripts/calendar-en.min.js")%>' type="text/javascript"></script>
    <link href="css/calendar-blue.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function () {
            $("#<%=txtSearch.ClientID%>").autocomplete('Search_CS.ashx');
        });       
    </script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Content Page

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

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script type="text/javascript">
        $(function () {
            $("[id*=TextBox1]").datepicker({
                showOn: 'button',
                buttonImageOnly: true,
                buttonImage: 'calender.png'
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <asp:TextBox ID="TextBox1" runat="server" ReadOnly="true"></asp:TextBox>
    <asp:Button ID="btnSave" runat="server" Text="Save" />
</asp:Content>

Screenhot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

jQuery AutoComplete and DatePicker not working together on same page

Company

Explore

Follow us

Contact Us