title: problems getting the jquery tokeniput plugin to work with asp.net mvc 3
body: <p>I'm trying to get the <a href="http://loopj.com/jquery-tokeninput/" rel="nofollow noreferrer">jQuery Tokeninput plugin</a> to work with my mvc application but there seems to be a problem somewhere ,,</p>
  
  <h2>My Code :</h2>
  
  <pre><code>            &lt;input type="text" id="MajorsIds" name="MajorsIds"  /&gt;
              &lt;script type="text/javascript"&gt;
                  $(document).ready(function () {
                      $("#MajorsIds").tokenInput("/AjaxAPI/Major/GetMajors"
                      , {
                          prePopulate: [
                              { "id": 501, "name": "Test 1" },
                              { "id": 502, "name": "Test 2" },
                              { "id": 503, "name": "Test 3" }
                          ]
                      });
                  });
              &lt;/script&gt;
  </code></pre>
  
  <p><strong>Server ActionResult</strong></p>
  
  <pre><code>    public ActionResult GetMajors(string q)
      {
          var majors = _majorService.GetAllMajors()
              .Where(m=&gt; m.Department.ToLower().Contains(q.ToLower()))
              .Select(m =&gt; new {id = m.Id, name = m.Department});
  
          return Json(majors,"text/html",JsonRequestBehavior.AllowGet);
      }
  </code></pre>
  
  <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/moWPf.png" alt="results are not being displayed !"></p>
  
  <p><strong>Response Headers</strong></p>
  
  <pre><code>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
  </code></pre>
  
  <p><strong>Request Headers</strong></p>
  
  <pre><code>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
  </code></pre>
  
  <p><strong>Response</strong></p>
  
  <p>the returned json in the page output is :</p>
  
  <pre><code>[{"id":1,"name":"ACCT"},{"id":3,"name":"AE"},{"id":4,"name":"ARC"}, {"id":5,"name":"ARE"},{"id":20,"name":"MATH"},{"id":21,"name":"STAT"}]
  </code></pre>
  
  <p>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 ,,, </p>
  
  <hr>
  
  <p>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.</p>
  
  <h2>Demo Code :</h2>
  
  <pre><code>    &lt;input type="text" id="demo-input" name="blah" /&gt;
      &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $("#demo-input").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php");
      });
      &lt;/script&gt;
  </code></pre>
  
  <p>Response Headers</p>
  
  <pre><code>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
  </code></pre>
  
  <p><strong>Request Headers</strong></p>
  
  <pre><code>GET http://shell.loopj.com/tokeninput/tvshows.php?callback=jQuery151008570635266447713_1303770077700&amp;q=a&amp;_=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
  </code></pre>
  
  <p><strong>Response</strong></p>
  
  <p>if I directly display the content of the link <a href="http://shell.loopj.com/tokeninput/tvshows.php" rel="nofollow noreferrer">http://shell.loopj.com/tokeninput/tvshows.php</a> ,,, I get the flowing result :</p>
  
  <pre><code>[{"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"}]
  </code></pre>
  
  <p>However ,,, using firebug the shown response is a little different :</p>
  
  <pre><code>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"}])
  </code></pre>
  
  <p>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 </p>
  
  <hr>
  
  <p>can anyone please help me find the solution to this problem ?</p>
  
  <p>Note : I tried to do it using POST but still it didn't work.
  Also I tried to use the complete url : <a href="http://localhost:500/AjaxAPI/Major/GetMajors" rel="nofollow noreferrer">http://localhost:500/AjaxAPI/Major/GetMajors</a> instead of just /AjaxAPI/Major/GetMajors ,,, same thing.</p>