We Keep Coding

Select2: Searching not working with external json file

0.13) to load a json with country names.
I can show and select the data correctly, but the searching is not working.
Everytime I type something it always returns all the values and not the ones I'm searching for.
This is my code:
$("#reg_afi_nac").select2({
width: '100%',
placeholder: 'Ingrese la nacionalidad',
language: 'es',
ajax: {
url: "<?php echo base_url('assets/json/nacionalidades.json') ?>",
dataType: "json",
type: "POST",
data: function(params) {
return {
q: params.term, // search term
};
},
processResults: function(data) {
return {
results: $.map(data, function(item) {
return {
text: item.text,
id: item.text
}
})
};
},
cache: true,
},
});

Transforming response data select2 do not working

I use select2 (v4) and use remote data. The response is correct, but processResults function do not call and select2 do not displaying anything.
$('#country').select2({
placeholder: 'Select a country',
minimumInputLength: 3,
ajax: {
url: 'https://battuta.medunes.net/api/country/search/?key=xx',
dataType: 'json',
processResults: function(data) {
var results = [];
$.each(data, function (index, country) {
results.push({
id: country.code,
text: country.name
});
});
return {
results: results
};
},
data: function(params) {
var query = {
country: params.term
}
return query;
}
},
width: 'resolve',
});
Example response from ajax request:
[
{"name": "Indonesia", "code": "Id"},
{"name": "French Polynesia", "code": "pf"}
]

Hi below is the select code for it
$('#country').select2({
placeholder: 'Select a country',
minimumInputLength: 3,
ajax: {
url: function(param){return 'https://battuta.medunes.net/api/country/search/'},
dataType: 'jsonp' ,
data: function (params) {
var query = {
country: params.term,
// callback :"?",
key:"00000000000000000000000000000000" //put your key here
}
//this is important to make sure no extra params are added becuase the api rejects anything that has wrong params
// Query parameters will be ?city=[term]&callback=?,key=
return query;
},
processResults: function(data) {
var results = [];
$.each(data, function (index, country) {
results.push({
id: country.code,
text: country.name
});
});
return {
"results":results
};
},
},
width: 'resolve',
});
and this is my fiddle showing the working country search https://jsfiddle.net/shyamjoshi/jbfrnqLd/37/

Setting values in select2 initial

I need to set default values to the select2 option select which is multiple select and ajax.
Here is the code that i have so far
$("#firstList").select2({
placeholder: "Enter Pincode",
allowClear: true,
cache: true,
initSelection : function (element, callback) {
var data = {id: "IN", text: "INDIA"};
callback(data);
},
ajax: {
url: "../getZipList",
type: "POST",
contentType: "application/json; charset=utf-8",
delay: 250,
data: function (params) {
//console.log(params)
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, page) {
// parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to
// alter the remote JSON data
return {
results: data.items
};
//console.log(data.it)
},
cache: true
},
escapeMarkup: function (markup) {
return markup;
}, // let our custom formatter work
minimumInputLength: 1,
templateResult: formatRepo, // omitted for brevity, see the source of this page
templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
})
When i try this
initSelection : function (element, callback) {
var data = {id: "IN", text: "INDIA"};
callback(data);
},
The initial values didn't set...
I also tried
var data = [{
id: 'value',
text: 'Text to display'
}];
var tags = $("#firstList option").each(function () {
data.push($(this).val());
});
But the initial values are not setting.
What is the problem i am doing and how can i fix it. Help pls

csrf token set as post parameter while deleting action in Jtable (Jquery )

Hi i'm trying to add csrf token in post while deleting record in jtable its not working but listAction & updateAction is working fine.
My Code snippets :-
$(document).ready(function () {
$('#main-content').jtable({
title: ' Data',
selecting: true, //Enable selecting
multiselect: true, //Allow multiple selecting
selectingCheckboxes: true, //Show checkboxes on first column
paging: true, //Enable paging
pageSize: 10, //Set page size (default: 10)
actions: {
listAction:"${pageContext.request.contextPath}/mycontroller/all" ,
// createAction:"${pageContext.request.contextPath}/mycontroller/create",
updateAction:"${pageContext.request.contextPath}/mycontroller/edit",
deleteAction:"${pageContext.request.contextPath}/mycontroller/delete"
},
fields: {
code: {
title:'Code',
width: '25%',
key: true,
edit:true,
input: function (data) {
if (data.value) {
return '<input type="text" readonly class="jtable-input-readonly" name="code" value="' + data.value + '"/>';
}
},
},
name: {
title: 'Name',
width: '25%',
create:true,
edit:true
},
craetedTs: {
title: 'Created',
width: '25%',
edit:false
},
modifiedTs: {
title: 'mdate',
width: '25%',
edit:true,
input: function (data) {
if (data.value) {
mdate='';
var date = new Date();
var options = {
year: "numeric", month: "2-digit",
day: "2-digit", hour: "2-digit", minute: "2-digit" ,second:"2-digit"
};
today=date.toLocaleTimeString("en-us", options);
today=today.replace(',', '');
return '<input type="text" readonly class="jtable-input-readonly" name="modifiedTs" value="' + today + '"/>';
}
}
},
_csrf: {
visibility: 'hidden',
edit:true,
input: function (data) {
return '<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />';
}
}
}
});
$('#main-content').jtable('load',{'${_csrf.parameterName}' : '${_csrf.token}'});
//Delete selected
$('#DeactiveID').button().click(function () {
var $selectedRows = $('#main-content').jtable('selectedRows');
$('#main-content').jtable('deleteRows', $selectedRows);
});
});
Even i tried for deleting code bellow:-
deleteAction: function (postData) {
return $.Deferred(function ($dfd) {
$.ajax({
url: '/Demo/DeleteStudent',
type: 'POST',
dataType: 'json',
data: '${_csrf.parameterName}' + "=" +'${_csrf.token}' ,
success: function (data) {
$dfd.resolve(data);
},
error: function () {
$dfd.reject();
}
});
});
}
But when i checked delete action url the entire method was reflecting

