PDA

View Full Version : Issue with params in Ext.Ajax.request



coolchandu
2 Sep 2009, 4:25 AM
Hi Everybody,

This is part of code which I am using to send a request.


Ext.Ajax.request({
url: Keywords.categoryServletUrl,
params: {
action: reqAction,
Keywords.FIELD_categoryId: categoryId,
newTopicName: topicName
},
success: successHandler,
failure: failureHandler
})In the params object I want to use a param name which has been defined in a variable (in example Keywords.FIELD_categoryId).
This gives error for Keywords.FIELD_categoryId.

I would like to store the params name in a global variable like this, so that errors in param-name are avoided while sending requests from different parts of application.

I would like to know how can I fix this.

Thanks

ck.

Animal
2 Sep 2009, 4:54 AM
So Keywords.FIELD_categoryId is a string containing the parameter name?

You will have to build the params object using array notation.

Condor
2 Sep 2009, 4:57 AM
Example:

var params = {
action: reqAction,
newTopicName: topicName
};
params[Keywords.FIELD_categoryId] = categoryId;
Ext.Ajax.request({
url: Keywords.categoryServletUrl,
params: params,
success: successHandler,
failure: failureHandler
});

coolchandu
4 Sep 2009, 7:04 AM
Thanks for the solution.
This forum rocks !


-ck

anshu_gupta
26 Dec 2010, 9:19 PM
Hi, i am trying to send some param to the restful webservice. i am sending two params which are retreived based on the selection og row in gridpanel. The problem is at the server the values are read as null. In firebug though i see the correct param and their value but on the server values are retreived as null.
Here is the code:

function onMonitor() {
var jsonData=null;
var devices=discoveredDeviceGrid.getSelectionModel().getSelections();

// for (var i=0; i < devices.length; i++) {
// var device = devices[i];
// var dId=device.get('deviceId');
// var idValue=device.get('key');
// var monitoredField=device.get('monitored');
//
// };


var items=discoveredDeviceGrid.getSelectionModel().getSelected();
var idValue=items.get('key');
var monitoredField=items.get('monitored');


Ext.Ajax.request({
url: '/api/dms/monitored-device',
method: 'PUT',
disableCaching: false,
waitMsg: 'Updating data...',
params: {
deviceId:idValue,
isMonitored:monitoredField
}

});

}

Condor
26 Dec 2010, 10:44 PM
1. Debug the request, e.g. with the Firebug Net tab. Does the request get sent, and with the proper parameters?

2. What should be the content type of the parameters your server is expecting? application/x-www-form-urlencoded or something else?

anshu_gupta
26 Dec 2010, 10:55 PM
In firebug the params are correct but on server i am taking those params as int and boolean.
but both these values are default i.e 0 and false.

Condor
26 Dec 2010, 11:13 PM
What kind of server are you using? PHP, J2EE, .NET?

anshu_gupta
27 Dec 2010, 12:55 AM
J2EE. I am using restEasy

Condor
27 Dec 2010, 1:17 AM
Not familiar with RestEasy; just scanned the docs quickly...

How did you define your Java function? With @QueryParam?

anshu_gupta
27 Dec 2010, 1:20 AM
yes. I tried @FormParam and it worked for a hardcoded value. Now will check for array object. Thanks a ton.
is there a way wherein i can click on a button and call the rest part and after returning from it reload the grid.

Basically how to reload the grid based on the response received from the ajax request??
I am very new to Ext-Js

Not familiar with RestEasy; just scanned the docs quickly...

How did you define your Java function? With @QueryParam?

