I use the nice FormBuilder from Kevin Chappell
https://formbuilder.online/docs/
Several types can be defined for the 'text' field. I have integrated the new control 'time'. I now want if this new control is clicked, 'time' should be preset in the 'Type' field.
How can i adjust that?
PS: The code example does not run here but only locally (sessionStorage topic)
jQuery(function($) {
var fbTemplate = document.getElementById('fb-editor');
var options = {
fields : [{
label: 'Time',
attrs: {
type: 'text'
},
icon: '🕑'
}],
subtypes: {
text: ['datetime-local','time']
},
disabledSubtypes: {
text: ['password','email','color','tel'],
}
};
$(fbTemplate).formBuilder(options);
});
body {
background: lightgrey;
font-family: sans-serif;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - formBuilder: Options -> subtypes</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div id="fb-editor"></div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://formbuilder.online/assets/js/form-builder.min.js'></script><script src="./script.js"></script>
</body>
</html>
I didn't find out, but i took a different path for it. :-)
Enter the new element as type time in the field definition.
A new subtype time has also been defined.
Then add the time in the controls register.
jQuery(function($) {
var fbTemplate = document.getElementById('fb-editor');
var options = {
fields : [{
label: 'Time',
attrs: {
type: 'time'
},
icon: '🕑'
}],
subtypes: {
time: ['time']
}
};
$(fbTemplate).formBuilder(options);
});
// src/js/control/text.js
// register this control for the following types & text subtypes
control.register(['text', 'file', 'date', 'number', 'time'], controlText)
control.register(['text', 'password', 'email', 'color', 'tel'], controlText, 'text')
body {
background: lightgrey;
font-family: sans-serif;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>formBuilder</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="fb-editor"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://formbuilder.online/assets/js/form-builder.min.js'></script>
<script src="./script.js"></script>
</body>
</html>
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 really can`t figure out whats going wrong here.
I try to draw a line-chart with epoch using JSON-data.
JSON Formatter & Validator says it`s valid JSON.
Epoch/D3 does not render the chart, instead I get a "Uncaught TypeError: Cannot read property 'length' of undefined" in d3.js in the console.
I tried different versions of d3, the newest as well as v3.5.17 as described in this issue: https://github.com/epochjs/epoch/issues/226
Here is my code:
<html>
<head>
<link rel="stylesheet" href="css/epoch.min.css" type="text/css">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/d3.js"></script>
<script src="js/epoch.js"></script>
</head>
<body>
<div id="linechart" class="epoch category20" style="width: 700px; height: 250px"></div>
<script type="text/javascript">
$('#linechart').epoch({
type: 'line',
axes: ['left', 'right', 'bottom'],
data: [{"label":"LabelA","value":[{"x":1,"y":7163960},{"x":2,"y":7163960},{"x":3,"y":7164484},{"x":4,"y":7164572},{"x":5,"y":7164908},{"x":6,"y":7167360},{"x":7,"y":7176940},{"x":8,"y":7176880},{"x":9,"y":7176880},{"x":1,"y":7209696},{"x":11,"y":7260416},{"x":12,"y":7287716},{"x":13,"y":7288548},{"x":14,"y":7289324},{"x":15,"y":7289324}]},{"label":"LabelB","value":[{"x":1,"y":2312004},{"x":2,"y":2311828},{"x":3,"y":2373860},{"x":4,"y":2768644},{"x":5,"y":2620956},{"x":6,"y":2705648},{"x":7,"y":2689684},{"x":8,"y":2360368},{"x":9,"y":2360376},{"x":1,"y":2603128},{"x":11,"y":2705996},{"x":12,"y":2830920},{"x":13,"y":2442880},{"x":14,"y":2407872},{"x":15,"y":2386400}]},{"label":"LabelC","value":[{"x":1,"y":2312004},{"x":2,"y":2311828},{"x":3,"y":2373860},{"x":4,"y":2768644},{"x":5,"y":2620956},{"x":6,"y":2705648},{"x":7,"y":2689684},{"x":8,"y":2360368},{"x":9,"y":2360376},{"x":1,"y":2603128},{"x":11,"y":2705996},{"x":12,"y":2830920},{"x":13,"y":2442880},{"x":14,"y":2407872},{"x":15,"y":2386400}]}]
});
</script>
</body>
A quick read at the documentation will show you that instead of value:
data: [{"label":"LabelA","value":[...
It has to be values:
data: [{"label":"LabelA","values":[...
Here is the demo with your corrected code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.8.4/css/epoch.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.8.4/js/epoch.js"></script>
<div id="linechart" class="epoch category20" style="width: 700px; height: 250px"></div>
<script type="text/javascript">
var linechart = $('#linechart').epoch({
type: 'line',
axes: ['left', 'right', 'bottom'],
data: [{"label":"LabelA","values":[{"x":1,"y":7163960},{"x":2,"y":7163960},{"x":3,"y":7164484},{"x":4,"y":7164572},{"x":5,"y":7164908},{"x":6,"y":7167360},{"x":7,"y":7176940},{"x":8,"y":7176880},{"x":9,"y":7176880},{"x":1,"y":7209696},{"x":11,"y":7260416},{"x":12,"y":7287716},{"x":13,"y":7288548},{"x":14,"y":7289324},{"x":15,"y":7289324}]},{"label":"LabelB","values":[{"x":1,"y":2312004},{"x":2,"y":2311828},{"x":3,"y":2373860},{"x":4,"y":2768644},{"x":5,"y":2620956},{"x":6,"y":2705648},{"x":7,"y":2689684},{"x":8,"y":2360368},{"x":9,"y":2360376},{"x":1,"y":2603128},{"x":11,"y":2705996},{"x":12,"y":2830920},{"x":13,"y":2442880},{"x":14,"y":2407872},{"x":15,"y":2386400}]},{"label":"LabelC","values":[{"x":1,"y":2312004},{"x":2,"y":2311828},{"x":3,"y":2373860},{"x":4,"y":2768644},{"x":5,"y":2620956},{"x":6,"y":2705648},{"x":7,"y":2689684},{"x":8,"y":2360368},{"x":9,"y":2360376},{"x":1,"y":2603128},{"x":11,"y":2705996},{"x":12,"y":2830920},{"x":13,"y":2442880},{"x":14,"y":2407872},{"x":15,"y":2386400}]}]});
</script>
I am trying to access a json file from a remote server using Ajax and plot and then trying to plot the graph using jqplot.
I doubt that my Ajax is not working with the remote server. the same url I can access from my browser but Ajax is not working with the same. Below is my code....Can anyone please highlight the mistake I am making:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<script src="jqplot.canvasTextRenderer.min.js" type="text/javascript"></script>
<script src="jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript"></script>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="jquery.jqplot.js" type="text/javascript"></script>
<script src="jqplot.dateAxisRenderer.js" type="text/javascript"></script>
<script src="jqplot.categoryAxisRenderer.js" type="text/javascript" ></script>
<script src="jqplot.ohlcRenderer.js" type="text/javascript"></script>
<script src="jqplot.highlighter.js" type="text/javascript"></script>
<script src="jqplot.cursor.js" type="text/javascript"></script>
<script src="jqplot.pointLabels.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "http://172.xx.xxx.xxx/mc_measurement_new1.json",
type: "GET"
dataType: "jsonp",
crossDomain:true,
contentType:'application/json; charset=utf-8',
success: function (data) {
populateGraph(data);
}
});
function populateGraph(ret) {
var line1 = [];
for (i = 0; i < ret.length; i++) {
// Save the data to the relevant array. Note how date at the zeroth position (i.e. x-axis) is common for both demand and supply arrays.
line1.push([ret[i].id, ret[i].res]);
}
var plot2 = $.jqplot('chart1', [line1], {
series:[{showMarker:false}],
axes:{
xaxis:{
label:'ID',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
yaxis:{
label:'Delay',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
}
});
};
});
</script>
</head>
<body>
<div id="chart1" style="height: 400px; width: 600px;"></div>
</body>
</html>
When you use jsonp as the datatype, you must provide a callback, you don't have to use the success option.
Check out the jQuery api docs: http://api.jquery.com/jQuery.ajax/
Look for jsonp and jsonpCallback options.
I am trying to bind my html button to a function using knockout. The function is only supposed to pop up the alert message when the button is clicked but instead, the function is executed on page load.
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type='text/javascript' src='knockout-2.2.0.js'></script>
<script type='text/javascript' src='studentapp.js'></script>
</head>
<body>
<div class="container">
<div class="new_student">
<input type="text" class="name" placeholder="name" data-bind="value: person_name, hasfocus: person_name_focus()">
<input type="text" class="age" placeholder="age" data-bind="value: person_age">
<button data-bind="click: createPerson">Create</button>
</div>
</body>
</html>
Here's my js:
function createPerson(){
alert("Name ");
};
ko.applyBindings(new createPerson());
The console is displaying the following:
Uncaught TypeError: Cannot read property 'nodeType' of null
Any ideas ?
view model should look like this
var createPerson = function(){
var self = this;
self.name = "Mike";
self.sendAlert = function(){
alert(self.name);
};
};
ko.applyBindings(new createPerson());
then your button can use
<button type="button" data-bind="click:sendAlert"></button>
Please have a look on this tutorial
Your code should looks like
var viewModel = function () {
var self = this;
self.name = "Name";
self.age = 22;
self.buttonClicked = function () {
alert(self.name + " is " + self.age + " old");
};
};
ko.applyBindings(new viewModel());
Here is working fiddle sample.
EDIT:
Fiddle was fixed, and link updated
try put defer tag in your script, and put all javascript code after </html> tag, it`s a good practice.
<script type='text/javascript' src='studentapp.js' defer="defer"></script>