PDA

View Full Version : Redirecting with json object



bunty
6 Oct 2012, 6:04 AM
Hi all,

I am having two combo box in my UI. The first combo box contains the list of country names and the second combo box contains list of states present in that country. From the first combo, when I select the country, then the name is sent to the servlet. Using the name, the DB is hit, list of state names are retrieved and converted into JSONObject. Now I am not able to pass this JSONObject back to the extjs file for populating the second combobox with list of states.

Here is the code for the js file:


Ext.require('Ext.tab.*');Ext.require('Ext.button.*');


Ext.define('Country',{
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'string' },
{ name: 'name', type: 'string' }
]
});

Ext.define('CountryCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.countrycombo',
allowBlank: false,
queryMode: 'local',
valueField: 'id',
displayField: 'name',
store: {
model: 'Country',
data: [
{ id: 'China', name: 'China'},
{ id: 'Japan', name: 'Japan'},
{ id: 'Malaysia', name: 'Malaysia'}
]
},
listeners: {
"select": function(obj){
Ext.Ajax.request({
url: '/CellEditing/FormServlet',
method: 'POST',
params: {
data: obj.getValue()
},
success: function(obj){
alert('sucess');
var respText = eval('('+ obj.responseText +')');
alert(respText);
},
failure: function(obj){
alert('failure');
}
});
}
}
});


Ext.define('State',{
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' }
]
});

Ext.define('StateCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.statecombo',
allowBlank: false,
queryMode: 'local',
valueField: 'id',
displayField: 'name',
store: {
model: 'State',
data:[]
}
});


Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
Ext.widget('panel', {
renderTo: 'pan1',
title: 'Basic Panel',
width:600,
height:100,
defaults: {
bodyPadding: 10,
border: false,
xtype: 'panel',
layout: 'anchor'
},
layout: 'hbox',
items: [{
fieldLabel: 'Country',
xtype: 'countrycombo',
width: 234,
margin: '5 5 5 5'
},{
fieldLabel: 'State',
xtype: 'statecombo',
width: 234,
margin: '5 5 5 5'
}]
});
});

Here is the servlet:


@Override protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
System.out.println("Inside Post");
String selectedValue = req.getParameter("data");
System.out.println(selectedValue);
//This is the json string I want to send back to the UI
//The format of this json is correct, I verifieded it printing in console.
String jsonString = new StateHelper().getStates(selectedValue);
//Below are the lines I am having the doubt, it is not correct.
req.setAttribute("data", jsonString);
req.getRequestDispatcher("combo.jsp").forward(req, resp);
}

combo.jsp is the file containing both the combo box. Running this code, I am getting the alert with "failure" message.

Its telling syntax error in this line:


var respText = eval('('+ obj1.responseText +')');

Please let me know how to resolve this problem.

scottmartin
6 Oct 2012, 9:22 AM
Now I am not able to pass this JSONObject back to the extjs

Are you saying that your server is not issuing a response at all, or there is an error in the response?

Scott.

bunty
6 Oct 2012, 5:45 PM
This is what I got in response when checked in FF:


Response Headers view source

Content-Length
0


Date
Sun, 07 Oct 2012 01:39:41 GMT


Server
Apache-Coyote/1.1




Since nothing is there in the response, hence getting an exception when trying to decode the JSON of the response:


uncaught exception: Ext.JSON.decode(): You're trying to decode an invalid JSON String:

Not sure what am I missing in the above posted code...

Please let me know about this

scottmartin
6 Oct 2012, 5:48 PM
Verify your request is sending the correct header information. If this is correct, then you will need to debug your server and find out why it is not sending a response.

Scott.

bunty
6 Oct 2012, 6:57 PM
Ok after making some change, I am getting the response correctly.


Response Headersview source

Content-Length
767


Content-Type
text/html;charset=ISO-8859-1


Date
Sun, 07 Oct 2012 02:50:23 GMT


Server
Apache-Coyote/1.1






Since I am redireting to the same page(since both the combobox are present in the same page),I added a script block in that jsp file like this:


<script type="text/javascript"> var jsonData = <%= request.getAttribute("data") %>
</script>

Now when I try this:


alert(obj.responseText);

I am getting the entire HTML for that screen as shown in the image.

39206

But when I alert it:


alert(jsonData);

Its giving null.

Any help on this?

scottmartin
6 Oct 2012, 9:08 PM
Have a look at the following:



{"data":[{"country":"China"},{"country":"Japan"}]}




{"success": true, "data":[{"state":"Shanghai"},{"state":"Hangzou"},{"state":"Dali"}]}




