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.
