Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Redirecting with json object

  1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    55
    Vote Rating
    0
      0  

    Default Redirecting with json object

    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:

    Code:
    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:

    Code:
    @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:

    Code:
    var respText = eval('('+ obj1.responseText +')');
    Please let me know how to resolve this problem.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    505
      0  

    Default

    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.

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    55
    Vote Rating
    0
      0  

    Default

    This is what I got in response when checked in FF:

    Code:
    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:

    Code:
    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

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    505
      0  

    Default

    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.

  5. #5
    Sencha User
    Join Date
    Sep 2012
    Posts
    55
    Vote Rating
    0
      0  

    Default

    Ok after making some change, I am getting the response correctly.

    Code:
    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:

    Code:
    <script type="text/javascript">                var jsonData = <%= request.getAttribute("data") %>
        </script>
    Now when I try this:

    Code:
    alert(obj.responseText);
    I am getting the entire HTML for that screen as shown in the image.

    Untitled.png

    But when I alert it:

    Code:
    alert(jsonData);
    Its giving null.

    Any help on this?

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    505
      0  

    Default

    Have a look at the following:

    Code:
    {"data":[{"country":"China"},{"country":"Japan"}]}
    Code:
    {"success": true, "data":[{"state":"Shanghai"},{"state":"Hangzou"},{"state":"Dali"}]}
    Code:
    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

  7. #7
    Sencha User
    Join Date
    Sep 2012
    Posts
    55
    Vote Rating
    0
      0  

    Default

    Thanks for the reply. Can you inform what is the use of this params:

    Code:
    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.

  8. #8
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    505
      0  

    Default

    The the combo value should be should be a list that you parse on server.

    Scott.

  9. #9
    Sencha User
    Join Date
    Sep 2012
    Posts
    55
    Vote Rating
    0
      0  

    Default

    Hi,

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

    Untitled.png

    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.

    Code:
     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,

  10. #10
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    505
      0  

    Default

    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.

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •