We Keep Coding

JQuery Datatable Editor not updating row after successful edit

I am using JQuery Datatable Editor with Server Side processing using Java Servlet. Editing a row works fine but the updated data is not being shown in the table.
The edit is successful and I am able to see the JSON object for the updated row in the browser console.
var editor = new $.fn.dataTable.Editor( {
ajax: '/fda/intranet/translationNew/TranslationFileServ',
table: '#example',
idSrc: 'id',
fields: [
{ label: 'Id', name: 'id',type: "readonly" },
{ label: 'In Current File', name: 'inCurrentFile',type: "readonly" },
{ label: 'en_us', name: 'en_us',type: "readonly" },
{ label: 'translatedTo', name: 'translatedTo',type: "readonly" },
{ label: 'translation', name: 'translation', type: 'textarea' }
// etc
]
} );

Custom JSON to populate a Datatable

Im creating a DataTable from an Ajax json.
resultTable = $('#changeTable').DataTable({
"order": [[0, "desc"]],
"pageLength": 50,
"scrollX": true,
"lengthMenu":[[50,100,250, -1], [50, 100, 250, "All"]],
"dom":'<"toolbar">ltipr', //write ltfipr to show a search bar
"ajax":{
url:"api/changes",
"dataType":"json",
timeout:15000
}
});
The DataTables creates but it shows an error:
DataTables warning: table id=changeTable - Requested unknown parameter
'0' for row 0, column 0. For more information about this error, please
see http://datatables.net/tn/4
My JSON Looks like the following
{"data":
[
{"id":1,
"createdDate":"Apr 18, 2018 4:10:58 PM",
"source":"manual upload",
"emailId":"manual upload",
"attachmentId":"manual upload",
...,},
{next objet}]}
Such JSON object is created in my Java controller:
#RequestMapping(value = "/api/changes", method = RequestMethod.GET, produces = "application/json")
#ResponseBody
public String getChanges(){
Optional<List<PriceChange>> priceChangeList = pcService.findAllPriceChanges();
JsonObject result = new JsonObject();
if (priceChangeList.isPresent()) {
result.add("data", new Gson().toJsonTree(priceChangeList.get()));
return result.toString();
}
return null;
}
I don know how to use this information with the dataSrc property to make it work for the DataTable. Any Ideas?

You just need to define columns for the table. If you have
<table id="changeTable"></table>
add this to your DataTables options :
resultTable = $('#changeTable').DataTable({
...,
columns: [
{ data: 'id', title: 'id' },
{ data: 'createdDate', title: 'createdDate' },
{ data: 'source', title: 'source' },
{ data: 'emailId', title: 'emailId' },
{ data: 'attachmentId', title: 'attachmentId' }
]
})
If ypu have specifed a <thead> section you can skip the title's.

extjs combobox afterrender() called together leading to asynchronous ajax calls

I'm developing an application using Java Spring and ExtJS. The front end contains a panel with some fields including 3 comboboxes. To fill the comboboxes, I have defined a function which is fired on ComboBox afterRender. I have a store for each combobox (each combobox is filled from different tables).
The problem is when the page is rendered, the function is called 3 times but only the 3rd combo box is filled, or the JSON string returned contains only the value for last combo box. Actually the request for all 3 comboboxes are sent, but only the last request is processed.
Can anyone give me an idea how to handle this problem?
This is how i defied a combo box.
{
xtype: 'combobox',
x: 300,
y: 70,
store: 'TasksStr',
msgTarget: 'side',
displayField: 'label',
valueField: "value",
itemId: 'TaskRef',
fieldLabel: 'Task Ref',
name: 'taskRef'
} //Similarly 2 more combo boxes for Project and Status
This is the controller:
init: function(application) {
this.control({
"#TaskRef": {
afterrender: this.onComboboxAfterRender,
select: this.onFormBlur
},
"#ProjectRef": {
afterrender: this.onComboboxAfterRender,
select: this.onFormBlur
},
"#StatusRef": {
afterrender: this.onComboboxAfterRender,
select: this.onFormBlur
}
});
}
This is the store:
Ext.define('MainApp.store.TasksStr', {
extend: 'Ext.data.Store',
requires: [
'MainApp.model.Model'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'TasksStr',
model: 'MainApp.model.Model',
proxy: {
type: 'ajax',
url: 'http://localhost:8080/project/Tasks',
reader: {
type: 'json',
root: 'data',
totalProperty: 'count'
}
}
}, cfg)]);
}
});
This is the controller in java:
#RequestMapping(value="/{id}")
public String getElanLUT(#PathVariable("id") String Id, ModelMap model ){
System.out.println(Id);
try{
ABCDao.set(Id);
List<ABC> List = Dao.getABC();
model.addAttribute("data", List);
model.addAttribute("success", true);
model.addAttribute("count", List.size());
}catch(Exception e){
model.addAttribute("success", false);
e.printStackTrace();
}
return "jsonTemplate";
}
While running this code, the console for java prints all 3 Id's but the value returned is just the 3rd one.
Thanks in advance.!

