Autocomplete Jquery function returning Internal Server Error while calling webservice

Question

I am working on a project that requires to autocomplete textbox when some data is inputted and the data will be fetched from a database.

For this I created a webservice as -

    [WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//[ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[ScriptService]
public class SearchIssues : System.Web.Services.WebService
{
    //[ScriptMethod]      
    [WebMethod]
    public string[] GetCompletionList(string prefixText)
    {
        DataSet ds = null;
        DataTable dt = null;
        OracleConnection conn = null;
        StringBuilder sb = new StringBuilder();
        try
        {
            conn = new OracleConnection(WebConfigurationManager.ConnectionStrings["Conn"].ToString());
            sb.Append("select issueno from cet_sepcet where issueno like '");
            sb.Append(prefixText);
            sb.Append("%'");
            OracleDataAdapter daRes = new OracleDataAdapter(sb.ToString(), conn);
            ds = new DataSet();
            daRes.Fill(ds);
            dt = ds.Tables[0];
        }         
        catch (Exception exc)
        {

        }

        if (conn.State == ConnectionState.Open)
        {
            conn.Close();
        }
        List<string> IssueList = new List<string>();
        for (int i = 0; i < dt.DataSet.Tables[0].Rows.Count; i++)
        {
            IssueList.Add(dt.DataSet.Tables[0].Rows[i][0].ToString());
        }
        return IssueList.ToArray();
    }
}

The jquery ajax method I wrote is as -

         $(function() {
        $(".tb").autocomplete({
            source: function(request, response) {               
            debugger;
                $.ajax({
                    url: "SearchIssues.asmx/GetCompletionList",
                    data: 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                           
                            }
                        }))
                        //alert('Hello');
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                     debugger;
                        alert(errorThrown);
                    }
                });
            },
            minLength: 1
        });
    });

The webservice is running perfectly fine. But the problem comes when I try to call the webservice from the .aspx page. Its throws Internal server error.

I am not sure as where I am going wrong. Kindly help.

Thanks in advance. Akhil

Answer 1

I advice you to use firebug to check whether your Post requests and responses this way you can easily debug your application.

This one in your code of ajax

  data: request.term,

Should be actually

  data:  "{'prefixText':'" + request.term+ "'}",

Your service is expecting prefixText string as a parmeter, I assume request.term is the value.

Update :

I dont know what is not working at your end this works for me :

        <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.8.custom.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">
            $(document).ready(function() {          
               $("input#autocomplete").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/Service/WSDataService.asmx/GetStatesWithAbbr",
                        data: "{'name':'" + $(autocomplete).val() + "'}",
                        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 {
                                    label: item.Name,
                                    value: item.Name
                                }
                            }))
                        }
                    });
                },
                minLength: 1
              });
            });
        </script>

....

     <input id="autocomplete" />

Service :

   [WebMethod]        
    public List<State> GetStatesWithAbbr(string name)
    {
        List<State> sbStates = new List<State>();
        //Add states to the List
       }

Answer 2

This code could throw exception, so please verify it one more time, probably table is not retrieved or something like it.

   List<string> IssueList = new List<string>();
      for (int i = 0; i < dt.DataSet.Tables[0].Rows.Count; i++)
      {
         IssueList.Add(dt.DataSet.Tables[0].Rows[i][0].ToString());
     }
    return IssueList.ToArray();

Answer 3

Place this line in your ajax: data: '{ "prefixText": "' + request.term + '"}', and it will work exactly as happened with me.