Link to home
Start Free TrialLog in
Avatar of Dave KIlby
Dave KIlbyFlag for Canada

asked on

ASP.net JQuery AutoComplete not working in Master Page

I am trying to add autocomplete to a textbox using jquery - when i test in a normal webform.aspx it works no problem, but when i try to implement on a page that has a master page it does not work.

How can i get it to work with pages with master pages.

Here is the code on the webform that works totally fine.

!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-3.4.1.js"></script>
    <script src="jquery/jquery-ui.js"></script>
    <link href="jquery/jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            $('#txtName').autocomplete({
                source: 'CustomerNameHandler.ashx'
            });
        });
    </script>
</head>
<body style="font-family: Arial">
    <form id="form1" runat="server">
        Student Name :
        <asp:TextBox ID="txtName" runat="server">
        </asp:TextBox>
    </form>
</body>
</html>

Open in new window

Then i try adding to pages with Master page - here is code on the Masterpage

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - IFT - CTG Collections Portal</title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>

    <webopt:BundleReference runat="server" Path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

    <style>
        .centerText {
            text-align: center;
        }
    </style>

    <script type="text/javascript">
        function isFloatNumber(e, t) {
            var n;
            var r;
            if (navigator.appName == "Microsoft Internet Explorer" || navigator.appName == "Netscape") {
                n = t.keyCode;
                r = 1;
                if (navigator.appName == "Netscape") {
                    n = t.charCode;
                    r = 0
                }
            } else {
                n = t.charCode;
                r = 0
            }
            if (r == 1) {
                if (!(n >= 48 && n <= 57 || n == 46)) {
                    t.returnValue = false
                }
            } else {
                if (!(n >= 48 && n <= 57 || n == 0 || n == 46)) {
                    t.preventDefault()
                }
            }
        }

    </script>

    <style type="text/css">
        .hideGridColumn {
            display: none;
        }
    </style>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <script src="Scripts/jquery-3.4.1.js"></script>
    <script src="jquery/jquery-ui.js"></script>
    <link href="jquery/jquery-ui.css" rel="stylesheet" />


</head>
<body>
    <form runat="server">
        <asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>

        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" runat="server" href="~/"></a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a runat="server" href="~/"></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">

           </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <p>&copy; <%: DateTime.Now.Year %> </p>
            </footer>
        </div>

    </form>
</body>
</html>


Open in new window

And finally the code on the page linked to the master page

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

    <script type="text/javascript">
        $(document).ready(function () {
            $('#txtName').autocomplete({
                source: 'CustomerNameHandler.ashx'
            });
        });
    </script>

    <asp:TextBox ID="txtName" runat="server" class="form-control rounded-0" ClientIDMode="Static" ></asp:TextBox></td>
</asp:content>

Open in new window

Thanks
Avatar of David H.H.Lee
David H.H.Lee
Flag of Malaysia image

Rename your textbox id .

<asp:TextBox ID="TextBox1"...

Open in new window


To

<asp:TextBox ID="txtName"...

Open in new window

Avatar of Dave KIlby

ASKER

my Textbox is named txtName - guess it didnt copy when I entered the code in my question
Quick check the following items that need further clarification from you:

1. JQuery library - multiple declarations for different versions which are 1.91(obsolete version) and 3.4.1.
    User generated image     
       Remove the old version 1.9.1 reference which may give conflict for the jQuery library.
     
2.Check whether your control rendered client ID is matching with your jQuery selector ID.
     <script type="text/javascript">
        $(document).ready(function () {
            alert("<%=txtName.ClientID%>");
        });
    </script><script type="text/javascript">

Open in new window

3. Use ResolveUrl to refer your file since you're putting it at the control page refer master page. Otherwise, you can maintain your existing Jquery script but refer at the master page itself.
<script type="text/javascript">
         $(document).ready(function () {
            $('#<%=txtName.ClientID%>').autocomplete({
                source: '<%=ResolveUrl("CustomerNameHandler.ashx" ) %>'
            });
        });
    </script>

Open in new window

       
I did all of the above and still doesn't work - when i run the alert shows the textbox name

User generated image
Great. Have you applied ResolveUrl? Check if you have refer the ashx correctly now.

Example:
source: '<%=ResolveUrl("~/Scripts/CustomerNameHandler.ashx" )%>

