Dave KIlby
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.
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>
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>© <%: DateTime.Now.Year %> </p>
</footer>
</div>
</form>
</body>
</html>
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>
Thanks
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.
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.
1. JQuery library - multiple declarations for different versions which are 1.91(obsolete version) and 3.4.1.
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">
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>
ASKER
I did all of the above and still doesn't work - when i run the alert shows the textbox name
Great. Have you applied ResolveUrl? Check if you have refer the ashx correctly now.
Example:
Example:
source: '<%=ResolveUrl("~/Scripts/CustomerNameHandler.ashx" )%>
ASKER
Here are the changes I made - but unfortunately still now working.
To the default page link to the master page i added this
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>
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" />
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.
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>
ASKER
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.
Noted. Check whether your ashx path has been called correctly?
alert('<%=ResolveUrl("CustomerNameHandler.ashx")%>');
or
alert('<%=ResolveUrl("~/CustomerNameHandler.ashx")%>');
ASKER
Here are the screenshots of both alerts
The suggested code should solve the fix...
How about try the full path and see the difference?
Example:
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>
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" />
ASKER
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
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?
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>
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)?
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)?
ASKER
here is the rendered html from the webform
And the HTML from the page linked to Master Page
<!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>
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>© 2021 - My ASP.NET Application</p>
</footer>
</div>
</form>
</body>
</html>
Noted. Can you REMOVE this line from your web.config file?
More information:
https://weblogs.asp.net/scottgu/gotcha-don-t-use-xhtmlconformance-mode-legacy-with-asp-net-ajax
<xhtmlConformance mode="Legacy"/>
More information:
https://weblogs.asp.net/scottgu/gotcha-don-t-use-xhtmlconformance-mode-legacy-with-asp-net-ajax
ASKER
i do not have this line in my web.config file
Noted. If i remove the rendered name manually, it is working fine.
Add this script to override your control name same with the ID.
name="ctl00$MainContent$txtName"
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>
It should be working fine after the fix.
ASKER
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
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
ASKER
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
ASKER
This page works
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>
</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>
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>
Noted. I've noticed the asmx file is different between these 2 pages.
eg:
Workable version
Your version
Can you check whether the file is correct?
eg:
Workable version
Your version
Can you check whether the file is correct?
ASKER
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?
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>
ASKER
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
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();
}
}
}
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:
Output:
When I type "e", the autocomplete list come out with the entered character as screenshoted below:
Now, the focus is to troubleshoot anything missed setup in ASMX file source.
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>
Output:
When I type "e", the autocomplete list come out with the entered character as screenshoted below:
Now, the focus is to troubleshoot anything missed setup in ASMX file source.
ASKER
This worked for me too - when i run the ASMX and enter a letter in teh prefix it returns values
Thaks
Thaks
Noted. Can you make a clean master page like how to example show?
Master.master
Default.aspx
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....
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>
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>
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....
ASKER
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>
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.
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/
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/
ASKER
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
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
ASKER
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 ?
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.
Try a simple web service call from your project. See anything miss out for the webservice setup.
ASKER
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.
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.
<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>
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>
ASKER
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>
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>
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Yes - finally - thank you for all your help and patience working through this to a solution
You are welcome, Dave.
Open in new window
To
Open in new window