Condor
27 Dec 2010, 1:27 AM
According to this (http://docs.jboss.org/resteasy/docs/2.0.0.GA/javadocs/index.html) RestEasy should be able to support:

@FormParam("myparam") List<String> myparam

anshu_gupta
27 Dec 2010, 1:35 AM
Yes it finally works using @FormParam. How to reload the grid after returning from the web service call. i have a success handler.
i have written store.loaddata(). but its not working.

Condor
27 Dec 2010, 2:06 AM
What exactly is your server returning after the call (check Firebug Net tab)?

Does it match the data for the grid store reader?

anshu_gupta
27 Dec 2010, 2:08 AM
i am just returning a json, success and message. My use case is i am updating the selected record in gridpanel and i want to reload the grid

Condor
27 Dec 2010, 2:35 AM
Usually, you don't want 2 requests (one action and one data retreival), so you make the action request return the new data for the grid, so you can call loadData() with the decoded response.

anshu_gupta
27 Dec 2010, 2:44 AM
how to do this?

Usually, you don't want 2 requests (one action and one data retreival), so you make the action request return the new data for the grid, so you can call loadData() with the decoded response.

Condor
27 Dec 2010, 3:37 AM
Example:

Ext.Ajax.request({
url: '/api/dms/monitored-device',
method: 'PUT',
disableCaching: false,
waitMsg: 'Updating data...',
params: {
deviceId:idValue,
isMonitored:monitoredField
},
success: function(response){
var data = Ext.decode(response.responseText);
discoveredDeviceGrid.getStore().loadData(data);
}
});

anshu_gupta
27 Dec 2010, 4:50 AM
I have a gridpanel in which the first column is a checkbox. I have my checkbox model configured for my gridpanel. What i want is that the checkbox should be automatically be checked based on a value of a boolean column in the corresponding row.

How can we achieve it. And is there a way to set a distinct colour for the that boolean column.
Thanks in advance.

Condor
27 Dec 2010, 4:58 AM
Use an Ext.ux.grid.CheckColumn (include examples/ux/CheckColumn.js).

anshu_gupta
27 Dec 2010, 5:02 AM
here is my code:
var chckBox=new Ext.grid.CheckboxSelectionModel({
width:20

});
var userColumns = [
chckBox,
{header: "Device ID", width: 100, sortable: true, dataIndex: 'deviceId'},
{header: "Display Name", width: 200, sortable: true, dataIndex: 'displayName'},
{header: "IP Address", width: 100, sortable: true, dataIndex: 'ipAddress'},
{header: "Device Type", width: 100, sortable: true, dataIndex: 'deviceType'},
{header: "OS Version", width: 100, sortable: true, dataIndex: 'osVersion'},
{header: "Platform", width: 100, sortable: true, dataIndex: 'platform'},
{header: "Monitored", width: 100, sortable: true, dataIndex: 'monitored'},
{header: "Host Name", width: 100, sortable: true, dataIndex: 'hostName'},
{header: "Description", width: 200, sortable: true, dataIndex: 'description' , hidden:true}
];

discoveredDeviceGrid = new Ext.grid.GridPanel({
frame: true,
selModel:chckBox,
title: 'List of Discovered Devices',
autoScroll: true,
height: 300,
width: 1100,
store: store,
loadMask: true,
columns : userColumns,
tbar: [{
text: 'Monitored Devices',
iconCls: 'silk-add',
handler: onMonitor


} ],

bbar: new Ext.PagingToolbar({
pageSize: myPageSize,
store: store,
displayInfo: true,
displayMsg: 'Displaying Devices {0} - {1} of {2}',
emptyMsg: "No Devices Found..!!"
})


});

Now based on the monitored field value true/false, the checkbox should be checked/unchecked on the grid load.
Can we do it core ext-js?

anshu_gupta
2 Jan 2011, 10:04 PM
i have a
CheckboxSelectionModel as my default selection model in GridPanel. So will the CheckColumn work with that in sync??
How to use CheckColumn.

I have tried using xtype:'booleancolumn' but it doesnt seem to work. what may be the issue??
Thanks in advance.

Condor
2 Jan 2011, 11:22 PM
CheckColumn is xtype:'checkcolumn' and need to be included separately (examples/ux/CheckColumn.js).

CheckboxSelectionModel doesn't support paging. You need the CheckBoxMemory plugin (http://www.sencha.com/forum/showthread.php?45723-problem-in-grid-pagination&p=548869#post548869) to add support for that.

anshu_gupta
2 Jan 2011, 11:40 PM
is there a way to disable the checkbox? i want the user should not be able to toggle the checkbox. i have a CheckBoxSelectionModel for selecting any row. I dont want the user to select/deselect the checkbox.
I tried setting editable:false also. Its not working.
Thanks in advance.

aramaki
2 Jan 2011, 11:46 PM
disable:true
//your question contain answer)

Condor
3 Jan 2011, 1:08 AM
No, that won't work. Instead, you should return false from the beforerowselect event.

anshu_gupta
3 Jan 2011, 1:17 AM
I want to send the selected rows of grid panel . i dont want to send the data in json format. how to acheive that?
i want regular HTTP params like name='xyz'&id=5.

If thats not possible then how to send json data. i have to send multiple params.
so its format should be something like this..

[{name:xyz,id=1},{name=abc,id=2}]

Condor
3 Jan 2011, 1:19 AM
And what data of the selected rows do you need to send? The id?

anshu_gupta
3 Jan 2011, 1:22 AM
is as well as the status field which is boolean.

anshu_gupta
3 Jan 2011, 1:52 AM
also is there a way where we can restrict the count of checkboxes to to say 10 before submitting to the server.

Thanks a ton..

Condor
3 Jan 2011, 2:16 AM
Do you need to submit both the ids and the statusses or only the ids of the records with status=true?

anshu_gupta
3 Jan 2011, 2:18 AM
only the id of records where checkbox's are selected.

Condor
3 Jan 2011, 2:41 AM
var ids = [];
store.each(function(r){
if (r.get('status')) {
ids.push(r.id);
}
});
Ext.Ajax.request({
url: '...',
params: {
id: ids
},
success: function(){...}
});

anshu_gupta
3 Jan 2011, 3:09 AM
i tried it. but its not working.
I am seeing blank request headers like as id=&id= in firebug.
values are not stored of selections.

anshu_gupta
3 Jan 2011, 3:57 AM
i am doing like this:

var ids = [];
for (var i=0; i < devices.length; i++) {
var device = devices[i];
if(device.get('monitored')){
var idValue=device.get('key');
ids.push(idValue);
}
};
is it correct??
In firebug request goes as "id=[1,2]".
In server how should i retreive these values??
what should be the @consumes type in RestEasy??
Thanks in advance

Condor
3 Jan 2011, 5:40 AM
Which Ext version are you using? It should have created a query like:

myurl?id=1&id=2

anshu_gupta
3 Jan 2011, 6:02 AM
i am using EXT-Js 3.2.. How will i retreive param on the server side when the name param is same i.e id=1&id=2 and so on...
In server side will i need to create something as
@FormParam("id") Integer[] id???

Will this work?? Is my earlier code correct or am i missing something.
Thanks.

Condor
3 Jan 2011, 6:24 AM
If I read the RestEasy specs correctly it should be:

@FormParam("id") List<Integer> id

mschwartz
3 Jan 2011, 6:26 AM
var ids = [];
store.each(function(r){
if (r.get('status')) {
ids.push(r.id);
}
});
Ext.Ajax.request({
url: '...',
params: {
id: ids
},
success: function(){...}
});

params: { ids: Ext.encode(ids); }

On the server side, you can JSON decode the ids request param and you get an array of integer id's

Condor
3 Jan 2011, 6:37 AM
Yes, but that would require you to write a separate interface for that method, because RestEasy doesn't do the JSON decode.

mschwartz
3 Jan 2011, 6:39 AM
RestEasy === NotSoEasy

anshu_gupta
3 Jan 2011, 6:49 AM
Right Condor..
Thats precisely my problem.
Anyways i am implementing what you had suggested. But i am facing a problem like whenever i am unchecking the checkbox its showing the validation error symbol(red mark on left side). what to do about it.
And am still not able to get that thing..multiple ids... On firbug the request headers are null..
Am stuck on this.
Plz help me..
Thanks a lot for all your help

Condor
3 Jan 2011, 7:48 AM
1. "validation error symbol"? For a CheckColumn?

2. Firebug formats the POST body for display. To view the real POST body use Fiddler2.

steffenk
3 Jan 2011, 8:19 AM
Condor, you make me surprise so often ... you learned RestEasy today from reading docs? :)

anshu_gupta
3 Jan 2011, 8:43 PM
Hi.
Thanks Condor.
Now i am able to see the request params as id=1&id=2 and so on.
Problem is the status field is coming from DB so on page load if its true, and since in If condition we are checking for true condition, even if i uncheck the checkbox and click submit button its also send as true, since its status was true.

Also, can you tell me how to validate that user has selected atleast one row. I am now using RowSelectionModel. And the count of selected checkbox's should never be more than 10.
Thanks.

anshu_gupta
3 Jan 2011, 9:51 PM
how to send only those records in store whose checkbox are checked ??

Condor
3 Jan 2011, 11:42 PM
Are you saying the 'monitored' field doesn't change when you check/uncheck the records?

anshu_gupta
3 Jan 2011, 11:44 PM
Yes. The checked ones are working fine but the ones which are not selected before submitting they are also going as their status is also true.
Am not sure of this behavior.

Condor
3 Jan 2011, 11:53 PM
Can I see your grid and column config?

anshu_gupta
3 Jan 2011, 11:55 PM
This is the code:


var monitorColumn = new Ext.grid.CheckColumn({
header: 'Monitored',
dataIndex: 'monitored',
width: 100,
editable:false

});
var userColumns = [

monitorColumn,
{header: "Device ID", width: 100, sortable: true, dataIndex: 'deviceId'},
{header: "Display Name", width: 200, sortable: true, dataIndex: 'displayName'},
{header: "IP Address", width: 140, sortable: true, dataIndex: 'ipAddress'},
{header: "Device Type", width: 140, sortable: true, dataIndex: 'deviceType'},
{header: "OS Version", width: 150, sortable: true, dataIndex: 'osVersion'},
{header: "Platform", width: 150, sortable: true, dataIndex: 'platform'},
{header: "Host Name", width: 150, sortable: true, dataIndex: 'hostName'},
{header: "Description", width: 200, sortable: true, dataIndex: 'description' , hidden:true}
];