Open in new window

Here are the changes I made - but unfortunately still now working.

To the default page link to the master page i added this

             <script type="text/javascript">
                 $(document).ready(function () {
                     alert("<%=txtName.ClientID%>");
             });
             </script>

        <script type="text/javascript">
            $(document).ready(function () {
                $('#<%=txtName.ClientID%>').autocomplete({
                        source: '<%=ResolveUrl("CustomerNameHandler.ashx" ) %>'
                    });
                 });
        </script>

Open in new window

 on the master page i removed the link to the old js file

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <script src="Scripts/jquery-3.4.1.js"></script>
    <script src="jquery/jquery-ui.js"></script>
    <link href="jquery/jquery-ui.css" rel="stylesheet" />

Open in new window


Can you screenshot where you store your CustomerNameHandler.ashx file in your project folder?

Secondly, put your entire original jquery source code below inside master page instead.
It should be work as expected before finding the way to refer the ashx file correctly in the page that refers the master page.
<script type="text/javascript">
        $(document).ready(function () {
            $('#txtName').autocomplete({
                source: 'CustomerNameHandler.ashx'
            });
        });
    </script>

Open in new window

put the code in the Master page and didnt make any difference - here is screen shot of file folder - the Webform1.aspx is the test file i used without Master Page that works totally fine.

User generated image
Noted. Check whether your ashx path has been called correctly?

alert('<%=ResolveUrl("CustomerNameHandler.ashx")%>');

or

alert('<%=ResolveUrl("~/CustomerNameHandler.ashx")%>');

Open in new window


Here are the screenshots of both alerts

User generated image
User generated image
The suggested code should solve the fix...
How about try the full path and see the difference?
Example: 
<script type="text/javascript">
            $(document).ready(function () {
                $('#<%=txtName.ClientID%>').autocomplete({
                        source: 'http://localhost:44382/yourproject/CustomerNameHandler.ashx'
                    });
                 });
        </script>

Open in new window

Note: http://localhost:44382/yourproject/CustomerNameHandler.ashx is your actual accessible full path. Replace yourproject variable with your actual project name.
Lastly, use ResolveUrl to ensure you can refer the jquery libraries/css correctly since you have mention even put the previous jquery function inside the master page also make no different.
<script src='<%=ResolveUrl("~/Scripts/jquery-3.4.1.js")%>'></script>
<script src='<%=ResolveUrl("~/jquery/jquery-ui.js")%>'></script>
<link href='<%=ResolveUrl("~/jquery/jquery-ui.css")%>' rel="stylesheet" />

Open in new window




still doesnt work - made both sets of changes and still nothing.
Have you tried my comment at https://www.experts-exchange.com/questions/29220535/ASP-net-JQuery-AutoComplete-not-working-in-Master-Page.html#a43316213 ?
What is the  your workable link for ashx file? eg: http://localhost:44382/yourproject/CustomerNameHandler.ashx 

<script type="text/javascript">
    $(document).ready(function() {
        $("#<%=txtName.ClientID%>").autocomplete('<%=ResolveUrl("~/CustomerNameHandler.ashx")%>');
    });     
</script>

Open in new window


May I know the .net version framework that you're using for your testing environment?
Do you have a public URL for my quick inspection?
Can you share the rendered HTML code for WebForm1.aspx and the page linked to the master page?

I want to inspect what's different for the rendered HTML source code between this 2 HTML rendered source code pages (which WebForm1.aspx that working fine for autocomplete function)?
here is the rendered html from the webform

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


</title>
    <script src="Scripts/jquery-3.4.1.js"></script>
    <script src="jquery/jquery-ui.js"></script>
    <link href="jquery/jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            $('#txtName').autocomplete({
                source: 'CustomerNameHandler.ashx'
            });
        });
    </script>
</head>
<body style="font-family: Arial">
    <form method="post" action="./WebForm1" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="WjVjo/YaN0/hIXMtgS2xsWVvTjgIR4J0MEHiJ/pIijumUtXQ2U5hkmytTKV3uTCBZEuqKoBCT1h86Hdq0sPoZRhjH1pw2asMcTpMZI1li+Y=" />
</div>