Add meta elements to the page you are invoking the ajax method from
<meta name="_csrf" content="${_csrf.token}"/>
<meta name="_csrf_header" content="${_csrf.headerName}"/>
And make this change to your deleteAction
deleteAction: function (postData) {
return $.Deferred(function ($dfd) {
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
$.ajax({
url: '/Demo/DeleteStudent',
type: 'POST',
dataType: 'json',
beforeSend: function (request)
{
request.setRequestHeader(header, token);
},
success: function (data) {
$dfd.resolve(data);
},
error: function () {
$dfd.reject();
}
});
});
}

If somebody is still wondering, Lalit got me going in the right direction, but my final solution is this:
deleteAction: function (postData) {
return $.Deferred(function ($dfd) {
postData.csrf_token = csrf_token;
$.ajax({
url: 'prizes/delete',
type: 'POST',
dataType: 'json',
data: postData,
beforeSend: function (request)
{
request.setRequestHeader("csrf_token", csrf_token);
},
success: function (data) {
$dfd.resolve(data);
},
error: function () {
$dfd.reject();
}
});
});
}
This solves the issue with passing csrf, or any additional data, for that matter, in jTable AJAX delete call. As for the other cases. Putting this right after you include the jTable js foxes the initial load:
$.extend(true, $.hik.jtable.prototype.options, {
ajaxSettings: {
data: {csrf_token: csrf_token},
}
});
And then there is this hidden field to add to the field list:
csrf_token: {
visibility: 'hidden',
edit:true,
input: function (data) {
return "<input type='hidden' name='csrf_token' value='" + csrf_token + "'/>";
}
}
Here is my code as a full example:
<!-- Include jTable script file. -->
<script src="{{site.uri.public}}/jtable/jquery.jtable.js" type="text/javascript"></script>
<script type="text/javascript">
var csrf_token = $('meta[name=csrf_token]').attr("content");
$.extend(true, $.hik.jtable.prototype.options, {
ajaxSettings: {
data: {csrf_token: csrf_token},
}
});
</script>
<script type="text/javascript">
$(document).ready(function () {
var csrf_token = $('meta[name=csrf_token]').attr("content");
$("#PrizesTableContainer").jtable({
title: 'Prizes',
actions: {
listAction: 'prizes/get',
createAction: 'prizes/create',
updateAction: 'prizes/update',
deleteAction: function (postData) {
return $.Deferred(function ($dfd) {
postData.csrf_token = csrf_token;
$.ajax({
url: 'prizes/delete',
type: 'POST',
dataType: 'json',
data: postData,
beforeSend: function (request)
{
request.setRequestHeader("csrf_token", csrf_token);
},
success: function (data) {
$dfd.resolve(data);
},
error: function () {
$dfd.reject();
}
});
});
}
},
fields: {
id: {
key: true,
list: false
},
machine_name: {
title: 'Machine name',
width: '10%'
},
reel1: {
title: 'Reel1',
width: '15%'
},
reel2: {
title: 'Reel2',
width: '15%'
},
reel3: {
title: 'Reel3',
width: '15%'
},
payout_credits: {
title: 'Payout credits',
width: '15%'
},
payout_winnings: {
title: 'Payout winnings',
width: '15%'
},
probability: {
title: 'Probability',
width: '15%'
},
csrf_token: {
visibility: 'hidden',
edit:true,
input: function (data) {
return "<input type='hidden' name='csrf_token' value='" + csrf_token + "'/>";
}
}
}
});
$("#PrizesTableContainer").jtable('load');
});
</script>

Select2 TypeError: data.results is undefined

Am trying to use Select2 to load remote data using ajax / json but i keep getting an error as:
TypeError: data.results is undefined
My code is :
$('#tags').select2({
ajax: {
url: 'http://localhost:8090/getallusers',
dataType: 'json',
quietMillis: 100,
data: function (term) {
return {
term: term
};
},
results: function (data) {
return data;
}
}
});
I really Don’t Understand the Problem !

Select2 needs the results as a collection of objects with id: and text: attributes.
Like:
[{ 'id': 1, 'text': 'Demo' }, { 'id': 2, 'text': 'Demo 2'}]
Try, to reformat you response like:
$('#tags').select2({
ajax: {
url: 'http://localhost:8090/getallusers',
dataType: 'json',
quietMillis: 100,
data: function (term) {
return {
term: term
};
},
results: function (data) {
var myResults = [];
$.each(data, function (index, item) {
myResults.push({
'id': item.id,
'text': item.first_name + " " + item.last_name
});
});
return {
results: myResults
};
}
}
});