StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POproblems getting the jquery tokeniput plugin to work with asp.net mvc 3
text
Body
copied!<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> <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> </code></pre> <p><strong>Server ActionResult</strong></p> <pre><code> 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); } </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> <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> </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&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 </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>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload