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"> </div>
<div class="dhx_cal_next_button"> </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
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;
}
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"> </div>
<div class="dhx_cal_next_button"> </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.
I am learning to create apps using electron. So far I have a main.js file running on the main process, and then I have an index.js for my index.html page, and I have a modal popup add.html which uses an add.js file. I have 2 buttons in my add.html file and I can't get either of them to work no matter what method I use. I have tried using the following methods to use the button:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Add Room</title>
<!-- <link rel="stylesheet" href="../assets/css/main.css"> -->
<link rel="stylesheet" href="../assets/css/add.css">
</head>
<body>
<!-- <p class="name">Address: </p> -->
<div class="row">
<div class="address">
<input class="nameVal" placeholder="Address">
</div>
<div>
<button class="add"> Add </button>
<button id="cancelBtn" class="cancel" onclick="cancelButton">Cancel</button>
</div>
</div>
<!-- <a id="close">Close</a> -->
<script src="./add.js"></script>
</body>
</html>
Javascript:
const electron = require('electron');
const path = require('path');
const BrowserWindow = electron.remote.BrowserWindow;
const currWindow = electron.remote.getCurrentWindow();
const ipc = require('electron').ipcRenderer;
let cancelBtn = document.getElementById('cancelBtn');
var $ = document.querySelectorAll.bind(document);
//This method is used in index.js and it works perfectly.
$(".cancel").forEach(function (el) {
el.addEventListener("click", function() {
alert("this thing is doinh stuuffff");
});
});
cancelBtn.addEventListener("click", function() {
alert("this thing is doing stufff");
});
function cancelButton() {
alert("this thing is using the onclick property");
}
I know that my html is linking to my javascript because if I make the javascript popup an alert without using a button it works.
I have seen other posts with a similar problem, but their issue was fixed because they had a typo. I re-wrote and re-read my code multiple times over the course of a few days, so I doubt that the issue is due to a typo.
add.html is used as a modal window, so maybe there are some rules that I'm missing about modal windows? But its called from main.js using icp and it works fine:
ipc.on('open-add-room-window', () => {
var addRoom = new BrowserWindow({parent: win, modal: true, width: 300, height: 150, resizable: false, show: false});
addRoom.loadFile("src/add.html");
addRoom.on('close', () => { addRoom = null; });
addRoom.once('ready-to-show', () => {
addRoom.show();
});
});
Thanks to #tpikachu I was able to solve the issue by enabling nodeIntegration on my modal BrowserWindow using the following code:
var addRoom = new BrowserWindow({webPreferences: {nodeIntegration: true}, parent: win, modal: true, width: 300, height: 150, resizable: false, show: false});
My home page is running three.js and I am using barba.js to use ajax for smoother transitions between pages. The problem is that after I have gone back and forth away from the home page and back to it a few times my site starts to run extremely slowly. I am trying to think of a way around this and I thought I had one using barba.js Views and a requestAnimationFrame, however I don't think it helped enough. Does anyone have a better idea of how to either destroy or stop executing my three.js function?
barbaMain.js
document.addEventListener("DOMContentLoaded", function () {
var lastElementClicked;
let animationLoop = null
const SingleNews = Barba.BaseView.extend({
namespace: 'single-news',
onEnterCompleted: function () {
animationLoop = requestAnimationFrame( doThree )
},
onLeave: function() {
cancelAnimationFrame(animationLoop)
},
});
SingleNews.init()
Barba.Pjax.start();
Barba.Dispatcher.on('linkClicked', function(el) {
lastElementClicked = el;
});
var FadeTransition = Barba.BaseTransition.extend({
start: function() {
Promise
.all([this.newContainerLoading, this.fadeOut()])
.then(this.fadeIn.bind(this));
},
fadeOut: function() {
return $(this.oldContainer).animate({
opacity: 0
}, 400, function() {} ).promise()
},
fadeIn: function() {
var _this = this;
var $el = $(this.newContainer);
$(this.oldContainer).hide();
$el.css({
visibility: 'visible',
opacity: 0
});
$el.animate({
opacity: 1
}, 400, function() {
_this.done();
});
}
});
Barba.Pjax.getTransition = function() {
return FadeTransition;
};
})
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Jacob Truax Portfolio</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="canvas-fix">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono" rel="stylesheet">
<script src="three.min.js"></script>
<script src="portfolio.js"></script>
<script src="jquery-3.3.1.min.js"></script>
<script src="barba.js"></script>
<script src="barbaMain.js"></script>
</head>
<body>
<div id="barba-wrapper">
<div class="barba-container" data-namespace="single-news">
<header>
<a class="home" href="#">Jacob Truax</a>
<a class="contact" href="info.html">Info</a>
<a class="info" href="#">Work</a>
</header>
<section class="three"></section>
</div>
</div>
</body>
Three.js functions are all inside this:
const doThree = function () {}
i have some trouble using NeoVis.js to visualize my Neo4j-graph.
I use the Movie-Tutorial-Database in which i established relationships "ACTED_WITH" between everone who acted in a movie together. All of my stuff is local.
I made a test.html file in which is following code:
<head>
<meta charset="utf-8">
<title>DataViz</title>
<style type="text/css">
#viz {
width: 900px;
height: 700px;
}
</style>
<script src="https://rawgit.com/neo4j-contrib/neovis.js/master/dist/neovis.js"></script>
<script type="text/javascript">
var viz;
function draw() {
var config = {
container_id: "viz",
server_url: "bolt://localhost:7687",
server_user: "Neo4j",
server_password: "123",
labels: {
},
relationships: {
},
initial_cypher: "match (tom:Person{name:"Tom Hanks"})-[r:ACTED_WITH]->(coWorkers)
return tom, r, coWorkers"
},
viz = new NeoVis.default(config);
viz.render();
};
</script>
</head>
<body onload="draw()">
<div id="viz"></div>
</body>
And when i open the file in my browser it shows the title inside the tab an thats it. Investigating it with the browser tools it shows the following:
test.html:30 Uncaught SyntaxError: Unexpected identifier
test.html:41 Uncaught ReferenceError: draw is not defined
at onload (test.html:41)
I dont get it. draw() is defined, isnt it? And the query works fine within the Neo4j-browser too.
Can you figure out whats wrong? Thanks in advance.
Greetings
Please check the below code..
The cypher works for me, First test with some simple cypher to test whether you are connecting to neo4j using bolt.
Then add your cypher check proper syntax too.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery"></script>
<script src="https://rawgit.com/neo4j-contrib/neovis.js/master/dist/neovis.js"></script>
<script type="text/javascript">
function draw() {
alert("inside method");
var viz;
var config = {
container_id: "viz",
server_url: "bolt://127.0.0.1:7687",
server_user: "Neo4j",
server_password: "password",
labels: {
},
relationships: {
},
initial_cypher: "MATCH (n:Movie) RETURN n LIMIT 1"
},
viz = new NeoVis.default(config);
console.log(JSON.stringify(viz));
viz.render();
};
</script>
</head>
<body>
<div>
<div id="row2">
<input type="button" value="click" onclick="draw()">
<div id="viz"></div>
</div>
</form>
</div>
</body>
</html>
I am having trouble with the FullCalendar js library not displaying events correctly. I'm not sure what the issue is as I have followed the instructions on their introduction page, but the events are always displayed at the very bottom of the calendar and are never 'inline' with the times.
<html>
<head>
<meta charset='utf-8' />
<link rel="stylesheet" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.min.css" type="text/css" />
<!--<link rel="stylesheet" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.print.css" type="text/css">-->
<script src="assets/plugins/jquery-1.10.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.js"></script>
<script>
moment().format();
function httpGet(url) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", url, false);
xmlHttp.send(null);
return xmlHttp.responseText;
}
$(document).ready(function () {
// page is now ready, initialize the calendar...
//var eventsArray = JSON.parse(httpGet("Schedule.php"));
$('#calendar').fullCalendar({
// put your options and callbacks here
//timezone: 'America/Denver',
header: {
left: '',
center: 'title',
right: ''
},
theme:true,
events: [
{
"title":"Washer & Dryer",
"editable":false,
"start":"2017-04-09T00:30:00-0600",
"end":"2017-04-09T06:30:00-0600",
"img_loc":"washer.png"
},
{
"title":"Dishwasher",
"editable":false,
"start":"2017-04-09T02:56:00-0600",
"end":"2017-04-09T04:56:00-0600",
"img_loc":"dishwasher.jpg"
}
],
defaultView: "agendaDay"
})
});
</script>
<style type='text/css'>
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
You need to use an href attribute instead of an src in the <link> tag that references the fullcalendar stylesheet. Your fourth line should look like this:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.min.css" type="text/css" />
Demo:
http://jsbin.com/tojohiwuke/1/edit?html,output
(I also changed jquery to use a CDN in my example.)