select2 AJAX search displaying drop down

769 views
Skip to first unread message

sushmas...@gmail.com

unread,
Jun 3, 2014, 1:57:05 PM6/3/14
to sel...@googlegroups.com
Hello,

I am trying to populated multi-value dropdown using AJAX, but it does not show the drop down. It stays at "Searching", even though in chrome, I can see the request was already completed and it shows the data in the Network tab of chrome.

Here is my code :

<script>

$(document).ready(function() {
$("#e6").select2({
placeholder: "Search for a person",
minimumInputLength: 2,
ajax: {
url: "http://localhost:8080/cnrs/rest/ids",
dataType: 'jsonp',
data: function (term, page) {
return {
name: term, // search term
page_limit: 10
};
},
results: function(data, page) {
console.log("I am in results " + data);
return { results: data };
}
},
dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
escapeMarkup: function (m) { return m; }
});
});

</script>
</head>
<body>

<div class="container">
<input type="hidden" class="bigdrop" id="e6" style="width:600px" value="16340"/>
</div> <!-- /container -->
</body>
</html>


The data from the ajax call is returned in this format :

[{"id":"id0","text":"text name0"},{"id":"id1","text":"text name1"},{"id":"id2","text":"text name2"},{"id":"id3","text":"text name3"},{"id":"id4","text":"text name4"},{"id":"id5","text":"text name5"},{"id":"id6","text":"text name6"},{"id":"id7","text":"text name7"}]


The console log message is never printed on the console. What am I missing?

Thanks for the help,
Sushma

Barry Hunter

unread,
Jun 3, 2014, 2:41:12 PM6/3/14
to sel...@googlegroups.com

                        dataType: 'jsonp',

You are specifying JSONP format. 

 
The data from the ajax call is returned in this format :

[{"id":"id0","text":"text name0"},{"id":"id1","text":"text name1"},{"id":"id2","text":"text name2"},{"id":"id3","text":"text name3"},{"id":"id4","text":"text name4"},{"id":"id5","text":"text name5"},{"id":"id6","text":"text name6"},{"id":"id7","text":"text name7"}]

But that doesnt appear to be JSONP 

That's plain JSON. 


So the format doesnt appear to be what jquery is expecting. 

 


The console log message is never printed on the console. What am I missing?

Because the function callback is missing in the responce, nothing ever happens with the result. 

 
.. either change your server script to output JSONP (ie use the callback param) or change the call to specify json :)

sushmas...@gmail.com

unread,
Jun 3, 2014, 4:36:11 PM6/3/14
to sel...@googlegroups.com
Barry,

Thanks you, thank you, thank you. I modified my server side script to send the JSONP(used callback param). It works now and shows the filtered results.

I am still getting a javascript error in chrome console "Uncaught TypeError: undefined is not a function ". I did not modify my html, do I need to add/specify something else in my client/server side script?

Thanks for the help,
Sushma


Barry Hunter

unread,
Jun 3, 2014, 4:55:22 PM6/3/14
to sel...@googlegroups.com

I am still getting a javascript error in chrome console "Uncaught TypeError: undefined is not a function ".

The console should also tell you what line of code that happens on. 

Look at that line!
 

sushmas...@gmail.com

unread,
Jun 4, 2014, 12:31:24 PM6/4/14
to sel...@googlegroups.com
well, it is complaining about the callback function and it is not happening in the example I posted here. but if I just change the url to my server script, it gives me this error.

Uncaught TypeError: undefined is not a function users?callback=jQuery110207093086519744247_1401898792660&name=sush&page_limit=2&_=1401898792663:1

When I look at the jquery response of this ajax call, it shows

jQuery110207093086519744247_1401898792660([{"id":"0012345","text":"Sushil K "},{"id":"0087654","text":"Sushil R"}])

There is something about my other script that it does not like. So, I am looking at the script. If I find something or do not find the problem, I will post here.

Thanks,
Sushma

sushmas...@gmail.com

unread,
Jun 4, 2014, 2:52:34 PM6/4/14
to sel...@googlegroups.com, sushmas...@gmail.com
so it looks like the problem is not with the server script. I type fast and the server script keeps returning the results. But if I type another letters(i.e. another ajax request is made) before the results were returned/processed for previous requests, it seems to be throwing that error. I am a novice jQuery user, so do not know fully all its functions, but it looks like that the callback function is gone when a new request it made? If I type slowly, I do not get this error.

any suggestions? multiple select auto complete seems to be working at this point of time and it looks great, but I would rather not have a javascript error.

Reply all
Reply to author
Forward
0 new messages