jQuery Autocomplete with C# and SQL Server Database

Question

I am trying to use jQuery autocomplete on my dynamically created textboxes. this is my first time working with jQuery so I am not so sure about where I am getting off... My ASMX page code is working fine & generating result as asked but my javascript of autocomplete is not calling the page at all (tried in debug) and its not giving me error message either... Help Please!!

EDIT : I am still having error "ASP.NET Ajax client-side framework failed to load."

<script src="/ScriptResource.axd?d=dRAn80ZulnXIbHUFZAi0thqEaFFdeMlwAh6uA_ciIINTs7jTUe13ADvaDyjOl6tPSr-1TN4Bqt6MFVjznyiXABGNxDhFk5_-02EGxOku0B-Tim4ebG59zhvC6DdsHV11uoIY024U1o0IMngrTBO45x9tPeG-PiyEUPEypUFf795T-3SY0&amp;t=ffffffffb868b5f4" type="text/javascript"></script>
<script type="text/javascript">
<!--
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');

Upon typing in the textbox, I get the pop up error :

Ajax error: researcher_list.asmx/FetchResList : error : undefined : Internal Server Error : 500

EDITED CODE :

Aspx Code :

$(function() {
    $('input:text').autocomplete({
        source: function(request, response) {
            var pString = '{ "resName": "' + request.term + '" }';
            $.ajax({
                url: "researcher_list.asmx/FetchResList", /* same root as the page? */
                data: pString,
                dataType: "jsond",
                type: "POST",
                contentType: "application/json", /* simplify */
                converters: {/* avoid the d or no d issue, works with 3.5 or prior this way */
                    "json jsond": function(msg) {
                        return msg.hasOwnProperty('d') ? msg.d : msg;
                    }
                },
                success: function(data) {/* assumes data always returned and it IS called item in the JSON */
                    response($.map(data, function(item) {
                        return {
                            value: item.name,
                            label: item.name
                        }
                    }))
                },
                error: function(xhr, textStatus, errorThrown) {
                    var errorMessage = "Ajax error: " + this.url + " : " + textStatus + " : " + errorThrown + " : " + xhr.statusText + " : " + xhr.status;

                    if (xhr.status != "0" || errorThrown != "abort") {
                        alert(errorMessage);
                    }
                }
            });
        },
        minLength: 2
    });
});

Asmx Code :

[WebService(Namespace = "http://localhost/v2/pages/main.aspx")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 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 researcher_list : System.Web.Services.WebService
{
    [WebMethod]
    public List<DBResearcher.Summary> FetchResList(string resName)
    {
        //SqlConnection connection;
        //SqlCommand command = null;
        //SqlDataReader myReader = null;
        //string sql;
        //StringBuilder sb = new StringBuilder();
        var tempSum = new DBResearcher();
        var allRes = DBResearcher.GetAllResearcher()
                        .Where(m => m.name.ToLower().Contains(resName.ToLower()));
        return allRes.ToList();
    }

    public static string[] GetCustomerNames()
    {
        string[] data = new string[] { "Andrew", "Ramona", "Russ", "Russell",  Raymond" };

        return data;

    }
}

web.config file :

<httpHandlers>
  <!-- AJAX.Net Configuration -->
  <add verb="GET,POST" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax"/>
  <remove verb="*" path="*.asmx"/>
  <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
  <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
  <add verb="GET,HEAD" path="ScriptResource.axd" validate="false" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
</httpHandlers>

<!-- HTTP MODULES -->

 <httpModules>
  <!-- doesn't work if we restrict it by <location path=...> for some reason,
            so we have no choice but to do this at the root level. -->
  <!--<add name="HttpUploadModule" type="AssistedSolutions.SlickUpload.HttpUploadModule, AssistedSolutions.SlickUpload" />
    -->
  <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>

 </httpModules>

EDIT - Error while running asmx page on its own

Stack Trace:

[HttpException (0x80004005): Failed to Execute URL.]
   System.Web.Hosting.ISAPIWorkerRequestInProcForIIS6.BeginExecuteUrl(String url, String method, String childHeaders, Boolean sendHeaders, Boolean addUserIndo, IntPtr token, String name, String authType, Byte[] entity, AsyncCallback cb, Object state) +2008569
   System.Web.HttpResponse.BeginExecuteUrlForEntireResponse(String pathOverride, NameValueCollection requestHeaders, AsyncCallback cb, Object state) +393
   System.Web.DefaultHttpHandler.BeginProcessRequest(HttpContext context, AsyncCallback callback, Object state) +220
   System.Web.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +8699714
   System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +155

try to change data: "{ 'mail': '" + request.term + "' }", to data: '{ "resName": "' + request.term + '" }', — Mark Schultheiss
– Mark Schultheiss, Commented Jan 23, 2012 at 22:16
No change.. Its still the same. The ASMX file is still not being called. — Bhrugesh Patel
– Bhrugesh Patel, Commented Jan 23, 2012 at 22:22
No I meant no change in the result...even after changing the quotes & name, its still not working... I know I am doing something very stupid.. just cant figure that stupid thing out — Bhrugesh Patel
– Bhrugesh Patel, Commented Jan 23, 2012 at 22:32
You should be able to put in http://localhost/mycorrectpath/researcher_list.asmx (or whatever path needs to be after the localhost prior to the researcher_list really) and see the method listed in your browser on your development machine. — Mark Schultheiss
– Mark Schultheiss, Commented Jan 24, 2012 at 18:35

Mark Schultheiss · Accepted Answer · 2012-01-24 18:04:16Z

1

My answer is built based on an asp.net 3.5 solution and jQuery 1.7.1 version assumption. Much has been already covered by other posters. Yours may vary by version. This is simply an attempt to put comments in an answer with a completed script and server side notes.

Have you decorated your class thus:

[WebService(Namespace = "http://mysite.com/researcher_list/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ToolboxItem(false)]
[ScriptService]
public class researcher_list : WebService
{

Decorate your method: (use the EnableSession IF you need that...)

[WebMethod(EnableSession = true)]
public List<DBResearcher.Summary> FetchResList(string resName)        {

cleanup of the client script:

$('input:text').autocomplete({
    source: function(request, response) {
        var pString = '{ "resName": "' + request.term + '" }';
        $.ajax({
            url: "researcher_list.asmx/FetchResList",
            /* same root as the page? */
            data: pString,
            dataType: "jsond",
            type: "POST",
            contentType: "application/json",
            /* simplify */
            converters: { /* avoid the d or no d issue, works with 3.5 or prior this way */
                "json jsond": function(msg) {
                    return msg.hasOwnProperty('d') ? msg.d : msg;
                }
            },
            success: function(data) { /* assumes data always returned and it IS called item in the JSON */
                response($.map(data, function(item) {
                    return {
                        value: item.name,
                        label: item.name
                    };
                }));
            },
            minLength: 2,
            error: function(xhr, textStatus, errorThrown) {
                var errorMessage = "Ajax error: " + this.url + " : " + textStatus + " : " + errorThrown + " : " + xhr.statusText + " : " + xhr.status;
                if (xhr.status != "0" || errorThrown != "abort") {
                    alert(errorMessage);
                }
            }
        });
    }
});

IN ADDITION to the above, there are Web.config settings in asp.net that need set to get a web service to function - assumption here is you have done the research and have that working. IF NOT, suggestion is create a simple method that returns the current time as a string with NO parameters (data:"{}",) and get that via ajax to ensure it works before the complexity of the autocomplete is layered.

edited Jan 24, 2012 at 18:04

answered Jan 24, 2012 at 16:27

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bhrugesh Patel Over a year ago

I checked config file many times.. Everything seems to be in the order.. The script above is giving me the missing bracket error. I added the missing bracket but its still there. May be I am messing on syntax? P.S. - The asmx file is already decorated

Bhrugesh Patel Over a year ago

I got the missing bracket error.. I ended up putting a semi-colon with it thinking its from one level above... but the error if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.'); is still there though... which in turn I believe, gives this error "Ajax error: researcher_list.asmx/FetchResList : error : undefined : Internal Server Error : 500"

Mark Schultheiss Over a year ago

I ran the script snippet through jslint and fixed a couple of minor issues with my typing.

Troy Barlow · Accepted Answer · 2012-01-24 15:03:10Z

1

Try marking your method with a WebMethod attribute like this:

[WebMethod]
public static List<DBResearcher.Summary> FetchResList(string mail)
{
...
}

Also, your parameters will need to match, so change resName to mail.

You can also merge your jQuery each into the autocomplete selector:

$('input:text').autocomplete(...)

Edit:

Try this code:

$('input:text').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "researcher_list.asmx/FetchResList",
            data: "{ 'resName': '" + request.term + "' }",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataFilter: function (data) { return data; },
            success: function (data) {
                response($.map(data.d, function (item) {
                    return {
                        value: item.name
                    }
                }))
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
    }, minLength: 2
});

edited Jan 24, 2012 at 15:03

answered Jan 23, 2012 at 22:05

Troy Barlow

3132 silver badges9 bronze badges

4 Comments

Bhrugesh Patel Over a year ago

it is a webmethod, i just didnt include that code..also if i use static javascript array, it is working for every dynamic box.. My problem is that the script is not calling the asmx file

Troy Barlow Over a year ago

You need a { before the "source". Are you noticing any syntax errors in debugger?

Bhrugesh Patel Over a year ago

I think the one you are talking about is after source: function(request, response)

Mark Schultheiss Over a year ago

@Troy, nice catch on the missing curly brace before the source

Collectives™ on Stack Overflow

jQuery Autocomplete with C# and SQL Server Database

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related