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>
Related
I have a page which uses a custom YouTube playlist plugin found here https://github.com/Giorgio003/Youtube-TV
When I have a single instance of the player on a page it works great, but if I try to add two or more players, only one will render.
This is a sample page with two playlists:
<!doctype html>
<html lang="en">
<head>
<title>YouTube TV</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="assets/ytv.css" type="text/css" rel="stylesheet" />
<style type="text/css">
body{
background: #eee;
margin: 0;
padding: 0;
}
.test-title{
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="container">
<div class="col-md-9 col-lg-11">
<div>
<h4 class="test-title">Testing Responsive YouTube Playlist</h4>
</div>
<div id="responsive1"></div>
<div id="responsive2"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="src/ytv.js"></script>
<script>
var apiKey = 'ThisIsAValidKey';
window.onload = function(){
window.controller = new YTV('responsive1', {
playlist: 'PLaK7th3DkkqgBtr94FWKF5HNlbNIHWkww',
responsive: true
});
};
window.onload = function(){
window.controller = new YTV('responsive2', {
playlist: 'PLQJ-H2JR5Kwzv7Rdx2Ob-7Af5t3c2S_MN',
responsive: true
});
};
</script>
</body>
</html>
I moved the API key out of ytv.js into a global variable.
// Set apiKey as global var
// var apiKey = 'ThisIsAValidKey';
Other than that, the js is the same as found here.
How can I modify this plugin to allow multiple instances?
Update:
I have also renamed the window vars with no change in result.
window.controller1 = new YTV(...);
window.controller2 = new YTV(...);
Solution:
As inferred from the marked answer below
window.onload = function(){
$('#responsive1').ytv({
playlist: 'PL6x-m6zFmZvueGe7XnT0z1Qlsn2zUs5_F',
responsive: true
});
$('#responsive2').ytv({
playlist: 'PLQJ-H2JR5Kwzv7Rdx2Ob-7Af5t3c2S_MN',
responsive: true
});
};
By looking at the Youtube code, I could see it already handles multiple jQuery instance.
if ((typeof jQuery !== 'undefined')) {
jQuery.fn.extend({
ytv: function(options) {
return this.each(function() {
new YTV(this.id, options);
});
}
});
}
I created a quick fiddle: https://jsfiddle.net/pj8kpbzw/
Please check the console as it prints two instances.
I tried to create two buttons, so that when I click on each- I will get a pop up small window, with a content that it will get while onloading.
This is the code:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp">
<p ng-controller="ctrl">
<span ng-repeat="x in items">
<button ng-click="parentFunc(x.fieldOne,x.fieldTwo)">{{x.fieldOne}}</button>
<br><br>
</span>
</p>
<script>items();</script>
</body>
</html>
script.js:
var title, content;
function items(){
angular.module('myApp', []).controller('ctrl', function($scope) {
$scope.items = [
{fieldOne:"field1", fieldTwo:"field1 content"},
{fieldOne:"field2", fieldTwo:"field2 content"}
];
$scope.parentFunc=function(titleTmp,contentTmp){
title=titleTmp;
content=contentTmp;
var OpenWindow = window.open('popUp.html','_blank','width=500, height=400');
return false;
}
});
}
function codeAddress() {
document.getElementById("title").innerHTML=title;
document.getElementById("content").innerHTML=content;
}
popUp.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="codeAddress();">
<h1 id="title"></h1>
<div id="content"></div>
</body>
</html>
The new pop up window open as expected, but the h1 and div in it get undefined. I tried to debug it, and I saw that after the first two lines of parentFunc are executed, the global variables title and content get what I expect and they are not undefined. However, when the third line is executed and the new window get opened- the global variables are undefined.
Why the two global variables are undefined in the pop up window?
And how can I solve this?
Your method won't work : you are trying to reload the script.jsand then, the vars are reinitialized.
Add your vars in the URL :
var OpenWindow = window.open('popUp.html?title='+titleTmp+'&content='+contentTmp,'_blank','width=500, height=400');
Then, in your second page, read those parameters :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
function codeAddress(){
var title = GET_TITLE_FROM_PARAMETER;
var content = GET_CONTENT_FROM_PARAMETER;
document.getElementById("title").innerHTML=title;
document.getElementById("content").innerHTML=content;
}
</script>
</head>
<body onload="codeAddress();">
<h1 id="title"></h1>
<div id="content"></div>
</body>
</html>
And of course, remove codeAddress from the first page as it's useless.
FYI, to get the parameters values, please check this answer.
#(message: String)(exchangelist: java.util.ArrayList[String])(implicit session: play.mvc.Http.Session)
#main(title = message)(session) {
<head>
...
</head>
<body>
<script>
startup(exchangelist);
<script>
</body>
Code like this, how can I pass parameter "exchangelist" to Js function "startup()"? This method don't work.
I suggest trying the meta tag:
<html>
<head>
<!-- <meta name="exchangelist" content='#{exchangelist.mkstring(",")}'> -->
<meta name="exchangelist" content='yellow,black,green'>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<script>
function startup(list) {
alert("startup called with " + list);
}
var el = $('meta[name=exchangelist]').attr("content").split(",");
startup(el);
</script>
</html>
I am wondering why I cannot override jquery function onRegionOver. The WAMP index.html file is shown below. Please tell me how I can use the WAMP console to debug this problem.
The jquery plugin I am trying to make work on my Windows 7 Internet Explorer IE7 browser here is http://jvectormap.owl-hollow.net/.
<!DOCTYPE html>
<html>
<head>
<title>jVectorMap demo</title>
<link rel="stylesheet" href="jquery-jvectormap-1.1.1.css"
type="text/css" media="screen"/>
<script src="jquery.js"></script>
<script src="jquery-jvectormap-1.1.1.min.js"></script>
<script src="us-aea-en.js"></script>
</head>
<body>
<div id="USA-map" style="width: 1200px; height: 800px"></div>
<script language="javascript">
function processOrder() {
var pluginContainer = $("#USA-map");
pluginContainer.vectorMap(
{map: 'us_aea_en'},
{onRegionOver: function(event, code){
alert('Hello');
}
});
}
</script>
<script type="text/javascript" src="foo.js"></script>
</body>
</html>
.vectorMap() function accepts a single object with multiple parameters, while you're passing 2.
Presumably the call should look like:
pluginContainer.vectorMap(
{
map: 'us_aea_en',
onRegionOver: function(event, code){
alert('Hello');
}
}
);
References:
http://jvectormap.com/examples/world-gdp/
http://jvectormap.com/documentation/javascript-api-v1/jvm-worldmap/
First off here is the code!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="content/wmd.css" rel="stylesheet" type="text/css" />
<title>some title </title>
</head>
<body>
<div class="main">
<form>
<h2>Only teaxt area</h2>
<div id="wmd-editor-uno" class="wmd-panel">
<div id="wmd-button-bar-uno" class='wmd-button-bar'></div>
<textarea name='id-uno' id='id-uno'></textarea>
</div>
</form>
</div>
<script type='text/javascript' src="Scripts/mootools-yui-compressed.js"></script>
<script type='text/javascript' src="Scripts/moowmd.js"></script>
<script type="text/javascript">
var MyConfig = [
{
input: 'id-uno',
postfix: '-uno'
}];
window.addEvent('domready', function() {
window.MyMooWMD = new mooWMD.WMD(window.MyConfig);
window.MyMooWMD.start();
});
</script>
</body>
</html>
Bam!
My problem is this, it doesn't work like the example at mooWMD tutorial all I get is an empty text area with the wmd.css style applied to it. I cant figure out what I could be doing wrong. All the file locations are correct but i get 'mooWMD' is undefined. I am at a loss any and all suggestions are appreciated.
The problem (for later generations) is IE does not accepts the following syntax:
{
att1: 'value',
att2: 'value'
}
Where other browsers do.
I changed it to
{
'att1': 'value',
'att2': 'value'
}
And it is fine now.
(using the mailing list would have gotten my attention earlier)
The code in the local javascript tag executes as soon as the tag is processed. This may happen before moowmd.js has completed loading.
Wrap the code in a function:
<script type="text/javascript">
function loaded() {
var MyConfig = [
{
input: 'id-uno',
postfix: '-uno'
}];
window.addEvent('domready', function() {
window.MyMooWMD = new mooWMD.WMD(window.MyConfig);
window.MyMooWMD.start();
});}
</script>
Then add an onload handler to your body tag:
<body onload="loaded();">
The onload handler will not fire until all the javascript, images, css, etc have loaded.
<head>
<title>some title </title>
<link rel="stylesheet" type="text/css" href="Content/wmd.css" />
<script type="text/javascript" src="Scripts/showdown.js"></script>
</head>
<body>
<div class="main">
<div id="wmd-editor" class="wmd-panel">
<div id="wmd-button-bar">
</div>
<textarea id="wmd-input"></textarea>
</div>
<div id="wmd-preview" class="wmd-panel">
</div>
<div id="wmd-output" class="wmd-panel">
</div>
</div>
<script type="text/javascript" src="Scripts/wmd.js"></script>
</body>
The root of the problem ended up being the moowmd editor just didn't work consistently in IE. The reason I was tiring to go with the moowmd was I liked how he handled setting up multiple editors. I ended up just switching to stackoverflow's branch of wmd it is working well so far.