Uncaught Error: You're trying to decode an invalid JSON String - json

Question

I have facing problems with EXT js code to store data using Java.
Below is my code. Can one please help me.
Below is my NewCustomersVerify.js code:
var myHit = Ext.create('Ext.data.Store',{
fields:['Id','Name'],
data:[
{Id:'0',Name:'No'},
{Id:'1',Name:'Yes'}
]
});
var myRisk = Ext.create('Ext.data.Store',{
fields:['Id','Name'],
data:[
{Id:'0',Name:'Low'},
{Id:'1',Name:'High'}
]
});
Ext.define('Test.test.web.test.view.test.NewCustomersVerify', {
"xtype": "newCustomersVerify",
"items": [{
"xtype": "panel",
"items": [{
"xtype": "panel",
"items": [{
"xtype": "displayfield",
"fieldLabel": "Name :",
"margin": 5,
"value": "TEXT",
"name": "customerName",
"title": "Customer Name",
"itemId": "lnajnbi", "bind": "{customerName}"
},{
"xtype": "displayfield",
"fieldLabel": "Nationality :",
"margin": 5,
"value": "TEXT",
"name": "nationality",
"title": "Nationality",
"itemId": "lnbjnbi", "bind": "{nationality}"
},{
"xtype": "displayfield",
"fieldLabel": "UniqueId No :",
"margin": 5,
"value": "TEXT",
"name": "uniqueIdNo",
"title": "UniqueId No",
"itemId": "lncjnbi", "bind": "{uniqueIdNo}"
},{
"xtype": "hiddenfield",
"fieldLabel": "HiddenText",
"bindable": "contactId",
"margin": 5,
"name": "contactId",
"title": "HiddenText",
"itemId": "oidgafi",
"bind": "{contactId}"
},{
"xtype": "hiddenfield",
"fieldLabel": "HiddenText",
"bindable": "screeningId",
"margin": 5,
"name": "screeningId",
"title": "HiddenText",
"itemId": "didgafi",
"bind": "{screeningId}"
}],
"layout": "vbox",
"autoScroll": true,
"margin": 5,
"columnWidth": 0.5,
"itemId": "cieadni",
"dockedItems": []
}, {
"xtype": "panel",
"items": [
{
"xtype": "combo",
"fieldLabel": "Was there a verify hit?",
"name": "screeningHit",
"margin": 5,
"bindable": "screeningHit",
"title": "Was there a verify hit?",
"columnWidth": 0.5,
"width": "100",
"labelAlign": "left",
"itemId": "kbfmjgi",
displayField:'Name',
valueField:'Id',
queryMode:'local',
store: myHit,
}, {
"xtype": "combo",
"fieldLabel": "Country Risk (Nationality)",
"name": "countryRisk",
"margin": 5,
"bindable": "countryRisk",
"title": "Country Risk (Nationality)",
"columnWidth": 0.5,
"width": "100",
"labelAlign": "left",
"itemId": "kbgajgi",
displayField:'Name',
valueField:'Id',
queryMode:'local',
store: myRisk
}, {
"xtype": "combo",
"fieldLabel": "Occupation Risk",
"name": "occupationRisk",
"margin": 5,
"bindable": "occupationRisk",
"title": "Occupation Risk",
"columnWidth": 0.5,
"width": "100",
"labelAlign": "left",
"itemId": "kbaajgi",
displayField:'Name',
valueField:'Id',
queryMode:'local',
store: myRisk
}, {
"xtype" : "filefield",
"fieldLabel": "Upload evidence of verify (Screenshot from the verify portal)",
"msgTarget" : "side",
"allowBlank" : "false",
"buttonOnly" : "true",
"margin" : 5,
"name" : "uploadFile",
buttonConfig : {
"text" : "Upload",
"icon" : "images/cloud/upload.png",
},
listeners : {
change :"uploadFile"
}
}],
"layout": "vbox",
"autoScroll": true,
"margin": 5,
"columnWidth": 0.5,
"itemId": "nehbeki",
"dockedItems": []
}],
"layout": "column",
"autoScroll": true,
"border": true,
"margin": 5,
"itemId": "gjihcpi",
"dockedItems": [{
"xtype": "toolbar",
"dock": "bottom",
"ui": "footer",
"isToolBar": true,
"isDockedItem": true,
"items": [{
"xtype": "tbfill",
"itemId": "hajhegi"
},
/* {
"xtype": "button",
"name": "cancel",
"text": "Cancel",
"margin": 5,
"isResetButton": true,
"itemId": "bbkmkmi",
"listeners": {
"click": "oncancelclick"
}
},*/
{
"xtype": "button",
"name": "Confirm",
"text": "Confirm",
"margin": 5,
"itemId": "celbgji",
"listeners": {
"click": "onConfirmclick"
}
}],
"columnWidth": 0.5,
"itemId": "lfmepni",
"dockedItems": []
}]
}],
"border": true,
"autoScroll": false,
// "title": "New Customer Verify",
"margin": 5,
"itemId": "dinfmki",
"dockedItems": [],
"extend": "Ext.form.Panel",
"listeners": {
"afterrender": "onafterrender",
"scope": "controller"
},
"requires": ["Test.test.web.test.controller.test.NewCustomersVerifyController", "Test.test.shared.test.viewmodel.test.NewCustomersVerifyViewModel", "Test.test.shared.test.model.test.NewCustomersVerifyModel"],
"viewModel": "NewCustomersVerifyViewModel",
"controller": "NewCustomersVerifyController"
});
Below is my button onConfirmclick function call on NewCustomersVerifyContoller.js
onConfirmclick: function(me, e, eOpts) {
var jsonData = {};
jsonData.contactId = this.view.down('#oidgafi').getValue();
jsonData.screeningId = this.view.down('#didgafi').getValue();
jsonData.screeningHit = this.view.down('#kbfmjgi').getValue();
jsonData.countryHit = this.view.down('#kbgajgi').getValue();
jsonData.occupationHit = this.view.down('#kbaajgi').getValue();
var scope = this.getView();
Ext.MessageBox.show({
msg : 'Saving data...',
progressText : 'Saving...',
width : 300,
wait : true,
waitConfig : {
interval : 200
}
});
Ext.Ajax.request({
url: 'secure/NewCustomersVerifyServiceWS/respond',
method: 'POST',
sender: scope,
jsonData: jsonData,
me: me,
success: function(response, scope) {
Ext.MessageBox.hide();
responseData = Ext.JSON.decode(response.responseText);
Ext.Msg.alert('Server Response', responseData.response.message);
win = scope.sender.up();
win.reportViewController.queryCriteria.controller.filterData(win.searchButtonRef);
win.close();
},
failure: function(response, scope) {
Ext.MessageBox.hide();
responseData = Ext.JSON.decode(response.responseText);
Ext.Msg.alert('Server Response', responseData.response.message);
}
}, scope);
}
Below is the error i was getting on the browser console.
[E] Ext.JSON.decode(): You're trying to decode an invalid JSON String:
Apache Tomcat/8.0.21 - Error
reportH1
{font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:22px;}
H2
{font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:16px;}
H3
{font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:14px;}
BODY
{font-family:Tahoma,Arial,sans-serif;color:black;background-color:white;}
B
{font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;} P
{font-family:Tahoma,Arial,sans-serif;background:white;color:black;font-size:12px;}A
{color : black;}A.name {color : black;}.line {height: 1px;
background-color: #525D76; border: none;}
HTTP Status 400 - type Status reportmessage
description The request sent by the client was
syntactically incorrect.Apache
Tomcat/8.0.21

Answer 1

Error is on Ajax success or failure function. You are trying to decode invalid json which is passed from your controller (or middle layer server). You need to console the response before decode any string.
Just add console log before Ext.decode(). and post response here. That will solve your problem.

Answer 2

thank you for your support.
I have declared the variable occupationRisk as **occupationHit **.
That's the problem... Now its solved.