SUMO SELECT REFRESH ISSUE - javascript

Sumo select is not refreshing the data in it.
Action Method is return the correct List.
Just like J QUERY multi select rebuild()
function is available is there anything I am missing?
$("#ddlCountry").change(function () { BindDDlLocation(CountryId); });
function BindDDlLocation(CountryId) {
var ddlLocation = $("#ddlLocation");
$.ajax({
url: RootUrl + '/Home/BindMasterDropDown',
type: "GET",
data: { TableType: 'tbllocation', RegionId: '0', Country_id: CountryId, Categ_Id: '0', SubCateg_Id: '0', EntityID: '0', DepartmentID: '0' },
datatype: 'json',
async: false,
success: function (result) {
$("#ddlLocation").html('');
ddlLocation.append($("<option></option>").val('').html('--select--'));
$.each(result, function (key, value) {
ddlLocation.append($("<option></option>").val(value.ID).html(value.vDescription));
});
//alert("location binded");
$("#ddlLocation").SumoSelect({ csvDispCount: 1, search: true, searchText: 'Enter here.' });
$(".SumoSelect").css('margin-top', '15px');
},
error: function (err) {
alert(err.statusText);
}
});
}

This is the ANSWER: It works fine now.
REFERENCE :
https://github.com/HemantNegi/jquery.sumoselect/issues/286
//bimmy
$("#ddlLocation").SumoSelect({ csvDispCount: 1, search: true, searchText: 'Enter here.', triggerChangeCombined: false });
$("#ddlLocation").SumoSelect().sumo.reload();
$(".SumoSelect").css('margin-top', '15px');
//bimmy
Full CODE:
function BindDDlLocation(CountryId) {
var ddlLocation = $("#ddlLocation");
$.ajax({
url: RootUrl + '/Home/BindMasterDropDown',
type: "GET",
data: { TableType: 'tbllocation', RegionId: '0', Country_id: CountryId, Categ_Id: '0', SubCateg_Id: '0', EntityID: '0', DepartmentID: '0' },
datatype: 'json',
async: false,
success: function (result) {
$("#ddlLocation").html('');
ddlLocation.append($("<option></option>").val('').html('--select--'));
$.each(result, function (key, value) {
ddlLocation.append($("<option></option>").val(value.ID).html(value.vDescription));
});
//bimmy
$("#ddlLocation").SumoSelect({ csvDispCount: 1, search: true, searchText: 'Enter here.', triggerChangeCombined: false });
$("#ddlLocation").SumoSelect().sumo.reload();
$(".SumoSelect").css('margin-top', '15px');
//bimmy
},
error: function (err) {
alert(err.statusText);
}
});
}

$('.the_name_of_select_class').SumoSelect().reload();

Related

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,
},
});

jQuery Select2 - get maximum selectable by data attribute

this is html code of my select2 field.
<select data-init-plugin="select2" data-max="4" multiple="" id="mls" name="mls" class="select2 form-control full-width ajax-supported select2-hidden-accessible" data-callback="getAgents" tabindex="-1" aria-hidden="true"></select>
and this is the select2 JavaScript code.
$('.ajax-supported').select2({
ajax: {
dataType: 'json',
multiple: true,
type: "POST",
data: function (term) {
return {
'_token': $('#_token').val(),
name: $(this).attr('name'),
callback: $(this).data('callback'),
q: term.term,
};
},
url: '{{ url('listing-field-ajax-callback') }}',
processResults: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.itemName,
id: item.id
}
})
};
},
},
minimumInputLength: 1,
maximumSelectionLength: maximum_selectable_items, // this is where i want 4 from data attribute data-max=4
});
now i want to get data attribute data-max = 4 and i want to use it in my maximumSelectionLength and want to control the number of selected items. how can i get data attribute from the select HTML and use that in my JavaScript?
well i tried this code and it worked.
$.each($('.ajax-supported'), function(k, field) {
var max;
console.log(field);
if($(field).data('max')) {
max = parseInt($(field).data('max'));
}
else {
max = 1;
}
$(field).select2({
ajax: {
dataType: 'json',
multiple: true,
type: "POST",
data: function (term) {
return {
'_token': $('#_token').val(),
name: $(field).attr('name'),
callback: $(field).data('callback'),
q: term.term,
};
},
url: '{{ url('listing-field-ajax-callback') }}',
processResults: function (data) {
return {
results: $.map(data, function (item) {
return {
text: item.itemName,
id: item.id
}
})
};
},
},
minimumInputLength: 1,
maximumSelectionLength: max,
});
});

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
};
}
}
});

Store json data returned using javascript

I have json string retuned via a ajax call
$.ajax({
type: 'GET',
url: quoteURL,
dataType: 'json',
timeout: 10000,
crossDomain: true,
success: function(result) {
/// required code
}
});
The returned json response from server is
{
_emptyscopedata: [
{},
{}
],
errMsgBuffer: {
errMsg: ''
},
descriptor: [
{
template: 'projects/mobile/market/mostactives.xsl',
componentname: 'getmostactives'
},
{
template: '',
componentname: 'quotelist'
}
],
'invest.mostactive': {
MoverExchange: 'NSDQ',
MoverType: 'ACT',
urlType: ''
},
quotelist: {},
'quote.quote': [
{
timezoneid: 'EST',
change: '0.01',
halted: '0',
type: 'EQ',
bidsize: '2900',
fastmarket: '0',
asksize: '300',
close: '16.64',
timestamp: 'May 18, 2011 3:00 PM EST',
open: '16.64',
productid: 'CSCO:NSDQ:EQ',
bid: '16.63',
exchange: 'NSDQ',
symbol: 'CSCO',
news: '0',
quotetype: '2',
percentchange: '0.0006',
symboldesc: 'CISCO SYS INC COM',
price: '16.65',
utctime: '1305748800',
volume: '92738240',
high: '16.66',
quotestatus: '0',
low: '16.34',
ask: '16.64',
timestring2: '05/18/11 04:00 PM ET'
},
{
timezoneid: 'EST',
change: '0.04',
halted: '0',
type: 'EQ',
bidsize: '91200',
fastmarket: '0',
asksize: '241000',
close: '2.14',
timestamp: 'May 18, 2011 3:00 PM EST',
open: '2.13',
productid: 'SIRI:NSDQ:EQ',
bid: '2.17',
exchange: 'NSDQ',
symbol: 'SIRI',
news: '0',
quotetype: '2',
percentchange: '0.0187',
symboldesc: 'SIRIUS XM RADIO INC COM',
price: '2.18',
utctime: '1305748800',
volume: '74540998',
high: '2.2',
quotestatus: '0',
low: '2.12',
ask: '2.18',
timestring2: '05/18/11 04:00 PM ET'
}
]
}
I want to show some of the values of the response on the site. But I am not able to retrieve the values.
Can someone help.
$.ajax({
type: 'GET',
url: quoteURL,
dataType: 'json',
timeout: 10000,
crossDomain: true,
success: function(result) {
alert(result.descriptor[0].template);
}
});
and if you wanted to loop through all descriptors:
$.each(result.descriptor, function() {
var template = this.template;
var componentname = this.componentname;
// TODO: process the template and componentname
});
or:
alert(result['invest.mostactive'].MoverExchange);
etc... depending on what you want to show
You can use define a global variable in case you want to use the response out the success function scope.
Just use
var cachedResp;//at global scope
$.ajax({
type: 'GET',
url: quoteURL,
dataType: 'json',
timeout: 10000,
crossDomain: true,
success: function(result) {
cachedResp = result; //this is now available out of the function
}
});

Categories