how to reload dataTable - javascript

I want to empty the table before processing. It's showing error.
Cannot read property 'aDataSort' of undefined.
i am calling like this: $('#fulltalktimepdata').dataTable().empty();
$.ajax({
type: "POST",
url: "/recharge_plan/",
data: {
'phone_no': phone_no
},
dataType: "json",
success: function(msg1) {
var fulltalktime_jsonString = msg1.fulltalktime_response_data;
var fulltalktime_temp_data = JSON.parse(fulltalktime_jsonString);
var fulltalktime_array_of_arrays = [];
$.each(fulltalktime_temp_data.data["FTT"], function(i, dataElem) {
fulltalktime_array_of_arrays.push([dataElem.amount, dataElem.detail, dataElem.validity, dataElem.talktime]);
});
console.log(fulltalktime_array_of_arrays);
$('#fulltalktimepdata').dataTable().empty();
$('#fulltalktimepdata').DataTable({
data: fulltalktime_array_of_arrays,
columns: [{
title: "AMOUNT"
},
{
title: "DETAIL"
},
{
title: "VALIDITY"
},
{
title: "TALKTIME"
}
]
});
}
});
Cannot read property 'aDataSort' of undefined

Related

Unable to get array in controller from ajax

Not getting array of data from ajax to controller.
$.ajax({
type: "POST",
url: "/Home/List",
traditional: true,
contentType: 'application/json',
data: {
"Query": JSON.stringify(Query) //change this
success: function() {}
});,
And array of Query :
0: {label: "abc:", value: "123", type: "Select"} 1: {label: "xyz",
value: "Hum", type: "text"}
Can anyone help ?
Try something like this
<script type="text/javascript">
var query=[{label: "abc:", value: "123", type: "Select"},{label: "abc:", value: "1232", type: "Select"} ];
$.ajax({ type: "POST",
url: "/Home/List",
traditional: true,
contentType: 'application/json',
data: JSON.stringify(query),
success: function (){
} });
</script>
I think something along this may work for you.
function sendarray() {
var arr = [];
var json = {
"label": 'abc',
"value": 1234,
"Name": 'Name'
};
arr.push(json);
json = {
"label": 'abc2',
"value": 1234,
"Name": 'Name2'
};
arr.push(json);
var myarray = JSON.stringify(arr);
$.ajax({
url: '/controller/GetArray',
type: 'POST',
data: { array: myarray },
success: function (data) {
//Do something
},
error: function () {
//Do something
}
});
}
then in the controller
public JsonResult GetArray(string array)
{
var obj = JsonConvert.DeserializeObject<object>(array);
return Json("");
}
This will send an string with all the data in the array to the controller, then you turn string with json format into an object list

Create ui-grid with async call

I am trying to create a ui-grid with some DDL filter (from get data). If I try with async: false, all works perfectly. This is the call:
var Documents = [];
var solutionSetColumn = {};
var solutionSetFilters = [];
LoadData = function () {
Documents = [];
$.ajax({
type: "POST", url: url,
success: function (data) {
Documents = data.d;
},
error: function (err) {
}
});
}
}
$.ajax({
type: "POST", url: url,
success: function (data) {
solutionSetColumn = { field: 'SolutionSet', displayName: 'Solution Set', width: 190, filter: { type: uiGridConstants.filter.SELECT, selectOptions: data.d } };
},
error: function (err) {
solutionSetColumn = { field: 'SolutionSet', displayName: 'Solution Set', width: 190 }
}
});
LoadData();
gridOptions = {
enableHorizontalScrollbar: 2,
enableVerticalScrollbar: 0,
enableFiltering: true,
data: Documents,
columnDefs: [
{ field: 'Name', displayName: 'Nome File', width: 200 },
solutionSetColumn
]
}
$scope.gridOptions = gridOptions;
});
How to get all async without gridOption error like colDef undefined? Obviously without the setTimeout! Thanks
You need to move your $scope.gridOptions (and the options definition) into the success path of your ajax call.

Highcharts error "cannot read property of undefined"

I'm creating a chart using Highcharts (and getting the data from a JSON file). However, I'm getting TypeError: Cannot read property 'map' of undefined.
I have the following code:
myData.get(function (data) {
$scope.loadData = data;
});
$('#container').highcharts({
xAxis: {
type: 'datetime'
},
series: [{
name: 'Temperature',
data: $scope.loadData.map(function(d) {
return [d.timestamp, d.actual];
})
}, {
name: 'Range',
data: $scope.loadData.map(function(d) {
return [d.timestamp, d.min, d.max];
}),
type: 'arearange'
}]
});
I've also created a Plunker.
Any tips on what I'm doing wrong here?
So I changed your Plunkr to a working example: http://plnkr.co/edit/Q4z6NdVtp3TRMKgmH5tc?p=preview
First of all, in your data.json you have timestamps added as strings. Highchart does not accept that.
I changed the factory to get JSON data via $http
.factory('myData', function($http) {
return {
getData : function () {
var data = [];
data = $http.get('data.json');
return data;
}
}
})
In the callback of getData I build the chart:
myData.getData().then(function(response) {
$scope.loadData = response.data;
$('#container').highcharts({
xAxis: {
type: 'datetime'
},
series: [{
name: 'Temperature',
data: [$scope.loadData.timestamp, $scope.loadData.actual]
},
{
name: 'Range',
data: [$scope.loadData.timestamp, $scope.loadData.min, $scope.loadData.max],
type: 'arearange'
}]
});
});
this is asynchronous call :
myData.get(function (data) {
console.log("myData.Get");
$scope.loadData = data;
});
So $('#container').highcharts({... will run before the data is set $scope.loadData = data;
you have to move the code inside the callback of myData
myData.get(function (data) {
$scope.loadData = data;
$('#container').highcharts({
xAxis: {
type: 'datetime'
},
series: [{
name: 'Temperature',
data: $scope.loadData.map(function(d) {
return [d.timestamp, d.actual];
})
}, {
name: 'Range',
data: $scope.loadData.map(function(d) {
return [d.timestamp, d.min, d.max];
}),
type: 'arearange'
}]
});
});

Getting array name of search data in type ahead js

$('#search_restaurant').typeahead({
minLength: 1,
order: "asc",
template: "{{display}} <small style='color:#999;' id={{group}}>{{group}} </small>",
source: {
Restaurant: {
url: ["sqlfiles/search_data.php", "data.country"]
},
Estb: {
url: ["sqlfiles/search_data.php", "data.dish"]
},
Sub: {
url: ["sqlfiles/search_data.php", "data.sub"]
},
Cusines: {
url: [
{
type: "POST",
url: "sqlfiles/search_data.php",
data: {myKey: "myValue"}
},
"data.capital"
]
}
},
});
I am using running coder type ahead js here i am getting the data but what i want is the name of array of the selected data like Restaurant,Estb,Sub,Cusines in a java script variable
callback: {
onClickAfter: function (node, a, item, event) {
// item.group should be what you are looking for
console.log(item)
}
}
});
that's the solution

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

Categories