<div class="aspNetHidden">


   <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="B6E7D48B" />
   <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="NyvqXaF9nycIvDW7iWg6LmEkU4eoysUFRuDsL/Dnb9Gg9IkYQNha1Ex29Nto46/pAoHOjqpuD5MXJIFn/0Z/UQU9AHzAqKunLxnRt+uSjIp71ADevGAS3+0zT9aD8ghd" />
</div>
        Customer Name :
        <input name="txtName" type="text" id="txtName" />
    </form>
</body>
</html>

Open in new window


And the HTML from the page linked to Master Page




<!DOCTYPE html>

<html lang="en">
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>
   Home Page - My ASP.NET Application
</title><script src="/Scripts/modernizr-2.8.3.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/Site.css" rel="stylesheet"/>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <script src="Scripts/jquery-3.4.1.js"></script>
    <script src="jquery/jquery-ui.js"></script>
    <link href="jquery/jquery-ui.css" rel="stylesheet" />

        <script type="text/javascript">
        $(document).ready(function () {
            $('#txtName').autocomplete({
                source: 'CustomerNameHandler.ashx'
            });
        });
        </script>

</head>
<body>
    <form method="post" action="./" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="GYGOE8XMCnR8Cl39nUoCANdTg02RCRtr1WX4lulOXALxz6XZBRduZionhBO+5LnYvql1b6kY+nYAY0xANF1sJvuM50iF1YvBzkBn6xahpJA=" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
    theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>



<script src="/bundles/MsAjaxJs?v=D6VN0fHlwFSIWjbVzi6mZyE9Ls-4LNrSSYVGRU46XF81" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>

<script src="Scripts/jquery-3.4.1.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
<script src="/bundles/WebFormsJs?v=N8tymL9KraMLGAMFuPycfH3pXe6uUlRXdhtYv8A_jUU1" type="text/javascript"></script>
<div class="aspNetHidden">

   <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
   <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="mapMJ80Z70GHjbsOJ4UrhJUo1/Ashvp0a8OYDKECsHgl83iA1vQRaPnnYg23sWXT5gtgRWub8lU6EMoR6uhi4gS9xwULFSrNmUxXnP71dtI5AYJHeYQJb26EuFL9ZOTU" />
</div>
        <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl09', 'ctl01', [], [], [], 90, 'ctl00');
//]]>
</script>


        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="./" class="navbar-brand">Application name</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="./"></a></li>
                        <li><a href="./"></a></li>
                        <li><a href="./"></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container body-content">
            

     Customer Name: <input name="ctl00$MainContent$txtName" type="text" id="txtName" class="form-control rounded-0" />


            <hr />
            <footer>
                <p>&copy; 2021 - My ASP.NET Application</p>
            </footer>
        </div>

    </form>
</body>
</html>


Open in new window


Noted.  Can you REMOVE this line from your web.config file?

<xhtmlConformance mode="Legacy"/> 

Open in new window


More information:
https://weblogs.asp.net/scottgu/gotcha-don-t-use-xhtmlconformance-mode-legacy-with-asp-net-ajax
i do not have this line in my web.config file
Noted. If i remove the rendered name manually, it is working fine.
name="ctl00$MainContent$txtName" 

Open in new window


Add this script to override your control name same with the ID.
<script type="text/javascript">
          $(document).ready(function(){
            $("#txtName").attr("name","txtName");//override the name same with ID
         
            $("#txtName").autocomplete({
                source: 'CustomerNameHandler.ashx'
            });
        });
      
      </script>

Open in new window

It should be working fine after the fix.
I found this article - AutoComplete

downloaded the source and tested it and it works, used the exact code in my project and doesnt work.

Is there a way to debug the javascript code, see it is if even firing when entering a letter in the textbox ?

I am going to try you code change
overriding the name didn't work - it makes no sense as the project i downloaded works, but when i create a blank project and create the same pages and copy the code and run it, doesn't work
This page works




<!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><title>

</title>
</head>
<body>
    <form name="aspnetForm" method="post" action="./" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTc0NDY1MTE5NGRk48A/2mrxSCsRui0a0Xnk518fsSEGsNdkWXmLgmvjQhs=" />
</div>

