problems getting the jquery tokeniput plugin to work with asp.net mvc 3

Question

I'm trying to get the jQuery Tokeninput plugin to work with my mvc application but there seems to be a problem somewhere ,,

My Code :

            <input type="text" id="MajorsIds" name="MajorsIds"  />
            <script type="text/javascript">
                $(document).ready(function () {
                    $("#MajorsIds").tokenInput("/AjaxAPI/Major/GetMajors"
                    , {
                        prePopulate: [
                            { "id": 501, "name": "Test 1" },
                            { "id": 502, "name": "Test 2" },
                            { "id": 503, "name": "Test 3" }
                        ]
                    });
                });
            </script>

Server ActionResult

    public ActionResult GetMajors(string q)
    {
        var majors = _majorService.GetAllMajors()
            .Where(m=> m.Department.ToLower().Contains(q.ToLower()))
            .Select(m => new {id = m.Id, name = m.Department});

        return Json(majors,"text/html",JsonRequestBehavior.AllowGet);
    }

When I type "a" for example in the search input a request is sent to the server and the data is retrieved however the retrieved data is not displayed ,,, instead the "searching ..." message is frozen.

Response Headers

HTTP/1.1 200 OK
Server: ASP.NET Development Server/10.0.0.0
Date: Tue, 26 Apr 2011 00:18:48 GMT
X-AspNet-Version: 4.0.30319
X-AspNetMvc-Version: 3.0
Cache-Control: private
Content-Type: text/html; charset=utf-8
Content-Length: 24
Connection: Close

Request Headers

GET /AjaxAPI/Major/GetMajors?q=a HTTP/1.1
Host: localhost:5000
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0) Gecko/20100101 Firefox/4.0
Accept: */*
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
X-Requested-With: XMLHttpRequest
Referer: http://localhost:5000/Home/GettingStarted

Response

the returned json in the page output is :

[{"id":1,"name":"ACCT"},{"id":3,"name":"AE"},{"id":4,"name":"ARC"}, {"id":5,"name":"ARE"},{"id":20,"name":"MATH"},{"id":21,"name":"STAT"}]

I really don't know what's the problem ,,, or how to fix it ,,, my json response is valid and the results should be displayed but for some reason it's not working ,,,

---

When I tried the provided demo which calls an external link in my server it worked just fine ,,, however some additional parameters are being sent in the request with the demo code.

Demo Code :

    <input type="text" id="demo-input" name="blah" />
    <script type="text/javascript">
    $(document).ready(function() {
        $("#demo-input").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php");
    });
    </script>

Response Headers

HTTP/1.1 200 OK
Server: nginx/0.6.32
Date: Mon, 25 Apr 2011 22:53:34 GMT
Content-Type: text/html
X-Powered-By: PHP/5.3.3-1ubuntu9.1
Via: 1.1 cache4.ruh
Age: 0
Transfer-Encoding: chunked
Proxy-Connection: Keep-Alive
Connection: Keep-Alive
Content-Encoding: gzip

Request Headers

GET http://shell.loopj.com/tokeninput/tvshows.php?callback=jQuery151008570635266447713_1303770077700&q=a&_=1303771352965 HTTP/1.1
Host: shell.loopj.com
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0) Gecko/20100101 Firefox/4.0
Accept: */*
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Proxy-Connection: keep-alive
Cookie: __utma=71995406.317557806.1303476969.1303642425.1303757215.5; __utmz=71995406.1303476969.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); __utmc=71995406

Response

if I directly display the content of the link http://shell.loopj.com/tokeninput/tvshows.php ,,, I get the flowing result :

[{"id":"978","name":"cha$e"},{"id":"1530","name":"The Life and Times of Tim"},{"id":"1210","name":"Kenny vs. Spenny"},{"id":"1393","name":"Sex and the City"},{"id":"1394","name":"Shark"},{"id":"1395","name":"Shaun the Sheep"},{"id":"1398","name":"Side Order of Life"},{"id":"1397","name":"Shear Genius"},{"id":"1396","name":"Seinfeld"},{"id":"1399","name":"Sinchronicity"}]

However ,,, using firebug the shown response is a little different :

jQuery151008570635266447713_1303770077699([{"id":"978","name":"cha$e"},{"id":"1530","name":"The Life and Times of Tim"},{"id":"1706","name":"The Peter Serafinowicz Show"},{"id":"1389","name":"Sea Patrol"},{"id":"1390","name":"Secrets of a Small Town"},{"id":"1211","name":"Kitchen Nightmares"},{"id":"1212","name":"L.A.P.D.: Lekanopedio Attikis Police Department"},{"id":"1214","name":"Lab Rats (2008)"},{"id":"1215","name":"La Femme Nikita"},{"id":"1216","name":"L.A. Ink"}])

notice that the response includes the extra "callback" and "_" parameters that was provided in the request ,,, I really don't know where those came from but something strange is happening

---

can anyone please help me find the solution to this problem ?

Note : I tried to do it using POST but still it didn't work. Also I tried to use the complete url : http://localhost:500/AjaxAPI/Major/GetMajors instead of just /AjaxAPI/Major/GetMajors ,,, same thing.

Answer 1

Ok ,,, I did the following and it worked :

In the plugin website it mentioned that the default settings for crossDomain option is false , however when I checked the plugin the 'crossDoman' is not being assigned a default value ,,, so I just added crossDomain: false, to the default settings array in the plugin and the problem was solved.

Now I don't know why it didn't work before when I did specify the options crossDomain to be false from the call ,,, I believe it's because of the caching.

Thanks for your help Hogan ,,, I didn't know that jsonp existed.