And this is the button handler:

function onMonitor() {
var jsonData=null;
if(discoveredDeviceGrid.getSelectionModel().hasSelections()){
var devices=discoveredDeviceGrid.getSelectionModel().getSelections();
var monitoredIds = [];
var unMonitoredIds=[];
for (var i=0; i < devices.length; i++) {
var device = devices[i];
if(device.get('monitored')==true){
var idValue=device.get('key');
monitoredIds.push(idValue);
}
else{
var idValue=device.get('key');
unMonitoredIds.push(idValue);
}
};
Ext.Ajax.request({
url: '/api/dms/monitored-device',
method: 'PUT',
disableCaching: false,
waitMsg: 'Updating status...',
params: {
//deviceId:idValue,

//isMonitored:monitoredField

monitoredId: monitoredIds,
unMonitoredId:unMonitoredIds
//id:ids

},
success: function(res,a){

var msg = Ext.util.JSON.decode(res.responseText).message;
Ext.Msg.alert('Information',msg);
lastOptions = store.lastOptions;
Ext.apply(lastOptions.params, {
myNewParam: true

});
store.reload(lastOptions);
},
failure: function(res,a){
var msg = Ext.util.JSON.decode(res.responseText).message;
Ext.Msg.alert('Error',msg);
}
});
}
else{
Ext.Msg.alert('Error',"Please Select atleast one Device..!!");

}
}
Do you see anything missing?

Condor
4 Jan 2011, 12:08 AM
1. Did you also register monitorColumn as a grid plugin (not required in Ext 3.3)?
2. Why is onMonitor using the row selections? Maybe you need to describe again what this is supposed to do.

anshu_gupta
4 Jan 2011, 12:13 AM
Yes i had register it as a plugin
My requirement is:
1. Have a checkbox ie. true/false for the monitor field based on the value that is retreived from the webservice.
2. Ability to check/uncheck the monitor field in grid and send those rows to the server so the status of monitor is changed appropriately.
3. Reload the grid with changed information.

Do you need more information??

Condor
4 Jan 2011, 1:11 AM
So you need to send all changed records to the server?

In that case you should be using getModifiedRecords() instead of getSelectionModel().getSelections().

anshu_gupta
4 Jan 2011, 1:17 AM
I didnt find any such method in GridPanel or RowSelectionModel.
How to use it and which class has this function??

Condor
4 Jan 2011, 2:06 AM
It's:

grid.getStore().getModifiedRecords()

ps. Don't forget to call grid.getStore().commitChanges() in the success handler of the request.