Having trouble integrating the jQuery Tokeninput plugin into my MVC application. Something seems off with the setup...
The Code I'm Using:
<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);
}
Issues arise when typing "a" in the search input - data is fetched from the server but not displayed. Instead, a frozen "searching ..." message persists.
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 Message:
The JSON content received on the page output is as follows:
[{"id":1,"name":"ACCT"},{"id":3,"name":"AE"},{"id":4,"name":"ARC"}, {"id":5,"name":"ARE"},{"id":20,"name":"MATH"},{"id":21,"name":"STAT"}]
Despite valid JSON response, data isn't displaying as expected. Can't pinpoint the issue or solution.
Running the provided demo worked smoothly with an external link. Noticed some additional parameters included in the demo request.
Demo Setup:
<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>
Headers of Response:
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 Content:
If directly accessing the link found at here, the result appeared differently:
[{"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 reveals a slightly modified response:
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"}])
Unexpected presence of "callback" and "_" parameters in the response. Unable to determine their origin; something peculiar happening.
Seeking assistance to find solutions for this dilemma.
Note: Attempts made with POST method were unsuccessful. Utilizing complete URL (http://localhost:500/AjaxAPI/Major/GetMajors) instead of relative path also yielded no changes.