Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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) undefined


prelase help


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(