<div>

   <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
   <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAARMLec0/ddkG6pc/bz05A3DGgOkRs/x0nQgsaQ72sj7qppqXV3RiFHYX5XLHM7O8nHNH7hILR9lgXQfWCP5eBWL/Z+WgmxvgjmWvQRQX0+lxKV5vjCYgRk4yaxRoQ29pg0=" />
</div>
    <div>
        
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/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 type="text/javascript">
        $(function () {
            $("[id$=txtSearch]").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '/Service.asmx/GetCustomers',
                        data: "{ 'prefix': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.split('-')[0],
                                    val: item.split('-')[1]
                                }
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (e, i) {
                    $("[id$=hfCustomerId]").val(i.item.val);
                },
                minLength: 1
            });
        }); 
    </script>
    <input name="ctl00$ContentPlaceHolder1$txtSearch" type="text" id="ctl00_ContentPlaceHolder1_txtSearch" />
    <input type="hidden" name="ctl00$ContentPlaceHolder1$hfCustomerId" id="ctl00_ContentPlaceHolder1_hfCustomerId" />
    <br />
    <br />
    <input type="submit" name="ctl00$ContentPlaceHolder1$btnSubmit" value="Submit" id="ctl00_ContentPlaceHolder1_btnSubmit" />

    </div>
    </form>
</body>
</html>

Open in new window


This page doesnt work




<!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><title>

</title>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/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" />
</head>
<body>
    <form name="aspnetForm" method="post" action="./Default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTc0NDY1MTE5NGRk48A/2mrxSCsRui0a0Xnk518fsSEGsNdkWXmLgmvjQhs=" />
</div>

<div>

   <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
   <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAARMLec0/ddkG6pc/bz05A3D0bw7OTl0Nda6He34GqZ58sp76Ga+hUEg1lbhq7ia3df4IcjYoaGuA6R78NuEHgsNfdAJ5n9C+YZtQUjbRSndZ+R7dYLF1LKGf7RL1doJpuw=" />
</div>
    <div>
        

    <script type="text/javascript">
        $(function () {
            $("#txtName").attr("name", "txtName");//override the name same with ID
            $("[id$=txtName]").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '/wsCustomerInfo.asmx/GetCustomers',
                        data: "{ 'prefix': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.split('-')[0],
                                    val: item.split('-')[1]
                                }
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (e, i) {
                    $("[id$=hfCustomerId]").val(i.item.val);
                },
                minLength: 1
            });
        });
    </script>
    <input name="ctl00$MainContent$txtName" type="text" id="ctl00_MainContent_txtName" />
    <input type="hidden" name="ctl00$MainContent$hfCustomerId" id="ctl00_MainContent_hfCustomerId" />
    <br />
    <br />
    <input type="submit" name="ctl00$MainContent$btnSubmit" value="Submit" id="ctl00_MainContent_btnSubmit" />

    </div>
    </form>
</body>
</html>


Open in new window

Noted. I've noticed the asmx file is different between these 2 pages.
eg:

Workable version

User generated image
Your version

User generated image
Can you check whether the file is correct?

Yes the file is correct - just different name of the webservice in the new project, i changed it to Service to mirror and still no change
I've tried to trigger on click event and it is working fine. So, it will be something not right at Service.asmx that need further inspection.

Can you share the Service.ASMX file for quick inspection?

<script type="text/javascript">
        $(function () {
          function test1(){
           alert('Test');
         }
         
         $("[id$=txtName]").click(test1);

         $("[id$=txtName]").autocomplete="on';
         
            $("[id$=txtName]").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '/wsCustomerInfo.asmx/GetCustomers',
                        data: "{ 'prefix': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.split('-')[0],
                                    val: item.split('-')[1]
                                }
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (e, i) {
                    $("[id$=hfCustomerId]").val(i.item.val);
                },
                minLength: 1
            });
        });
    </script>

Open in new window

When i use the above code, should something happen when i enter a letter in the textbox ? apart from the autocomplete?  Nothing happened.

here is code from the Service.amx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Script.Services;
using System.Data;