Ext.onReady(function() {

var storeCountries = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: ['country'],
proxy: {
type: 'ajax',
url: 'countries.json',
reader: {
type: 'json',
root: 'data'
}
}
});

var storeStates = Ext.create('Ext.data.Store', {
autoLoad: false,
fields: ['state'],
proxy: {
type: 'ajax',
url: 'states.json', // simulate server result set
reader: {
type: 'json',
root: 'data'
}
}
});

Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Country',
store: storeCountries,
queryMode: 'local',
displayField: 'country',
valueField: 'country',
renderTo: Ext.getBody(),
listeners: {
select: function(combo) {
storeStates.load({
params: {
country: combo.value
},
callback: function(records, operation, success){
console.log(records);
console.log(success);
}
});
}
}
});

Ext.create('Ext.form.ComboBox', {
fieldLabel: 'State',
store: storeStates,
queryMode: 'local',
displayField: 'state',
valueField: 'state',
renderTo: Ext.getBody()
});

});


Scott

bunty
7 Oct 2012, 3:30 AM
Thanks for the reply. Can you inform what is the use of this params:


params: { country: combo.value
},

If I want different set of states for the two different copuntries, then how to achieve it?

Please let me know about the json format in that case.

scottmartin
7 Oct 2012, 8:25 AM
The the combo value should be should be a list that you parse on server.

Scott.

bunty
12 Oct 2012, 7:15 PM
Hi,

I am able to get the json string in my js file.

39332

Now I want to bind this json string with my combobox. I am not able to do it. Please let me know how to bind this with my combobox.


listeners: { "select": function(obj){
Ext.Ajax.request({
url: '/CellEditing/FormServlet',
method: 'POST',
params: {
data: obj.getValue()
},
success: function(obj){
alert('success');
alert(obj.responseText);
//This responseText is giving me the json string.
},
failure: function(obj){
alert('failure');
}
});
}

Regards,

scottmartin
13 Oct 2012, 7:02 AM
Combo items are populated using a store. Simply populate a store as shown above and make sure that store is assigned to the combo and you are done.

Scott.

bunty
20 Oct 2012, 5:06 AM
ok I changed the code to this:


Ext.require('Ext.tab.*');Ext.require('Ext.button.*');


Ext.define('Country',{
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'string' },
{ name: 'name', type: 'string' }
]
});


Ext.define('CountryCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.countrycombo',
allowBlank: false,
queryMode: 'local',
valueField: 'id',
displayField: 'name',
store: {
model: 'Country',
data: [
{ id: 'China', name: 'China'},
{ id: 'Japan', name: 'Japan'},
{ id: 'Malaysia', name: 'Malaysia'}
]
},
listeners: {
"select": function(obj){
Ext.Ajax.request({
url: '/CellEditing/FormServlet',
method: 'POST',
params: {
data: obj.getValue()
},
success: function(obj){
alert('success');
alert(obj.responseText);
var response = Ext.decode(obj.responseText);
StateCombo.storeStates.loadData(response.data);
},
failure: function(obj){
alert('failure');
}
});
}
}
});


var storeStates = Ext.create('Ext.data.Store', {
autoLoad: false,
fields: ['State']
});


Ext.define('State',{
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' }
]
});

Ext.define('StateCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.statecombo',
queryMode: 'local',
valueField: 'State',
displayField: 'State',
store: storeStates
});

but still not working:(

Please help me out.

bunty
22 Oct 2012, 5:10 AM
Ext.define('Country',{ extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'string' },
{ name: 'name', type: 'string' }
]
});


var storeStates = Ext.create('Ext.data.Store', {
autoLoad: false,
fields: ['State']
});


Ext.define('State',{
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' }
]
});


Ext.define('CountryCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.countrycombo',
allowBlank: false,
queryMode: 'local',
valueField: 'id',
displayField: 'name',
store: {
model: 'Country',
data: [
{ id: 'China', name: 'China'},
{ id: 'Japan', name: 'Japan'},
{ id: 'Malaysia', name: 'Malaysia'}
]
},
listeners: {
"select": function(obj){
Ext.Ajax.request({
url: '/CellEditing/FormServlet',
method: 'POST',
params: {
data: obj.getValue()
},
success: function(obj){
alert('success');
alert(obj.responseText);
var response = Ext.decode(obj.responseText);
console.log(StateCombo.storeStates); //prints undefined in the console
StateCombo.storeStates.loadData(response.data);
},
failure: function(obj){
alert('failure');
}
});
}
}
});


Ext.define('StateCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.statecombo',
queryMode: 'local',
valueField: 'State',
displayField: 'State',
store: storeStates
});

The error is:

Uncaught TypeError: Cannot call method 'loadData' of undefined