What should be the correct response from web service to display the Jquery token input results?

Question

I am using a Jquery Token Input plugin. I have tried to fetch the data from the database instead of local data. My web service returns the json result is wrapped in xml:

 <?xml version="1.0" encoding="utf-8"?>
<string xmlns="http://tempuri.org/">[{"id":"24560","name":"emPOWERed-Admin"},{"id":"24561","name":"emPOWERed-HYD-Visitors"}]</string>

I have checked in the site http://loopj.com/jquery-tokeninput/ which says that the script should output JSON search results in the following format:

[
    {"id":"856","name":"House"},
    {"id":"1035","name":"Desperate Housewives"}
]

Both seems to be the same,but still i m not getting the items displayed in my page.

I am posting my code also. My Js code: DisplayTokenInput.js

 $(document).ready(function() {
     $("#textboxid").tokenInput('PrivateSpace.asmx/GetDl_info', {

            hintText: "Type in DL Name", theme: "facebook",
            preventDuplicates: true,
            searchDelay: 200

            });
    });

My web-service code:

[WebMethod]

    [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
     public string GetDl_info(string q)
    {
        string dl_input = string.Empty;
        DataSet ds;
        PSData ObjDl = new PSData();
        ds = ObjDl.GetDistributionList(q);

        List<DistributionList> DLObj = new List<DistributionList>();


        foreach (DataRow datarow in ds.Tables[0].Rows)
        {
            DistributionList dl_list = new DistributionList();
            dl_list.id = Convert.ToString(datarow["id"]);
            dl_list.name = Convert.ToString(datarow["name"]);

            DLObj.Add(dl_list);
        }

        dl_input = JsonConvert.SerializeObject(DLObj);

        return dl_input;

    }

 }
public class DistributionList
    {
        public string id { get; set; }
        public string name { get; set; }
    }

I am posting the head portion of aspx code to show the library files i have included:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Untitled Page</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   <link href="../Styles/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" />
      <link href="../Styles/token-input.css" rel="stylesheet" type="text/css" />

    <link href="../Styles/token-input-facebook.css" rel="stylesheet" type="text/css" />

    <script src="Scripts/Lib/jquery-1.7.2.min.js" type="text/javascript"></script>  

    <script src="../Scripts/jquery.tokeninput.js" type="text/javascript"></script>--%>

    <script src="DisplayTokenInput.js" type="text/javascript"></script>
<head>

have you added jquery.tokeninput.js and jquery and css file in your page with correct path — rajesh kakawat, Nov 26 '12 at 05:03
@rajeshkakawat ya i have done... i have included the head portion of aspx code in my question now.. Please check that too.. — Xavier, Nov 26 '12 at 05:12
@rajeshkakawat I checked.. It doesn't show any error.. It jus shows the response as i specified in my question.. So i guess the format of response might be wrong.. i have mentioned the format of my web service response..Is that a correct response? — Xavier, Nov 26 '12 at 06:02
If that's the string your web service is returning, then that's the problem - it's an XML response not JSON. Your service serialized the search results you wanted as a JSON string, but then wrapped it in XML. — Ryan Weir, Nov 26 '12 at 06:13
@cookingwithrye ya exactly.. But how can i avoid that..I want a json result, not the json result wrapped in xml.. — Xavier, Nov 26 '12 at 06:16
@rajeshkakawat That is my textbox id only..So only i m getting the response.. The problem is just the format of response — Xavier, Nov 26 '12 at 06:35

Ryan Weir · Answer 1 · 2012-11-26T06:45:31.307

1

I would assume that the code for the plugin isn't setting the content-type for ajax requests to JSON, so you could do it yourself before the service call with $.ajaxSetup ie:

$.ajaxSetup({
  contentType: "application/json; charset=utf-8"
});

UPDATE: Apparently asmx services sometimes have issues with the 'charset=utf-8' portion, so if that doesn't work you could try just 'application/json'

UPDATE 2:

I don't think it's the contentType causing the issue, use the following to force a POST for ajax requests and see if this fixes it:

$.ajaxSetup({
  type: "POST", contentType: "application/json; charset=utf-8"
});

UPDATE 3:

There is a default setting inside the plugin you're using that can change the requests from GET to POST. See here on it's GitHub repo: jquery.tokeninput.js

and in your copy of the js file in the project, change the line:

var DEFAULT_SETTINGS = {
    // Search settings
    method: "GET",

to

var DEFAULT_SETTINGS = {
    // Search settings
    method: "POST",

I also assume that the plugin constructs the query in a way that ignores the global jquery ajax settings anyway, so you shouldn't need to include my earlier snippets anymore.

edited Nov 26 '12 at 06:45

answered Nov 26 '12 at 06:20

Ryan Weir

6,377
5
40
60

Should i include this before $("#textboxid").tokenInput('PrivateSpace.asmx/GetDl_info', { – Xavier Nov 26 '12 at 06:26
Done that.. Still i m getting the same response – Xavier Nov 26 '12 at 06:38
If you have firebug or chrome, check to see with the console whether the ajax requests for your autocomplete are actually POST or GET requests. If they're still GET requests after adding the code above, then you might need to take a closer look at the token plugin code to see how it's constructing ajax requests. – Ryan Weir Nov 26 '12 at 06:42
Looks like there's a setting in the plugin js file you can change to accomplish this change from GET to POST. See my edit – Ryan Weir Nov 26 '12 at 06:46
Checked.. the web service is called as GET http://localhost:3696/SocialTask/Admin/PrivateSpace.asmx/GetDl_info?q=were – Xavier Nov 26 '12 at 06:46
I have changed the DEFAULT_SETTINGS method: "POST" but still in the firebug console the web service is called as GET http://localhost:3696/SocialTask/Admin/PrivateSpace.asmx/GetDl_info?q=were – Xavier Nov 26 '12 at 06:51
Check to make sure your browser hasn't cached an old version of the js file that was still using GET, I looked over where the plugin actually builds the ajax request and it has to be respecting that setting you changed to POST. – Ryan Weir Nov 26 '12 at 06:57
I tried with local data its working fine.. But couldn do the same from database.. whether TokenInput doesnt support calling the webservice – Xavier Nov 26 '12 at 07:26

score 1 · Answer 2 · edited May 23 '17 at 10:24

1

You need to make sure that your request is a POST request. Not a get request. See this answer to find out more about why: How to let an ASMX file output JSON

edited May 23 '17 at 10:24

Community

1
1

answered Nov 26 '12 at 06:23

Mark

1,718
11
10

I think you're right, the plugin he's using appears to send get requests according to firebug. – Ryan Weir Nov 26 '12 at 06:29

What should be the correct response from web service to display the Jquery token input results?

2 Answers2

Linked