justGage.js loading data with AJAX call and MySQL - javascript

I'm a little bit new with justGage.js and I would like to load some data from MySQL. this is my gage code:
var g3 = new JustGage({
id: "g3",
value: 0,
min: 0,
max: 1000,
title: "Scripts Started Today",
label: "",
levelColors: ['#1ab394'],
levelColorsGradient: false
});
...and the AJAX call is this:
(function updateScripts() {
$.ajax({
type: "GET",
url: '#Url.Action("GetQueryResult")',
context: document.body,
data: {
querySetName: 'dashboard-script-statistics',
queryName: 'NumOfStartedScript'
},
success: function (serveData) {
serveData = JSON.parse(serveData);
if (serveData.Success) {
$("#stat-7-value").html(serveData.Result.NUM_SCRIPT_STARTED_TODAY);
g3.refresh(serveData.Result.NUM_SCRIPT_STARTED_TODAY);
} else {
$("#stat-7-value").prop(serveData.ErrorMessage);
}
},
error: function (xhr) {
$("#stat-7-value").attr('title', 'Error Status: ' + err.status);
},
complete: function () {
setTimeout(updateScripts, 2000);
}
});
})();
It's putting a 0 instead of 3. I checked the data and it's fine. But the value presented is 0.

Related

how to reload dataTable

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

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.

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>

Reload page js after database query in MVC

I have such script:
$(document).ready(function () {
$('#requestTable').DataTable(
{
aoColumns: [
{ mDataProp: "DateStart", sTitle: "Date Start" },
{ mDataProp: "DateEnd", sTitle: "Date End" },
{ mDataProp: "Approved", sTitle: "Approved" },
{ mDataProp: "Data", sTitle: "Employee" },
{ mDataProp: "Position", sTitle: "Position" },
{ mDataProp: "", sTitle: "" }
],
columnDefs: [{
targets: 'no-sort',
orderable: false
}]
});
$('button.accept-button').click(function () {
var id = $(this).attr('data-id')
$.ajax({
type: "POST",
url: "/TableRequest/AcceptRequest",
data: { 'id': id },
success: function (msg) {
}
});
location.reload(true);
});
var tempId;
$('button.decline-button').click(function () {
tempId = $(this).attr('data-id')
$("#dialog").dialog()
});
$('button.ok-request').click(function () {
var message = $('textarea#commentForDecline').val();
$.ajax({
type: "POST",
url: "/TableRequest/DeclineRequest",
data: { 'message': message, 'id': tempId },
success: function (msg) {
}
});
$("#dialog").dialog('close');
$('textarea#commentForDecline').val('');
location.reload(true);
});
});
As you can see I reload page after post Ajax query. But is there any way to check changes in Db and refresh page after this (call the Action)? So Db changes is late and I wanna to check it.
You can reload the page after success, and from backend action return the data you want to check and after you can reload
success: function (data) {
console.log(data);
if (data.somekey === "somevalue"){
location.reload(true);
} else {
//don't reload show me some erros
}
}

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