namespace autoCompleteTest
{
    /// <summary>
    /// Summary description for Service_CS
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    [System.Web.Script.Services.ScriptService]
    public class Service : System.Web.Services.WebService
    {   

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public string[] GetCustomers(string prefix)
        {
            List<string> customers = new List<string>();
            string cs = ConfigurationManager.ConnectionStrings["contstr"].ConnectionString;

            using (SqlConnection con = new SqlConnection(cs))
            {
                SqlCommand cmd = new SqlCommand("spGetCustomerNames", con);
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.Add(new SqlParameter()
                {
                    ParameterName = "@term",
                    Value = prefix
                });

                con.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        customers.Add(string.Format("{0}-{1}", sdr["CustomerName"], sdr["ContractID"]));
                    }
                }
                con.Close();
            }
            return customers.ToArray();
        }
    }
}


Open in new window

Noted. Can you check whether the configuration in the database is workable as expected?
Example:
spGetCustomerNames  - check if the stored procedure set up correctly to return the field for "CustomerName" and "ContractID" based on entered prefix "@term" as shown in your ASMX file.

I have quick amend own LoadNameList as the source, the autocomplete() function is showing the output as expected.

HTML Source:
<!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><title>

</title>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/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" />
</head>
<body>
    <form name="aspnetForm" method="post" action="./Default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTc0NDY1MTE5NGRk48A/2mrxSCsRui0a0Xnk518fsSEGsNdkWXmLgmvjQhs=" />
</div>

<div>

   <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
   <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAARMLec0/ddkG6pc/bz05A3D0bw7OTl0Nda6He34GqZ58sp76Ga+hUEg1lbhq7ia3df4IcjYoaGuA6R78NuEHgsNfdAJ5n9C+YZtQUjbRSndZ+R7dYLF1LKGf7RL1doJpuw=" />
</div>
    <div>
        

    <script type="text/javascript">
        $(function () {
          var LoadNameList=[
               "Ali",
            "Ben",
               "Catherine",
               "Durban",
            "Dave",
               "Denmark",
               "England",
               "Fan"   
            ];
         
          $("[id$=txtName]").autocomplete({
                source: LoadNameList,
                minLength: 1
            });
        });
    </script>
    <input name="ctl00$MainContent$txtName" type="text" id="ctl00_MainContent_txtName" />
    <input type="hidden" name="ctl00$MainContent$hfCustomerId" id="ctl00_MainContent_hfCustomerId" />
    <br />
    <br />
    <input type="submit" name="ctl00$MainContent$btnSubmit" value="Submit" id="ctl00_MainContent_btnSubmit" />

    </div>
    </form>
</body>
</html>

Open in new window


Output:
When I type "e", the autocomplete list come out with the entered character as screenshoted below:
User generated image
Now, the focus is to troubleshoot anything missed setup in ASMX file source.



This worked for me too - when i run the ASMX and enter a letter in teh prefix it returns values

User generated image

User generated image
Thaks
Noted. Can you make a clean master page like how to example show?

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

<!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>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Open in new window


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

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/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 type="text/javascript">
        $(function () {
            $("[id$=txtName]").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '<%=ResolveUrl("~/Service.asmx/GetCustomers") %>',
                        data: "{ 'prefix': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.split('-')[0],
                                    val: item.split('-')[1]
                                }
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (e, i) {
                    $("[id$=hfCustomerId]").val(i.item.val);
                },
                minLength: 1
            });
        }); 
    </script>
    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
    <asp:HiddenField ID="hfCustomerId" runat="server" />
    <br />
    <br />
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="Submit" />
</asp:Content>

Open in new window


The given source code sample above is working fine as mentioned in your comment, right?
https://www.experts-exchange.com/questions/29220535/ASP-net-JQuery-AutoComplete-not-working-in-Master-Page.html#a43317211 

Those the source code not here is probably conflict with your existing jquery library (most of the time).

If yes, please share your latest master page and the aspx source code here to check that conflicted source code....




create a new master page and content page, and still didnt work - here is the source code.



<!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><title>

</title>
</head>
<body>
    <form name="aspnetForm" method="post" action="./Index.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTUzNDc0MzQ2OGRkMDyHm/79spijaDMGwS0yUZML/rNVByUrLG2q/4m74O0=" />
</div>

<div>

   <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="90059987" />
   <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAOo9JR2MJkGbukwCkYtq0O5Ves4AfNrEwZQ25wFmngHn5pqXV3RiFHYX5XLHM7O8nEi+ElELcFWojfeG1LHgtyh36mumQnxi88f3UsJGX1kqQ==" />