You need to create store instances for all 3 combo boxes.
{
xtype: 'combobox',
x: 300,
y: 70,
store: Ext.create('MainApp.store.TasksStr'),
msgTarget: 'side',
displayField: 'label',
valueField: "value",
itemId: 'TaskRef',
fieldLabel: 'Task Ref',
name: 'taskRef'
}

How to send data from controller which is acceptable format to Highstock?

I am new to Highstock, am not able to plot the graph.
I am sending an AJAX request to get the graph data.I am returning List of X-Axis Data, and List of Y-Axis Data, I also used Map but the values are coming like {1420051860000=101}, which is not acceptable format in Highstock.
$(document).ready(function(){
$.ajax({ url: 'getData',
dataType : 'json',
type: 'GET'
success: function (data) {
var xAxisdata= data.xAxisData;
var yAxisData=data.yAxisData;
//converting two arrays to two-dimesional array, It's not working
var jarray = [];
for (var i=0; i<xAxisdata.length && i<yAxisdata.length; i++){
jarray[i] = [xAxisdata[i], [yAxisdata[i]]];
}
//Getting these values for X and Y values
var xAxisdata=[1420051860000,1420052160000,1420052460000,1420052760000,1420053060000,....];
var yAxisdata=[100,110,112,113,110,112,111,110,115,116,114,114,110,114,112,113,110,....];
//Creates chart
var chart =new Highcharts.StockChart({
chart: {
renderTo: "container",
zoomType: 'x'
},
rangeSelector : {
selected : 1,
inputEnabled: $('#container').width() > 280
},
title : {
text : 'AAPL Stock Price'
},
credits: {
enabled: false
},
xAxis: {
title: {
text: 'Time'
},
type: 'datetime',
labels:{
formatter:function(){
return Highcharts.dateFormat('%H<br/>%d<br/>%m<br/>%Y',this.value);
}
},
},
yAxis: {
title: {
text: "Stock "
},
lineWidth: 1,
min:0,
gridLineWidth: 0
},
series : [{
name : 'AAPL',
showInLegend: true,
data : jarray,
marker : {
enabled : true,
radius : 3
}
}]
});
}
});
} );
And also facing issue with Months, in javaScript the months are starting from 0 to 11, But in java starts from 1. If the month is JAN-2014, it showing FEB-2014.
Suggest me the best way to plot the graph using JSON Response.

You were very close, there's just a little issue with the format of your array you've built.
Try to use
var jarray = [];
for (var i=0; i<xAxisdata.length && i<yAxisdata.length; i++){
jarray[i] = [xAxisdata[i], yAxisdata[i]];
}
Just remove the outer square brackets on [ yAxisdata[i] ]
Like in this jsFiddle

Passing form Data to servlet using Extjs

i'm new in ExtJS and Servlet.
I created a form with 2 fields usinf ExtJS :
var panel = Ext.create('Ext.form.Panel',
{
title: 'Personnal Data',
bodyPainting: 5,
width: 350,
region:'center',
url: 'save_form.php',
items:
[{
xtype: 'textfield',
fieldLabel: 'First Name ',
name: 'firstName'
},
{
xtype: 'textfield',
fieldLabel: 'Last Name ',
name: 'lastName'
}],
buttons:
[{
text: 'Submit',
handler: function()
{
var formData = this.up('form').getForm();
}
}]
});
But i don't know how to pass the value of the two fields to a servlet, by clicking on the button.
And how can i retrieve the data entered in the form, in the servlet ?
Thank you !

By default ExtJS Forms will send over the values in an "ajax" fashion and I believe it will be a "post". In your servlet (assuming you are posting to a servlet defined in your web.xml file) in your doPost (or doGet) methods, use the "request" variable in the method and do
request.getParameter("firstName")
and
request.getParameter("lastName")
.
Link to HttpServlet Definition (is the same for just about every java container).
Edit:
In your handler you need to add:
formData.submit();