I follow a tutorial but I still having a problem as title say. I have a index.html and a backend with Node connected to Mongodb and I can't get it to work.
Here is my index.html
<!doctype html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Basic initialization</title>
<link rel="stylesheet" href="https://cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler_material_nofont.css">
<script src="https://cdn.dhtmlx.com/scheduler/edge/sources/dhtmlxscheduler.js"></script>
<style>
html,
body {
margin: 0px;
padding: 0px;
height: 100%;
overflow: hidden;
}
</style>
<script>
function init() {
scheduler.config.xml_date = "%Y-%m-%d %H:%i";
scheduler.init("scheduler_here", new Date(), "week");
// enables the dynamic loading
scheduler.setLoadMode("day");
// load data from backend
scheduler.load("/data", "json");
// connect backend to scheduler
var dp = new dataProcessor("/data");
// set data exchange mode
dp.init(scheduler);
dp.setTransactionMode("POST", false);
}
</script>
</head>
<body onl oad="init();">
<div id="scheduler_here" style='width:100%; height:100%;'>
<div >
<div > </div>
<div > </div>
<div ></div>
<div ></div>
<div name="day_tab"></div>
<div name="week_tab"></div>
<div name="month_tab"></div>
</div>
<div >
</div>
<div >
</div>
</div>
</body>
And as the title say I get this error:
(índice):28 Uncaught ReferenceError: dataProcessor is not defined
at init ((índice):28:13)
at onl oad ((índice):36:24)
And my backend works right because on my /data route with this code
app.get('/data', function (req, res) {
events.find().toArray(function (err, data) {
//set the id property for all client records to the database records, which are stored in ._id field
for (var i = 0; i < data.length; i ){
data[i].id = data[i]._id;
delete data[i]["!nativeeditor_status"];
}
//output response
res.send(data);
});
});
I can get this JSON object (that it works loaded from MongoDB):
[{"_id":"62d73a68fcb2de5910bd9f08","text":"Some Helpful event","start_date":"2022-08-31T22:00:00.000Z","end_date":"2022-09-04T22:00:00.000Z","id":"62d73a68fcb2de5910bd9f08"},{"_id":"62d73a68fcb2de5910bd9f09","text":"Another Cool Event","start_date":"2022-09-10T22:00:00.000Z","end_date":"2022-09-10T22:00:00.000Z","id":"62d73a68fcb2de5910bd9f09"},{"_id":"62d73a68fcb2de5910bd9f0a","text":"Super Activity","start_date":"2022-09-08T22:00:00.000Z","end_date":"2022-09-09T22:00:00.000Z","id":"62d73a68fcb2de5910bd9f0a"},{"_id":"62d73ab8fcb2de5910bd9f0b","text":"Some Helpful event","start_date":"2022-08-31T22:00:00.000Z","end_date":"2022-09-04T22:00:00.000Z","id":"62d73ab8fcb2de5910bd9f0b"},{"_id":"62d73ab8fcb2de5910bd9f0c","text":"Another Cool Event","start_date":"2022-09-10T22:00:00.000Z","end_date":"2022-09-10T22:00:00.000Z","id":"62d73ab8fcb2de5910bd9f0c"},{"_id":"62d73ab8fcb2de5910bd9f0d","text":"Super Activity","start_date":"2022-09-08T22:00:00.000Z","end_date":"2022-09-09T22:00:00.000Z","id":"62d73ab8fcb2de5910bd9f0d"},{"_id":"62d73ab9fcb2de5910bd9f0e","text":"Some Helpful event","start_date":"2022-08-31T22:00:00.000Z","end_date":"2022-09-04T22:00:00.000Z","id":"62d73ab9fcb2de5910bd9f0e"},{"_id":"62d73ab9fcb2de5910bd9f0f","text":"Another Cool Event","start_date":"2022-09-10T22:00:00.000Z","end_date":"2022-09-10T22:00:00.000Z","id":"62d73ab9fcb2de5910bd9f0f"},{"_id":"62d73ab9fcb2de5910bd9f10","text":"Super Activity","start_date":"2022-09-08T22:00:00.000Z","end_date":"2022-09-09T22:00:00.000Z","id":"62d73ab9fcb2de5910bd9f10"},{"_id":"62d73abafcb2de5910bd9f11","text":"Some Helpful event","start_date":"2022-08-31T22:00:00.000Z","end_date":"2022-09-04T22:00:00.000Z","id":"62d73abafcb2de5910bd9f11"},{"_id":"62d73abafcb2de5910bd9f12","text":"Another Cool Event","start_date":"2022-09-10T22:00:00.000Z","end_date":"2022-09-10T22:00:00.000Z","id":"62d73abafcb2de5910bd9f12"},{"_id":"62d73abafcb2de5910bd9f13","text":"Super Activity","start_date":"2022-09-08T22:00:00.000Z","end_date":"2022-09-09T22:00:00.000Z","id":"62d73abafcb2de5910bd9f13"},{"_id":"62d7d077c94c005194ecf8d7","text":"Some Helpful event","start_date":"2022-08-31T22:00:00.000Z","end_date":"2022-09-04T22:00:00.000Z","id":"62d7d077c94c005194ecf8d7"},{"_id":"62d7d077c94c005194ecf8d8","text":"Another Cool Event","start_date":"2022-09-10T22:00:00.000Z","end_date":"2022-09-10T22:00:00.000Z","id":"62d7d077c94c005194ecf8d8"},{"_id":"62d7d077c94c005194ecf8d9","text":"Super Activity","start_date":"2022-09-08T22:00:00.000Z","end_date":"2022-09-09T22:00:00.000Z","id":"62d7d077c94c005194ecf8d9"}]
Why I get this error if I follow the tutorial from official web https://dhtmlx.com/blog/using-dhtmlxscheduler-with-node-js/
I tried to change function to new DataProcessor("/data") and get the same error
CodePudding user response：
in the cdn file you imported
https://cdn.dhtmlx.com/scheduler/edge/sources/dhtmlxscheduler.js
it seems that it's DataProcessor and not dataProcessor
function DataProcessor(serverProcessorURL) {
this.serverProcessor = serverProcessorURL;
this.action_param = "!nativeeditor_status";
this.object = null;
this.updatedRows = []; // ids of updated rows
this.autoUpdate = true;
this.updateMode = "cell";
this._tMode = "GET";
this._headers = null;
this._payload = null;
this.post_delim = "_";
this._waitMode = 0;
this._in_progress = {};
this._invalid = {};
this.messages = [];
this.styles = {
updated: "font-weight:bold;",
inserted: "font-weight:bold;",
deleted: "text-decoration : line-through;",
invalid: "background-color:FFE0E0;",
invalid_cell: "border-bottom:2px solid red;",
error: "color:red;",
clear: "font-weight:normal;text-decoration:none;"
};
this.enableUTFencoding(true);
Object(_utils_eventable__WEBPACK_IMPORTED_MODULE_1__["default"])(this); // TODO: need to update
return this;
}
CodePudding user response：
I found the problem. In the last version 6.0 they replaced the initialization from new DataProcess to scheduler.createDataProcessor. Then, the new code working right is:
// index.html
<!doctype html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Basic initialization</title>
<link rel="stylesheet" href="https://cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler_material_nofont.css">
<script src="https://cdn.dhtmlx.com/scheduler/edge/sources/dhtmlxscheduler.js"></script>
<style>
html,
body {
margin: 0px;
padding: 0px;
height: 100%;
overflow: hidden;
}
</style>
<script>
function init() {
scheduler.config.xml_date = "%Y-%m-%d %H:%i";
scheduler.init("scheduler_here", new Date(), "week");
// enables the dynamic loading
scheduler.setLoadMode("day");
// load data from backend
scheduler.load("/data", "json");
// connect backend to scheduler
var dp = new scheduler.DataProcessor("/data");
// set data exchange mode
dp.init(scheduler);
dp.setTransactionMode("POST", false);
}
</script>
</head>
<body onl oad="init();">
<div id="scheduler_here" style='width:100%; height:100%;'>
<div >
<div > </div>
<div > </div>
<div ></div>
<div ></div>
<div name="day_tab"></div>
<div name="week_tab"></div>
<div name="month_tab"></div>
</div>
<div >
</div>
<div >
</div>
</div>
</body>
Here the forum where I found it: https://forum.dhtmlx.com/t/dataprocessor-undefined-error-in-scheduler-node-and-laravel-project/74501
And here the documentation migrating from older versions: https://docs.dhtmlx.com/scheduler/migration_from_older_version.html#5360:~:text=DataProcessor initialization
Thanks for all anyway.