</div>
    <div>
        
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/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 type="text/javascript">
        $(function () {
            $("[id$=txtName]").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '/Service.asmx/GetCustomers',
                        data: "{ 'prefix': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.split('-')[0],
                                    val: item.split('-')[1]
                                }
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (e, i) {
                    $("[id$=hfCustomerId]").val(i.item.val);
                },
                minLength: 1
            });
        }); 
    </script>
    <input name="ctl00$ContentPlaceHolder1$txtName" type="text" id="ctl00_ContentPlaceHolder1_txtName" />
    <input type="hidden" name="ctl00$ContentPlaceHolder1$hfCustomerId" id="ctl00_ContentPlaceHolder1_hfCustomerId" />
    <br />
    <br />
    

    </div>
    </form>
</body>
</html>

Open in new window

This is getting suspicious...
I can't see any different rename the textbox from "txtSearch" to "txtName" can't show the result based on the downloaded source code.

..downloaded the source and tested it and it works, used the exact code in my project and doesnt work.
So, it only works with the sample source code that downloads only?
https://www.aspsnippets.com/Articles/Implement-jQuery-AutoComplete-in-Content-Page-with-Master-Page-in-ASPNet.aspx

Demo page:
https://www.aspsnippets.com/demos/1238/


User generated image
Correct if i download the code and open the project it works, but if i copy the code into a new project it doesnt work -makes no sense to me - i guess there is something wrong with the project i am creating, and simply wont work - i really appreciate all your help, with this - not sure what else to even try anymore.
Unless you can share your complete project source code for further inspection which current code conflict with this testing...

Here is the suggestion to relook again your scenario.
1. Make sure your downloaded project is working fine.
2. Create your new master. page to copy the source code exactly how the existing source code work.
3. The most of the suspected part is whether the autocomplete() function is call out correctly or not. You may replace the list as using my dummy data. If it is working fine, then it is something not working fine with the ajax.autocomplete() function to get the filtered result from asmx file.

Dummy data for the name list:
https://www.experts-exchange.com/questions/29220535/ASP-net-JQuery-AutoComplete-not-working-in-Master-Page.html#a43317546 

So i create a brand new project to test so there is minimal code.

When i try with the dummy data it works fine when i switch to pulling from the webservice it doesn't, even though i know the webservice works.  Is there anyway of sharing the project with you - or can we try getting the data with a different method to test further ?


Great. We can focus on solving this webservice issue.

Try a simple web service call from your project. See anything miss out for the webservice setup.


i test calling the webservice and returned results, i first tested in a normal webform, and then a content page with master page - it showed the alert with values for both - this is the test code i used.

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "Service.asmx/GetCustomers",
                data: "{'prefix':'Me'}",
                contentType: "application/json",
                datatype: "json",
                success: function (responseFromServer) {
                    alert(responseFromServer.d)
                }
            });
        });
    </script>

Open in new window


To me it seems to be something to do with the textbox firing the autocomplete or getting the value from the textbox to send the value to the webservice.
To me it seems to be something to do with the textbox firing the autocomplete or getting the value from the textbox to send the value to the webservice. 
Yes. Check if you can show all the messages as defined in 3 checkpoints below.
<script type="text/javascript">
        $(function () {
            
            $("[id$=txtName]").autocomplete({
                source: function (request, response) {
                    alert('Start...');//checkpoint 1

                    $.ajax({
                        url: '<%=ResolveUrl("~/Service.asmx/GetCustomers") %>',
                        data: "{'prefix':'" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            alert('Success...');//checkpoint 2
 
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.split('-')[0],
                                    val: item.split('-')[1]
                                }
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (e, i) {
                    alert('Search='+i.item.val); //checkpoint 3
  
                    $("[id$=hfCustomerId]").val(i.item.val);
                },
                minLength: 1
            });
        });     </script>

Open in new window

None of the Alerts popped up so i changed this line

       <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

Open in new window

with these
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Open in new window

and it worked - i am going to move to my original project and see if i can get it to work with these links
ASKER CERTIFIED SOLUTION
Avatar of David H.H.Lee
David H.H.Lee
Flag of Malaysia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Yes - finally - thank you for all your help and patience working through this to a solution
You are welcome, Dave.