I keep getting the error thats in the title, I cant figure out why.
"Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema."
Below is my webpack config as well as my package.json. thank you in advance!
var path = require('path');
module.exports = {
devtool: 'sourcemaps',
cache: true,
mode: 'development',
output: {
path: __dirname,
filename: './src/main/resources/static/built/bundle.js'
},
module: {
rules: [{
test: path.join(__dirname, '.'),
template: 'html!' + __dirname + '/public/app/index.html',
exclude: /(node_modules)/,
use: [{
loader: 'babel-loader',
options: {
presets: ["#babel/preset-env", "#babel/preset-react"],
plugins: ["#babel/plugin-proposal-class-properties", {
"loose": true
}]
}
}]
}
]
}
};
package.json
{
"name": "eeareact",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2",
"rest": "^1.3.1"
},
"keywords": [
"rest",
"hateoas",
"spring",
"data",
"react"
],
"author": "Greg L. Turnquist",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/spring-guides/tut-react-and-spring-data-rest/issues"
},
"homepage": "https://github.com/spring-guides/tut-react-and-spring-data-rest",
"scripts": {
"start": "webpack --watch -d",
"build": "react-scripts build",
"test": "react-scripts test",
"build-assets": "webpack -p --progress",
"eject": "react-scripts eject"
},
"devDependencies": {
"#babel/core": "^7.1.0",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.2",
"webpack": "^4.19.1",
"webpack-cli": "^3.1.0"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
This is my jquery datatable ajax request... in success im getting the json data but in datatable its not showing ..its showing only loading..
<script type="text/javascript">
function inituserdatatable() {
alert("in");
try {
$('#userdetailDatatable').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "ps/getUserDetails",
"type": "post",
"datatype": "json",
"success": function(data) {
},
},
"columns": [{
'data': 'name'
},
{
'data': 'email_id'
},
{
'data': 'user_name'
},
{
'data': 'password'
}
],
dom: 'Bfrtip',
});
} catch (exp) {
alert(exp);
}
}
</script>
This is my json data from postgresql
{
"data": [{
"id": 12,
"name": "",
"email_id": "",
"user_name": "",
"password": ""
}, {
"id": 13,
"name": "Ss",
"email_id": "sd",
"user_name": "g",
"password": "g"
}]
}
Remove the following processing and serverSide options, they are not needed based on your data format.
I want to bind me ext js form with an object Java.
For now I can just bind each field individually like that :
My Form :
Ext.define('MyApp.view.login.Login', {
extend: 'Ext.window.Window',
alias: 'widget.login',
requires : ['Ext.form.Panel', 'Ext.layout.container.Fit'],
autoShow: true,
height: 200,
width: 400,
layout: 'fit',
iconCls: 'key',
title: "Login",
closeAction: 'hide',
closable: false,
draggable: false,
resizable: false,
items: [
{
xtype: 'form',
frame: false,
bodyPadding: 15,
layout: 'anchor',
defaults: {
anchor: '100%',
labelWidth: 100
},
defaultType: 'textfield',
items: [
{
name: 'user',
fieldLabel: "Login ",
allowBlank: false,
msgTarget: 'under',
emptyText: 'Login',
maxLength: 25
},
{
inputType: 'password',
name: 'password',
fieldLabel: "Password",
emptyText:'Password',
allowBlank: false,
msgTarget: 'under',
maxLength: 15,
enableKeyEvents: true,
id: 'login-password'
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
itemId: 'cancel',
text: 'Cancel'
},
{
xtype: 'button',
itemId: 'submit',
formBind: true,
text: "Submit"
}
]
}
]
}
]
});
A part of my submit method :
loginForm.submit({
method : 'POST',
url: '/myapp/login/login.sp',
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
switch (action.failureType) {
case Ext.form.action.Action.CLIENT_INVALID:
Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
break;
case Ext.form.action.Action.CONNECT_FAILURE:
Ext.Msg.alert('Failure', 'Ajax communication failed');
break;
case Ext.form.action.Action.SERVER_INVALID:
Ext.Msg.alert('Failure', action.result.msg);
}
}
});
My method of my Java Controller for login :
#RequestMapping(value="login/login", method= RequestMethod.POST)
public void checkConnection(#RequestParam(value="user", required = true) String user, #RequestParam(value="password", required = true) String password) {
logger.info("LOGIN !!!");
}
And I want something like this :
#RequestMapping(value="login/login", method= RequestMethod.POST)
public void checkConnection(#Annotation LoginModel) {
logger.info("LOGIN !!!");
}
And my LoginModel would be like this :
public class LoginModel {
/** User */
private String user;
/** Password */
private String password;
}
regards.
I believe #ModelAttribute is what you need. It tells Spring to retrieve the parameters from the model.
#RequestMapping(value="login/login", method= RequestMethod.POST)
public void checkConnection(#ModelAttribute LoginModel loginModel) {
logger.info("LOGIN !!!");
}
I have to implement the jqxGrid using spring.I don't know how to do it on spring.Below is my controller class
AccountController.java:
#Controller
#RequestMapping(value="/account")
public class AccountsController {
#Autowired
private AccountService accountService;
#RequestMapping(value = "/list", method = RequestMethod.GET, headers =
"Accept=application/json")
public #ResponseBody ModelAndView listOfAccounts() {
ModelAndView modelAndView = new ModelAndView();
List<Accounts> accounts = accountService.getAccounts();
modelAndView.addObject("accounts", accounts);
return modelAndView;
}
}
I think the json data retrieved from Accounts.java class is in the format :
[{"id":"1","PeriodName":2000-2001,"PeriodStartDate":"2000-01-01","PeriodEndDate":"2001-12-31"},{"id":"2","PeriodName":2001-2002,"PeriodStartDate":"2001-01-01","PeriodEndDate":"2002-12-31"}]
Below is jquery get request for the json response and code for getting the jqxGrid:
$.get('account/list',function(responseJson) {
var data = responseJson;
var source =
{
datatype: "json",
datafields: [
{ name: 'id' },
{ name: 'PeriodName' },
{ name: 'PeriodStartDate' },
{ name: 'PeriodEndDate' }
],
id: 'id',
localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
//columnsresize: true,
width: 800,
source: dataAdapter,
pageable: true,
//pagerButtonsCount: 10,
autoheight: true,
// editable: false,
pagerrenderer: pagerrenderer,
columns: [
{ text: 'Period Name', datafield: 'PeriodName', width: 200 },
{ text: 'Start Date', datafield: 'PeriodStartDate', width: 200 },
{ text: 'End Date', datafield: 'PeriodEndDate', width: 200 }
]
});
});
But i didn't get the grid on here.I don't know where is the problem in the above code.I have imported all js files for jqxGrid.Please help me to solve this
*I looked on your problem here is the same code (little modified). comment that pagerenderer code .You have not defined the pagerenderer function anywhere. It will work. here is the working code http://jsfiddle.net/qwm3z/ .
responseJson = <c:out value="${accounts}" />;
var data = responseJson;
var source =
{
datatype: "json",
datafields: [
{ name: 'id' },
{ name: 'PeriodName' },
{ name: 'PeriodStartDate' },
{ name: 'PeriodEndDate' }
],
id: 'id',
localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
//columnsresize: true,
width: 800,
source: dataAdapter,
pageable: true,
//pagerButtonsCount: 10,
autoheight: true,
// editable: false,
// pagerrenderer: pagerrenderer,
columns: [
{ text: 'Period Name', datafield: 'PeriodName', width: 200 },
{ text: 'Start Date', datafield: 'PeriodStartDate', width: 200 },
{ text: 'End Date', datafield: 'PeriodEndDate', width: 200 }
]
});
and why are you making grid in each response? you can make one time and update it for every get request.*
I'm trying to bind the JSON data object retrieved from the servlet.
$("#mainVerticalMenu").kendoMenu({
dataSource : new kendo.data.DataSource({
transport: {
read: {
url: "net/samso/action/MenuAction?func_flag=getMenu&user_id=nexol", // the servlet url
dataType: "json",
}
},
schema: { // describe the result format
model : {
fields : {
text : {
type : "string"
},
value : {
type : "string"
},
subItemList: [{ // Sub item collection
text : {
type : "string"
},
value : {
type : "string"
}
}]
}
}
}
})
});
From the servlet, the JSON format is given as follows:
Hierarchy:
Text
Value
subItemList (ItemObject nested inside the menuitem)
- Text
- Value
Example JSON:
Which ends up looking like:
[{"text":"OuterMenu1","value":"menu1","subItemList":[{"text":"subMenuItem1","value":"subMenu1"},{"text":"subMenuItem2","value":"subMenu2"}]}]
Actual JSON I receive when calling the servlet directly:
[{"text":"Communication","value":"BASE_01","subItemList":[{"text":"상품소개조회","value":"BASE_01"},{"text":"공지사항","value":"BASE_02"},{"text":"의견수렴","value":"BASE_04"},{"text":"사용자관리","value":"BASE_05"},{"text":"받은쪽지","value":"BASE_07"},{"text":"보낸쪽지","value":"BASE_08"},{"text":"자유게시판","value":"BASE_09"},{"text":"매장/마진율 정보","value":"BASE_10"}]},{"text":"매입관리","value":"BUY_01","subItemList":[{"text":"입고/입고반품현황","value":"BUY_01"},{"text":"수평이동요청","value":"BUY_02"},{"text":"수평이동승인/조회","value":"BUY_03"}]},{"text":"판매관리","value":"SALE_01","subItemList":[{"text":"판매및반품등록","value":"SALE_01"},{"text":"판매및반품조회","value":"SALE_02"},{"text":"판매일보","value":"SALE_04"},{"text":"기간별판매현황","value":"SALE_05"},{"text":"판매순위분석","value":"SALE_06"},{"text":"판매순위표","value":"SALE_07"},{"text":"타사등록","value":"SALE_08"},{"text":"타사판매등록","value":"SALE_09"},{"text":"타사판매조회","value":"SALE_10"}]},{"text":"수불관리","value":"SUBUL_01","subItemList":[{"text":"상품주문등록","value":"SUBUL_01"},{"text":"상품주문조회","value":"SUBUL_02"},{"text":"미입고명세서","value":"SUBUL_10"},{"text":"일별수불현황","value":"SUBUL_04"},{"text":"재고현황","value":"SUBUL_05"},{"text":"수불 일/월보","value":"SUBUL_09"},{"text":"품목별수불현황","value":"SUBUL_08"},{"text":"재고조정","value":"SUBUL_11"},{"text":"타매장재고현황","value":"SUBUL_07"}]},{"text":"영업관리","value":"BUSS_01","subItemList":[{"text":"영업판매배치등록","value":"BUSS_01"},{"text":"영업판매조회","value":"BUSS_02"},{"text":"영업주문배치등록","value":"BUSS_03"},{"text":"영업주문조회","value":"BUSS_04"},{"text":"매장별 재고/수불현황","value":"BUSS_05"}]},{"text":"AS관리","value":"AS_01","subItemList":[{"text":"A/S의뢰 관리","value":"AS_01"}]},{"text":"관리자","value":"SUP_06","subItemList":[{"text":"기초코드관리","value":"SUP_06"},{"text":"시스템관리","value":"SUP_05"},{"text":"그룹관리","value":"SUP_02"},{"text":"그룹소속관리","value":"SUP_03"},{"text":"그룹권한관리","value":"SUP_04"},{"text":"매장등록현황","value":"SUP_01"},{"text":"마진율조회","value":"SUP_07"},{"text":"상품코드별권한등록","value":"SUP_08"},{"text":"거래처별상품권한등록","value":"SUP_09"},{"text":"마감현황","value":"SUP_10"},{"text":"SAP송수신기록조회","value":"SUP_12"}]},{"text":"회계","value":"ACCT_01","subItemList":[{"text":"WEB-POS 사용자현황","value":"ACCT_01"},{"text":"WEB-POS 입금등록","value":"ACCT_02"}]}]
I'd like to ask two questions:
The servlet is not being called at all, even though I've explicitly declared the transport URL in the datasource.
Is the above schema correct for declaring outer menu items and nesting items inside them?
The servlet is not being called because Kendo Menu does not define a DataSource for loading its content. BUT that doesn't mean that you cannot do it: yes, you can!
What you should do is:
Define an empty menu.
Define a DataSource.
Trigger manually a read in the DataSource
Append received data to the original menu.
The code:
var menu = $("#menu").kendoMenu({}).data("kendoMenu");
var ds = new kendo.data.DataSource({
transport: {
read: {
url : "menu.json",
dataType: "json"
}
},
schema : {
data: function (data) {
menu.append(data);
}
}
});
ds.read();
About your second question regarding the format of the JSON: replace subItemList by items, that's it. The entries on your JSON would look like:
[
{
"text" : "Communication",
"value" : "BASE_01",
"items": [
{
"text" : "상품소개조회",
"value": "BASE_01"
},
{
"text" : "공지사항",
"value": "BASE_02"
},
{
"text" : "의견수렴",
"value": "BASE_04"
},
{
"text" : "사용자관리",
"value": "BASE_05"
},
{
"text" : "받은쪽지",
"value": "BASE_07"
},
{
"text" : "보낸쪽지",
"value": "BASE_08"
},
{
"text" : "자유게시판",
"value": "BASE_09"
},
{
"text" : "매장/마진율 정보",
"value": "BASE_10"
}
]
},
{
"text" : "매입관리",
"value" : "BUY_01",
"items": [
{
"text" : "입고/입고반품현황",
"value": "BUY_01"
},
{
"text" : "수평이동요청",
"value": "BUY_02"
},
{
"text" : "수평이동승인/조회",
"value": "BUY_03"
}
]
},
{
"text" : "판매관리",
"value" : "SALE_01",
"items": [
{
"text" : "판매및반품등록",
"value": "SALE_01"
},
{
"text" : "판매및반품조회",
"value": "SALE_02"
},
{
"text" : "판매일보",
"value": "SALE_04"
},
{
"text" : "기간별판매현황",
"value": "SALE_05"
},
{
"text" : "판매순위분석",
"value": "SALE_06"
},
{
"text" : "판매순위표",
"value": "SALE_07"
},
{
"text" : "타사등록",
"value": "SALE_08"
},
{
"text" : "타사판매등록",
"value": "SALE_09"
},
{
"text" : "타사판매조회",
"value": "SALE_10"
}
]
},
{
"text" : "수불관리",
"value" : "SUBUL_01",
"items": [
{
"text" : "상품주문등록",
"value": "SUBUL_01"
},
{
"text" : "상품주문조회",
"value": "SUBUL_02"
},
{
"text" : "미입고명세서",
"value": "SUBUL_10"
},
{
"text" : "일별수불현황",
"value": "SUBUL_04"
},
{
"text" : "재고현황",
"value": "SUBUL_05"
},
{
"text" : "수불 일/월보",
"value": "SUBUL_09"
},
{
"text" : "품목별수불현황",
"value": "SUBUL_08"
},
{
"text" : "재고조정",
"value": "SUBUL_11"
},
{
"text" : "타매장재고현황",
"value": "SUBUL_07"
}
]
},
{
"text" : "영업관리",
"value" : "BUSS_01",
"items": [
{
"text" : "영업판매배치등록",
"value": "BUSS_01"
},
{
"text" : "영업판매조회",
"value": "BUSS_02"
},
{
"text" : "영업주문배치등록",
"value": "BUSS_03"
},
{
"text" : "영업주문조회",
"value": "BUSS_04"
},
{
"text" : "매장별 재고/수불현황",
"value": "BUSS_05"
}
]
},
{
"text" : "AS관리",
"value" : "AS_01",
"items": [
{
"text" : "A/S의뢰 관리",
"value": "AS_01"
}
]
},
{
"text" : "관리자",
"value" : "SUP_06",
"items": [
{
"text" : "기초코드관리",
"value": "SUP_06"
},
{
"text" : "시스템관리",
"value": "SUP_05"
},
{
"text" : "그룹관리",
"value": "SUP_02"
},
{
"text" : "그룹소속관리",
"value": "SUP_03"
},
{
"text" : "그룹권한관리",
"value": "SUP_04"
},
{
"text" : "매장등록현황",
"value": "SUP_01"
},
{
"text" : "마진율조회",
"value": "SUP_07"
},
{
"text" : "상품코드별권한등록",
"value": "SUP_08"
},
{
"text" : "거래처별상품권한등록",
"value": "SUP_09"
},
{
"text" : "마감현황",
"value": "SUP_10"
},
{
"text" : "SAP송수신기록조회",
"value": "SUP_12"
}
]
},
{
"text" : "회계",
"value" : "ACCT_01",
"items": [
{
"text" : "WEB-POS 사용자현황",
"value": "ACCT_01"
},
{
"text" : "WEB-POS 입금등록",
"value": "ACCT_02"
}
]
}
]