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
}
})
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);
}
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. (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. (http://localhost:8000/assets/plugins/global/plugins.bundle.js:20745:9) undefined
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"}]
{"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}}
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) undefined
</anonymous></anonymous>
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
}
}
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
}
})
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.