Question 117250 in Mongodb Question posted in
The official documentation can be found here.

Mongodb – Uncaught ReferenceError: dataProcessor is not defined

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 onload="init();">
    <div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
        <div class="dhx_cal_navline">
            <div class="dhx_cal_prev_button">&nbsp;</div>
            <div class="dhx_cal_next_button">&nbsp;</div>
            <div class="dhx_cal_today_button"></div>
            <div class="dhx_cal_date"></div>
            <div class="dhx_cal_tab" name="day_tab"></div>
            <div class="dhx_cal_tab" name="week_tab"></div>
            <div class="dhx_cal_tab" name="month_tab"></div>
        </div>
        <div class="dhx_cal_header">
        </div>
        <div class="dhx_cal_data">
        </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 onload ((í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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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 onload="init();">
    <div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
        <div class="dhx_cal_navline">
            <div class="dhx_cal_prev_button">&nbsp;</div>
            <div class="dhx_cal_next_button">&nbsp;</div>
            <div class="dhx_cal_today_button"></div>
            <div class="dhx_cal_date"></div>
            <div class="dhx_cal_tab" name="day_tab"></div>
            <div class="dhx_cal_tab" name="week_tab"></div>
            <div class="dhx_cal_tab" name="month_tab"></div>
        </div>
        <div class="dhx_cal_header">
        </div>
        <div class="dhx_cal_data">
        </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%20initialization

    Thanks for all anyway.


  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search