Uncaught Ext.Error: You're trying to decode an invalid JSON String: Form Submission using Ext JS and Spring MVC

Question

I am getting the following error after submitting my Ext JS form:

Uncaught Ext.Error: You're trying to decode an invalid JSON String

JS:

Ext.onReady(function() {

        var simple = Ext.create('Ext.form.Panel', {

                    frame : true,
                    title : 'Login Form',
                    bodyStyle : 'padding:5px 5px 0',
                    width : 350,
                    fieldDefaults : {
                        msgTarget : 'side',
                        labelWidth : 75
                    },
                    defaultType : 'textfield',
                    defaults : {
                        anchor : '100%'
                    },

                    items : [{
                                fieldLabel : 'User Name',
                                name : 'userName',
                                allowBlank : false,
                                emptyText : 'UserName'
                            }, {
                                fieldLabel : 'Password',
                                name : 'password',
                                allowBlank : false,
                                inputType : 'password',
                                emptyText : 'Password'
                            }],

                    buttons : [{
                        text : 'Save',
                        handler : function() {
                            var form = this.up('form').getForm();
                            form.submit({
                                        url : saveFormUrl
                                    //  waitMsg : 'Sending the info...',
                                    //  success : function(fp, o) {
                                    //      Ext.Msg.alert('Success',
                                    //              'Form submitted.');
                                    //  }
                                    });
                        }
                    }, {
                        text : 'Cancel'
                    }]
                });
        simple.render(document.body);
        simple.getEl().center();
    });

Controller class:

@Controller
public class UserController {

private static final Logger logger = LoggerFactory
        .getLogger(TController.class);

private TService tService = null;

@Autowired
public void setTService(TService tService) {
    this.tService = tService;
}

@RequestMapping(value = "/index.html", method = RequestMethod.GET)
public String home() {
    System.out.println("Welcome home!");
    return "login";
}

@RequestMapping(value = "/save-form.html", method = RequestMethod.POST)
public ModelAndView submitData(User user){
    System.out.println("User name:"+user.getUserName());
    ModelAndView mv = new ModelAndView("htmlLinks");
    return mv;
}

save-form.html:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>POC</title>

</head>
<body>
 Welcome User !!
</body>
</html>

What am I doing wrong? What is the solution? I am using Ext JS 4 and Spring MVC.

Have you taken a look at this: http://stackoverflow.com/questions/7023531/extjs-4-spring-3-file-upload-server-sends-bad-response-content-type — andy, Jul 24 '12 at 17:05
I did look at it, but my problem is that, I am parsing another jsp once I return from Spring controller class. So, I am not sure, what exactly should I do? — tech_enthusiast, Jul 24 '12 at 18:28
I don't have experience with extJS, but where is the exception being thrown (is it in the lines you commented out in the JS)? Also, how are you intending to use the HTML response? — andy, Jul 24 '12 at 21:18
Hi Andy, I am seeing this exception in Chrome Developer tools --> Console. I have a login page, which will ask for user name and password .. once user is authenticated, I have to have use CRUD operations and generate report functionality.. I hope I answered what you asked.. Let me know in case of doubts.. — tech_enthusiast, Jul 24 '12 at 21:20

score 5 · Accepted Answer · edited Nov 04 '16 at 21:24

According to the documentation for form.submit, it looks like the response is required to be either JSON or XML, formatted like so:

{
    success: true,
    data: {
        url: "http://somewhere",
        someData: "whatever you want"
    }
}

In your JavaScript's success handler, you can reference o.data.[variable] to get custom data.

Unfortunately, you will need to change the submitData method (in your controller) to return a JSON response object in the structure defined above. In the response object, you can include a URL to save-form.html. Then you can make an additional GET request for it in the success handler.

I don't know if this will work because I have no experience with Ext JS, but I would envision the success handler to look something like this:

success: function(fp, o) {
    Ext.Msg.alert('Success', 'Form submitted.');
    Ext.Ajax.request({
        url: o.data.url,
        method: "GET",
        success: function(response, request) {
            // do whatever you need to with the generated HTML
            alert(response.responseText);
        },
        failure: function(response, request) {
            alert('failed');
        }
    });
}

Hi , @Andy, Thanks for reply. I resolved it using the below code. [code] buttons : [{ text : 'Save', handler : function() { // The getForm() method returns the // Ext.form.Basic instance: var form = this.up('form').getForm(); form.submit(); } }, { text : 'Cancel' }][/code] — tech_enthusiast, Jul 30 '12 at 19:41

score 1 · Answer 2 · edited Oct 05 '17 at 09:59

1

Thanks for all replies. I resolved it using the below code.

buttons : [{ 
    text : 'Save', 
    handler : function() { 
        // The getForm() method returns the 
        // Ext.form.Basic instance: 
        var form = this.up('form').getForm(); 
        form.submit(); 
    } 
}, { 
    text : 'Cancel' 
}]

edited Oct 05 '17 at 09:59

Coderino Javarino

2,819
4
21
43

answered Jan 17 '13 at 19:35

tech_enthusiast

683
3
12
37

Uncaught Ext.Error: You're trying to decode an invalid JSON String: Form Submission using Ext JS and Spring MVC

2 Answers2

Linked