Following is the code I am trying for vis.js .I am trying to visualize data present on my server in json format through xmlhttprequest. But all it shows is blank screen as output. I am running the following code on server. Reponse shows status 200 and blank screen
<html>
<head>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"
></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.js"
></script>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.css"
rel="stylesheet"
type="text/css"
/>
<style type="text/css">
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid rgb(134, 29, 29);
}
</style>
</head>
<body>
<div id="testdiv"></div>
<div id="mynetwork"></div>
<script type="text/javascript">
// function loadXMLDoc() {
var xhttp = new XMLHttpRequest();
//var xhttp = new ActiveXObject("MSXML2.XMLHTTP");
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//var data1 = this.responseText;
console.log(xhttp.responseText);
var data1 = JSON.parse(xhttp.responseText);
document.getElementById("testdiv").innerHTML =
"<h1>Data Export Successful</h1>";
}
//};
xhttp.open("GET", "http://127.0.0.1:5000/neo4j/export", true);
xhttp.setRequestHeader("Access-Control-Allow-Origin", "*");
xttp.setRequestHeader(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type,Accept"
);
//loadXMLDoc();
xhttp.send();
};
var data = {};
var options = {};
var container = document.getElementById("mynetwork");
var network = new vis.Network(container, data, options);
</script>
</body>
</html>
Related
I am new to handlebars.js and I am trying to display a JSON response with this API https://yts.am/api/v2/list_movies.json
I try to use static and basic JSON data, it is working but when I try to load huge amount I get error
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1 id="title"></h1>
<hr>
<div id="result"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
<script id="text-template-yts" type="text/x-handlebars-template">
<h2>{{title}}</h2>
<h3>{{summary}}</h3>
<ul>
{{#each torrents}}
<li>{{quality}}</li>
{{/each}}
</ul>
</script>
<script>
function ajax_get(url, callback) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
console.log('responseText:' + xmlhttp.responseText);
try {
var data = JSON.parse(xmlhttp.responseText);
} catch (err) {
console.log(err.message + " in " + xmlhttp.responseText);
return;
}
callback(data);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
ajax_get('https://yts.am/api/v2/list_movies.json', function (data) {
document.getElementById("title").innerHTML = data["status_message"];
var source = document.getElementById('text-template-yts').innerHTML;
var template = Handlebars.compile(source);
var html = template(data.data.movies);
document.getElementById("result").innerHTML = html;
});
</script>
</body>
</html>
I was able to get the query success but in parsing is error
FIXED
I need to add the each of handlebars
What I'm trying to achieve: Firebase email and password based authentication (user register) using Knockout.js in a game environment.
Issue: While retrieving and writing to the database works, I'm facing difficulties implementing user registration. The response returns following error: "This browser is not supported".
What are the requirements in order to perform an authentication process, issues might arise due to not using a regular browser but a game built-in one.
Edit: html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<noloc><title>UberBar</title></noloc>
<link href="bundle://boot/boot.css" rel="stylesheet" type="text/css" />
<link href="uberbar.css" rel="stylesheet" type="text/css" />
<script src="https://www.gstatic.com/firebasejs/5.0.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "*************************************",
authDomain: "**************.firebaseapp.com",
databaseURL: "https://**********.firebaseio.com",
projectId: "**************",
storageBucket: "****************.appspot.com",
messagingSenderId: "**********"
};
firebase.initializeApp(config);
</script>
<script src="bundle://boot/boot.js" type="text/javascript"></script>
<script src="coui://ui/main/shared/js/jabber.js" type="text/javascript"></script>
<script src="coui://ui/main/shared/js/leaderboard_utility.js" type="text/javascript"></script>
<script src="uberbar.js" type="text/javascript"></script>
</head>
<body data-bind="click: hideContextMenu">
<div id="social-wrapper">
<!-- ko if: (model.showUberBar()) -->
<div id="uberbar_watermark">
<loc>Offline</loc>
</div>
<!-- /ko -->
<!-- ko if: (model.showUberBar() && model.hasJabber()) -->
<!-- ko if: showUserDetails -->
<!-- File continues here... -->
Edit: js
var model;
var handlers;
$(document).ready(function () {
function PaChatModel() {
var self = this;
self.setColor = ko.observable(false);
self.setVisibility = ko.observable(false);
self.verificationStatus = ko.observable();
var chat_auth_status = 0;
self.verificationStatus('PA Community Chat (Authentication Required)');
self.awaitPermissionClose = function() {
self.verificationStatus('PA Community Chat (Authentication Required)');
self.setVisibility(false);
chat_auth_status = 0;
}
self.chatVerificationStatus = function() {
switch(chat_auth_status) {
case 0:
self.verificationStatus('Authentication in progress: Awaiting permission...');
self.setVisibility(true);
chat_auth_status = 1;
break;
}
}
}
PaChatModel();
function AwaitPermissionSubmit() {
var self = this;
self.mailValue = ko.observable();
self.pswValue = ko.observable();
self.awaitPermissionError = ko.observable();
var firebaseRef = firebase.database().ref();
self.awaitPermissionSubmitBtn = function() {
console.log(self.pswValue().length);
if(!validateEmail(self.mailValue()) && self.pswValue().length < 8) {
self.awaitPermissionError("Wrong E-Mail and Password format");
} else if(self.pswValue().length < 8) {
self.awaitPermissionError("Password must be at least 8 characters long");
} else if(!validateEmail(self.mailValue())) {
self.awaitPermissionError("Invalid E-Mail format");
}
else {
firebase.auth().createUserWithEmailAndPassword(self.mailValue(), self.pswValue()).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// [START_EXCLUDE]
if (errorCode == 'auth/weak-password') {
self.awaitPermissionError("The password is too weak.");
} else {
self.awaitPermissionError(errorMessage);
}
console.log(error);
// [END_EXCLUDE]
});
}
}
}
function validateEmail(email) {
var type = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return type.test(email);
}
AwaitPermissionSubmit();
The problem is that after receiving the SSL certificate, and switch my site from http to https some functions of my site (on my own domain) on the blogger platform, stopped working.
How can I fix the code to make them work again?
<script type="text/javascript">
function LoadTheArchive(TotalFeed)
{
var PostTitles = new Array();
var PostURLs = new Array();
var PostYears = new Array();
var PostMonths = new Array();
var PostDays = new Array();
if("entry" in TotalFeed.feed)
{
var PostEntries=TotalFeed.feed.entry.length;
for(var PostNum=0; PostNum<PostEntries ; PostNum++)
{
var ThisPost = TotalFeed.feed.entry[PostNum];
PostTitles.push(ThisPost.title.$t);
PostYears.push(ThisPost.published.$t.substring(0,4));
PostMonths.push(ThisPost.published.$t.substring(5,7));
PostDays.push(ThisPost.published.$t.substring(8,10));
var ThisPostURL;
for(var LinkNum=0; LinkNum < ThisPost.link.length; LinkNum++)
{
if(ThisPost.link[LinkNum].rel == "alternate")
{
ThisPostURL = ThisPost.link[LinkNum].href;
break
}
}
PostURLs.push(ThisPostURL);
}
}
DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays);
}
function DisplaytheTOC(PostTitles,PostURLs,PostYears,PostMonths,PostDays)
{
var MonthNames=["January","February","March","April","May","June","July","August","September","October","November","December"];
var NumberOfEntries=PostTitles.length;
var currentMonth = "";
var currentYear = "";
for(var EntryNum = 0; EntryNum < NumberOfEntries; EntryNum++)
{
NameOfMonth = MonthNames[parseInt(PostMonths[EntryNum],10)-1]
if (currentMonth != NameOfMonth || currentYear != PostYears[EntryNum])
{
currentMonth = NameOfMonth;
currentYear = PostYears[EntryNum];
document.write("<div class='dateStyle'><br />" + currentMonth+" "+currentYear+" </div>");
}
document.write('<div class=dayStyle>'+parseInt(PostDays[EntryNum],10)+": </div> "+PostTitles[EntryNum]+"<br />");
}
}
</script>
<script src="https://mywebsite.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=LoadTheArchive" />
</script>
<script src="https://mywebsite.com/feeds/posts/default?max-results=150&start-index=151&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="https://mywebsite.com/feeds/posts/default?max-results=150&start-index=301&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="https://mywebsite.com/feeds/posts/default?max-results=150&start-index=451&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="https://mywebsite.com/feeds/posts/default?max-results=150&start-index=601&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="https://mywebsite.com/feeds/posts/default?max-results=150&start-index=851&alt=json-in-script&callback=LoadTheArchive"></script>
<script src="https://mywebsite.com/feeds/posts/default?max-results=150&start-index=1001&alt=json-in-script&callback=LoadTheArchive"></script>
<!--CUSTOMIZATION-->
<style type="text/css">
.dateStyle {
color:#000;
font-size: 30px;
font-family: Fjalla One;
margin: 0;
}
.dayStyle {
color:#000;
font-family: Droid Sans;
display: inline-block;
}
</style>
And now the form says that it looks like my post is mostly code, a I need to add some more details, but I don't know what to add more, because all what I needed, I was asked above.
What about changing script tags to the following
<script src="/feeds/posts/default?max-results=500&alt=json-in-script&callback=LoadTheArchive"/>
<script src="/feeds/posts/default?max-results=150&start-index=151&alt=json-in-script&callback=LoadTheArchive"/>
<script src="/feeds/posts/default?max-results=150&start-index=301&alt=json-in-script&callback=LoadTheArchive"/>
<script src="/feeds/posts/default?max-results=150&start-index=451&alt=json-in-script&callback=LoadTheArchive"/>
<script src="/feeds/posts/default?max-results=150&start-index=601&alt=json-in-script&callback=LoadTheArchive"/>
<script src="/feeds/posts/default?max-results=150&start-index=851&alt=json-in-script&callback=LoadTheArchive"/>
<script src="/feeds/posts/default?max-results=150&start-index=1001&alt=json-in-script&callback=LoadTheArchive"/>
I'm having trouble displaying a map with OpenLayers v3 in JavaFX's WebView. Here's my code:
openLayersV3.html
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://openlayers.org/en/v3.19.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 400px;
}
</style>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
<script src="https://openlayers.org/en/v3.19.1/build/ol.js"
type="text/javascript"></script>
<title>OpenLayers 3 example</title>
<script type="text/javascript">
function loadMap() {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([10.0, 53.55]),
zoom: 10
})
});
}
</script>
</head>
<body onLoad="loadMap()">
<h2>My Map</h2>
<div id="map" class="map"></div>
</body>
</html>
And here's an excerpt of the loader:
OsmView.java
...
protected WebView webView = new WebView();
protected WebEngine webEngine = webView.getEngine();
public OsmView() {
final URL urlOsmMap = getClass().getResource("/some/package/name/openLayersV3.html");
webEngine.load(urlOsmMap.toExternalForm());
getChildren().add(webView);
}
...
When I load the html in a browser like IE or Firefox, it shows without any complications. But in the Java program, there is only a blank page with the h2 ("My Map"). But the JavaScript doesn't load. So, what am I doing wrong here?
Ok, actually I found a solution: the requestAnimationFrame is not found so you have to add the following lines before every other javascript stuff:
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, element) {
window.setTimeout(callback, 1000 / 60);
};
})();
var requestAnimationFrame = window.requestAnimFrame;
I want to browse image from client computer as soon as image is uploaded, it will display preview and when client(I) saves details, it will be saved in the database.
as well as that image will be displayed in page
I have fileuploader
<style type="text/css">
#newPreview
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
</style>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css "
rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js "></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js "></script>
<script language="javascript" type="text/javascript">
function PreviewImg(imgFile) {
if (navigator.appName != "Netscape") {
var newPreview = document.getElementById("newPreview");
newPreview.style.display = "";
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
newPreview.style.width = "250px";
newPreview.style.height = "200px";
}
else {
if (imgFile.files && imgFile.files[0]) {
var reader = new FileReader();
$('[id*=divFirfox]').css("display", "block");
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width(250)
.height(200);
};
reader.readAsDataURL(imgFile.files[0]);
}
}
}
</script>
now what should i do to retrive image from database?
something like link