Metronic Mega Update!Tailwind 4, React 19, Next.js 15, KtUI, ReUI, eCommerce, User Management Apps and more
Explore Update 
select2 ajax with pagination in laravel
hello
i have problem with select2, im using ajax and pagination, data not show
$("#tempat_lahir").select2({
allowClear: true,
minimumInputLength:3,
ajax:{
url:url+"/master/wilayah/listSelect",
dataType: "json",
delay: 250,
data: function (params) {
var query ={
search:params.term,
page:params.page||1
}
// Query parameters will be ?search=[term]&page=[page]
return query;
},
processResults: function (data, page) {
return {
results: JSON.parse(data)
};
},
cache: true
}
})and this my controller
public function listSelect(Request $request){
$page = $request->page;
$term = $request->search;
$wilayah = new wilayah();
$response = $wilayah->select(["ID as id", "DESKRIPSI as text"])
->where("DESKRIPSI", "LIKE", "%".$term."%")
->simplePaginate(10);
return response()->json([
"results" => $response->items(),
"pagination" => [
"more" => $response->hasMorePages()
]
], Response::HTTP_OK);
}and i have error
jQuery.Deferred exception: data.slice is not a function TypeError: data.slice is not a function
at HidePlaceholder.removePlaceholder (http://localhost:8000/assets/plugins/global/plugins.bundle.js:21331:29)
at DecoratedClass.removePlaceholder (http://localhost:8000/assets/plugins/global/plugins.bundle.js:17593:32)
at HidePlaceholder.append (http://localhost:8000/assets/plugins/global/plugins.bundle.js:21314:25)
at DecoratedClass.append (http://localhost:8000/assets/plugins/global/plugins.bundle.js:17593:32)
at Select2.<anonymous> (http://localhost:8000/assets/plugins/global/plugins.bundle.js:18109:12)
at Observable.invoke (http://localhost:8000/assets/plugins/global/plugins.bundle.js:17650:20)
at Observable.trigger (http://localhost:8000/assets/plugins/global/plugins.bundle.js:17640:12)
at Select2.trigger (http://localhost:8000/assets/plugins/global/plugins.bundle.js:22934:19)
at http://localhost:8000/assets/plugins/global/plugins.bundle.js:22797:14
at Object.<anonymous> (http://localhost:8000/assets/plugins/global/plugins.bundle.js:20745:9) undefined
please help
Replies (4)
You're welcome! I'm glad to hear that you were able to solve the problem by adjusting your code. If you have any more questions or need further assistance, feel free to ask.
Hi,
The error you are seeing indicates a problem with the data format being returned from your server.
Based on the code you provided, it looks like you are returning an array of results along with a pagination object in your JSON response. However, Select2 expects the data to be in a specific format, and it's possible that the format of your response is causing this error.
To resolve this issue, you can try formatting your JSON response as follows:
{
"results": [
{"id": "1113042002", "text": "KUTESANGE"},
{"id": "1214012017", "text": "TESIKHORI"},
// Other data...
],
"pagination": {
"more": true
}
}Ensure that the "results" key contains an array of objects where each object has "id" and "text" properties, which are required by Select2. The "pagination" key should indicate whether there are more results available ("more" set to true) or not.
Additionally, you can consider implementing server-side pagination to load a large number of data progressively in smaller chunks, which can improve performance.
If you continue to encounter issues, please provide more details about your Laravel controller and the exact format of the JSON response you are sending to the client.
Thanks
hello,
thanks for reply
my json data is correct
i change some code in js file
this is my code
$("#tempat_lahir").select2({
allowClear: true,
minimumInputLength:3,
placeholder:"Tempat Tgl Lahir",
ajax:{
url:url+"/master/wilayah/listSelect",
delay: 250,
dataType:"json",
data: function (params) {
var query ={
_token: CSRF_TOKEN,
search:params.term,
page:params.page||1
}
// Query parameters will be ?search=[term]&page=[page]
return query;
},
processResults: function (data, page) {
console.log(data);
return {
results: data.results,
pagination: {
more: data.pagination
}
};
},
cache: true
}
})that problem solve
thank you
if im update json data like
[{"id":"1113042002","text":"KUTESANGE"},{"id":"1214012017","text":"TESIKHORI"},{"id":"1371061014","text":"GATES NAN XX"},{"id":"1409102012","text":"HULU TESO"},{"id":"1703102023","text":"RETES"},{"id":"1703202007","text":"RETES"},{"id":"1707041002","text":"TES"},{"id":"1802142005","text":"WATES"},{"id":"1804042008","text":"WATES"},{"id":"1806102005","text":"WATES"}]item will showing
but i need paging for load 10.000 data
and the json data
{"results":[{"id":"1113042002","text":"KUTESANGE"},{"id":"1214012017","text":"TESIKHORI"},{"id":"1371061014","text":"GATES NAN XX"},{"id":"1409102012","text":"HULU TESO"},{"id":"1703102023","text":"RETES"},{"id":"1703202007","text":"RETES"},{"id":"1707041002","text":"TES"},{"id":"1802142005","text":"WATES"},{"id":"1804042008","text":"WATES"},{"id":"1806102005","text":"WATES"}],"pagination":{"more":true}}i get warning in console
plugins.bundle.js:4050 jQuery.Deferred exception: data.slice is not a function TypeError: data.slice is not a function
at HidePlaceholder.removePlaceholder (http://localhost:8000/assets/plugins/global/plugins.bundle.js:21331:29)
at DecoratedClass.removePlaceholder (http://localhost:8000/assets/plugins/global/plugins.bundle.js:17593:32)
at HidePlaceholder.append (http://localhost:8000/assets/plugins/global/plugins.bundle.js:21314:25)
at DecoratedClass.append (http://localhost:8000/assets/plugins/global/plugins.bundle.js:17593:32)
at Select2.<anonymous> (http://localhost:8000/assets/plugins/global/plugins.bundle.js:18109:12)
at Observable.invoke (http://localhost:8000/assets/plugins/global/plugins.bundle.js:17650:20)
at Observable.trigger (http://localhost:8000/assets/plugins/global/plugins.bundle.js:17640:12)
at Select2.trigger (http://localhost:8000/assets/plugins/global/plugins.bundle.js:22934:19)
at http://localhost:8000/assets/plugins/global/plugins.bundle.js:22797:14
at Object.<anonymous> (http://localhost:8000/assets/plugins/global/plugins.bundle.js:20745:9) undefinedprelase help
