We Keep Coding

Shield UI: Insert row based on other row

I am using Shield UI for my Java application.
I created a custom insert window with "command" as follows:
toolbar: [
{
buttons: [
//{ commandName: "insert", caption: "Agregar Solicitud" }
{ cls: "insertButton", caption: "Agregar Solicitud", click: insertRecord }
],
position: "top"
},
Code for insertRecord:
function insertRecord(index) {
//alert(JSON.stringify(index));
index = 0;
var grid = $("#grid").swidget(),
item = grid.dataItem(index);
initializeWindowWidgets();
editedRowIndex = index;
$("#solId").swidget().value(item.solId);
$("#atmid").swidget().value(item.atmid);
$("#fechaAbastecimiento").swidget().value(item.fechaAbastecimiento);
$("#cargar").swidget().checked(item.cargar);
$("#emergencia").swidget().checked(item.emergencia);
$("#solId").swidget().enabled(true);
$("#atmid").swidget().enabled(true);
$("#fechaAbastecimiento").swidget().enabled(true);
$("#cargar").swidget().enabled(true);
$("#emergencia").swidget().enabled(true);
$("#save").swidget().enabled(true);
$("#window").swidget().visible(true);
//$("#window").swidget().center();
}
function initializeWindowWidgets() {
$("#window").shieldWindow({
position: { left: 500, top: 200 },
width: 320,
height: 360,
title: "Insertar abastecimiento",
modal: true,
visible: false
});
$("#solId").shieldNumericTextBox({
});
$("#atmid").shieldTextBox({
});
$("#fechaAbastecimiento").shieldDatePicker({
});
$("#cargar").shieldCheckBox({
});
$("#emergencia").shieldCheckBox({
});
$("#save").shieldButton({
events: {
click: function (e) {
var grid = $("#grid").swidget(),
editedItem = grid.dataSource.edit(3).data;
editedItem.solId = $("#solId").swidget().value();
editedItem.atmid = $("#atmid").swidget().value();
grid.saveChanges();
$("#window").swidget().close();
}
}
});
Also I can get the row data when I select a row using:
selectionChanged: function (e) {
var selected = e.target.contentTable.find(".sui-selected");
if (selected.length > 0) {
message.innerHTML = selected.get(0).innerHTML;
}
else {
message.innerHTML = "";
}
}
Finally I know how to call a service for example:
$("#grid").shieldGrid({
dataSource: {
events: {
error: function (event) {
if (event.errorType == "transport") {
// transport error is an ajax error; event holds the xhr object
alert(JSON.stringify(event));
alert("transport error: " + event.error.statusText);
// reload the data source if the operation that failed was save
if (event.operation == "save") {
this.read();
}
}
else {
// other data source error - validation, etc
alert(event.errorType + " error: " + event.error);
}
},
},
remote: {
read: {
type: "POST",
url: "abastecimientos/get",
contentType: "application/json",
dataType: "json"
},
modify: {
create: function (items, success, error) {
var newItem = items[0];
$.ajax({
type: "POST",
I need to do these tasks:
Select a row in my grid.
Press insert button.
Shown my custom window with the row's data.
Modify the data showed.
Press a save button and call a remote service in order to insert new row.
I know how to do these tasks separately but tasks 3 and 5 are not clear to me.
I google all internet but I can't figure out how to do it.
Please I would appreciate any suggestion.
Juan

Did you check the following Shield UI demos?
3. Shown my custom window with the row's data
5. Press a save button and call a remote service in order to insert new row

Java Spring MVC returns error 500 when returning JSON object with jQuery jTable

I'm using jQuery jTable to list some data related to a class in my model. I send the request to the corresponding method responsable for fetching the data, and when I return the necessary JSON object I get an internal server error (500).
I don't get any exception or error code in my console, everything run as usual, except that I get this error and nothing else.
Here is the relevant part of the JSP:
$('#records').jtable({
messages : myMessages,
title: 'Records',
paging: true,
pageSize: 20,
sorting: true,
defaultSorting: 'date DESC',
actions: {
listAction: '/filter'
},
fields: {
id: {
title: 'Id',
list: true,
display:function(data){
return data.record.id;
}
},
date: {
title: 'Date',
list: true,
display:function(data){
return data.record.date;
}
},
userName: {
title: 'User',
list: true,
display:function(data){
return data.record.user.name;
}
},
dealerName: {
title: 'Dealer',
list: true,
display:function(data){
return data.record.dealer.name;
}
},
vendorName: {
title: 'Vendor',
list: true,
display:function(data){
return data.record.vendor.name;
}
},
totalValue: {
title: 'Total Value',
list: true,
display:function(data){
return data.record.totalValue;
}
},
recordStatus: {
title: 'Record Status',
list: true,
display:function(data){
return data.record.recordStatus;
}
},
paymentStatus: {
title: 'Payment Status',
list: true,
display:function(data){
return data.record.paymentStatus;
}
}
}
});
$('#records').jtable('load');
And here is the Spring MVC signature mapping the request:
#RequestMapping(value = "/filter", method = RequestMethod.POST)
public #ResponseBody JsonJTableResponse filter(int jtStartIndex,
int jtPageSize, String jtSorting, HttpServletRequest request) {
long st = Long.valueOf(jtStartIndex);
long sz = Long.valueOf(jtPageSize);
List<RecordTO> records = (List<RecordTO>) mgrRecord.getList();
JsonJTableResponse jtable = new JsonJTableResponse();
jtable.setResult("OK");
jtable.setTotalRecordCount(String.valueOf(mgrRecord.getListCount()));
jtable.setRecords(records);
return jtable;
}
The filter method is getting executed. The properties I set in jtable are being set. The only thing that maybe may cause some problem (even though I can't see why) is that the records list has RecordTO objects that don't have all their properties set, just the relevants for the jTable listing.
For example, the following properties are set:
(Long) id
(Date) date
(UserTO) user.name
(DealerTO) dealer.name
(UserTO) vendor.name
(Double) totalValue
(String) recordStatus
(String) paymentStatus
I have already looked in every corner for a solution but can't figure it out.
What could be the problem?
If you want more information that you may find it's relevant, just ask me.
Thanks.

How to parse parameters that sent jquery table

I writing a simple Spring MVC web application that use JQuery DataTable on the client-side. DataTable using server-side processing mode. The DataTable make request with parameters(in my case):
draw:1
columns[0][data]:name
columns[0][name]:
columns[0][searchable]:true
columns[0][orderable]:true
columns[0][search][value]:
columns[0][search][regex]:false
columns[1][data]:type
columns[1][name]:
columns[1][searchable]:true
columns[1][orderable]:true
columns[1][search][value]:
columns[1][search][regex]:false
columns[2][data]:action
columns[2][name]:
columns[2][searchable]:true
columns[2][orderable]:true
columns[2][search][value]:
columns[2][search][regex]:false
order[0][column]:0
order[0][dir]:asc
start:0
length:10
search[value]:
search[regex]:false
I don't know how can i parse parameters like columns[i][data], columns[i][name], columns[i][searchable], etc. The reason is why, because I don't know how many table columns I will have. How to solve this problem?
This is my Spring controller:
#RequestMapping(value = "/getImageWrappers", method = RequestMethod.POST)
public String getImageWrappers(#RequestParam Integer draw,
#RequestParam Integer start,
#RequestParam Integer length,
#RequestParam(value = "search[value]") String searchText){
}
and DataTable configuration:
$('#imageWrapperTable').DataTable({
columns:[
{"data" : "name"},
{"data" : "type"},
{"data" : "action"}
],
"processing": true,
serverSide: true,
ajax: {
url: '/getImageWrappers.json',
type: 'POST'
}
});

I just figure it out by adding this code
$('#imageWrapperTable').DataTable({
columns:[
{"data" : "name"},
{"data" : "type"},
{"data" : "action"}
],
"processing": true,
serverSide: true,
ajax: {
url: '/getImageWrappers.json',
type: 'POST',
datatype: 'json',
data: function(d){
//add your custom param here
d.name = "zxbing";
//this will put all query strings to a json object string
return JSON.stringify(d);
}
}
});
In this way, you just need to transfer only a query string to JSON object on the server side.

In a json array I would do something like this with jquery:
function displayData(x) {
x.success(function(data) {
$.each(data.columns, function(i, paramenter) {
$.each(parameter, function(a, b) {
$('#somediv').append('column'+parameter+' -> data: '+b+' ');
});
});
}),
x.error(function(data) {
//error message
})
}//end displayData
So you can loop through your array, but you gotta play around with it, I haven't tested it but in general that is the idea. Hope it helps.

How to save data from Ext.FormPanel to server?

I have a store and a FormPanel. I want to send data from the FormPanel to a server:
var store_form=null;
store_form = new Ext.data.Store({
url: url_servlet+"kadastr_zemform.jsp",
reader: new Ext.data.XmlReader({
totalProperty: "results",
record: "contact",
fields: [
]}),
});
});
store_form.load();
Panel
var podform = new Ext.FormPanel({
labelAlign: 'left',
id: 'tab_6',
frame:true,
title: 'Договоры подряда',
bodyStyle:'padding:5px 5px 0',
width: 600,
reader: new Ext.data.XmlReader({}),
listeners: {
'activate' : function(pod_form,records,options) {
console.log("store:"+store_form);
this.loaded = true;
//alert("loaded");
//console.log(store.getAt(0));
var record = store_form.getAt(0);
podform.getForm().loadRecord(record);
}
},
fields[]
});
podform.addButton({
text: 'Submit',
//disabled:true,
handler: function(){
podform.getForm().submit({url:url_servlet+'submit.jsp', waitMsg:'Saving Data...', submitEmptyText: false});
}
});
In firebug I can see that nothing is sent to the server. What am I doing wrong?
Another question: what can I do on the server side to get this data?
UPDATE
I forgot to add XMLReader to form. But nothing has changed.
UPDATE2
Now parameters are sent to the server:
But I am getting an error:
SyntaxError: syntax error
...ayer=a;this.activate()}else{this.layer=a}},setTargets:function(b){this.targets=[...

Passing an extra parameter to Java controller for jQuery datatables

I am trying to pass a user defined parameter to the Java Controller which acts as a data source to my jquery Data-Table.
The point is, i want to do this (pass the parameter) on a change event for a combobox on my jsp.
Here is my datatable initialization:
var oTable = $('#reqAllQueriesTable')
.dataTable(
{
"sDom": '<"H"l<"projectTeamTools">frtip>',
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "query/getQuery",
"bPaginate" : true,
"bLengthChange": true,
"bScrollCollapse" : true,
"iDisplayLength" : 10,
"bFilter" : true,
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"sSearch": "Search"
});
My combobox whose values are to be passed to the controller and the respective functions are:
$("div.projectTeamTools").html('Organize by Project Teams: <select id="projectTeams"><option value="0">Project Team</option><option value="1">All</option><option value="2">Not Associated</option><c:forEach var="projectTeam" items="${userProjectTeams}"><option value="${projectTeam.projectId}">${projectTeam.projectName}</option></c:forEach></select>');
$("#projectTeams").change(function () {
onTeamSelect($(this).val());
});
function onTeamSelect(teamId){
alert(teamId +" Selected");
//This function to pass the parameter to the datatable is supposed to be here.
oTable.fnDraw();
}
The datatable then displays the new data it receives from the ajax Source getQuery.
PS: I cannot use fnServerParams as I am using the older version of datatables. I have tried using fnServerData but it did not help. I guess I am wrong in the way I am using the ajax function in fnServerData.
"fnServerData": function ( sSource, aoData, fnCallback ) {
$("#projectTeams").change(function() {
aoData.push( { "name": "myParam", "value": $("#ComboBox option:selected").value() } );
$.ajax( {
"dataType": 'json',
"url": sSource,
"data": aoData,
"success": fnCallback
});
I cannot see the parameter I want to pass in the 'Network XHR' in my browser when I select an item from the combo-box.
Please help!

Got an answer. During initialization, fnServerData should be:
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push( { "name" : "myTeamId", "value" : myTeamId } );
$.getJSON( sSource, aoData, function (json) {
fnCallback(json);
});
}
and the onChange function of the combobox on which I want to pass the parameter:
$("#projectTeams").change(function () {
onTeamSelect($(this).val());
});
function onTeamSelect(teamId){
myTeamId = teamId;
oTable.fnDraw();
}
where myTeamId is a global variable.
The oTable.fnDraw() redraws the datatable and assigns the value of teamId to the myTeamId, which I use in fnServerData.
This code worked for me!