I receive the errors in my code from an external API. It gives me the
1)line number
2) error description
I could achieve the highlighting process but I need to add a lint error marker on the left side of the textarea.
The following code enable me to add lint marker when the page is load by definingoption called 'lintWith', However, I need to add these lint markers when I click on the button.
The is the code I'm using:
<html>
<head>
<link rel="stylesheet" href="codemirror/lib/codemirror.css">
<script src="codemirror/lib/codemirror.js"></script>
<script src="codemirror/addon/edit/matchbrackets.js"></script>
<script src="codemirror/mode/python/python.js"></script>
<!-- <script src="codemirror/addon/selection/active-line.js"></script> -->
<link rel="stylesheet" href="codemirror/addon/lint/lint.css">
<script src="codemirror/addon/lint/lint.js"></script>
<script src="codemirror/addon/lint/javascript-lint.js"></script>
<script src="cm-validator-remote.js"></script>
<style type="text/css">
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
.CodeMirror-empty { outline: 1px solid #c22; }
</style>
</head>
<body>
<div><textarea id="code" name="code" placeholder="Code goes here...">
mycode
pass
a__ = 5
Check
Hello World
123456
</textarea></div>
</body>
<script type="text/javascript">
function check_syntax(code, result_cb)
{
var error_list = [{
line_no: 2,
column_no_start: 14,
column_no_stop: 17,
fragment: "def doesNothing:\n",
message: "invalid syntax.......",
severity: "error"
}, {
line_no: 4,
column_no_start: 1,
column_no_stop: 3,
fragment: "a__ = 5\n",
message: "convention violation",
severity: "error"
}]
result_cb(error_list);
}
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: { name: "python",
version: 2,
singleLineStringErrors: false },
lineNumbers: true,
indentUnit: 4,
tabMode: "shift",
gutters: ["CodeMirror-lint-markers"],
lintWith: {
"getAnnotations": CodeMirror.remoteValidator,
"async": true,
"check_cb": check_syntax
}
});
function AddLintMarker(){
// I want to add the lintWith markers when click on this button
// i've tried like this editor.setOption("lintWith.getAnnotations",CodeMirror.remoteValidator ) but it doesn't work
}
</script>
<input type="button" value="add boxes" onclick="AddLintMarker()">
</html>
Here the code lint marker is added when the page is load because it is assigned to the editor but I want the lint maker to shows only when I click on the button and provide values to the check_syntx function,
and for the lintWith it is defined in the lint.js as the following :
CodeMirror.defineOption("lintWith", false, function(cm, val, old) {
if (old && old != CodeMirror.Init) {
clearMarks(cm);
cm.off("change", onChange);
CodeMirror.off(cm.getWrapperElement(), "mouseover", cm._lintState.onMouseOver);
delete cm._lintState;
}
if (val) {
var gutters = cm.getOption("gutters"), hasLintGutter = false;
for (var i = 0; i < gutters.length; ++i) if (gutters[i] == GUTTER_ID) hasLintGutter = true;
var state = cm._lintState = new LintState(cm, parseOptions(val), hasLintGutter);
cm.on("change", onChange);
CodeMirror.on(cm.getWrapperElement(), "mouseover", state.onMouseOver);
startLinting(cm);
}
});
You need to use setGutterMarker method from CodeMirror. It takes line, markerId and markerElement and put it to the needed line on the gutter area.
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
indentUnit: 4,
gutters: ["CodeMirror-lint-markers"],
});
function makeMarker() {
var marker = document.createElement("div");
marker.innerHTML = `<div>⚠️</div>`;
marker.setAttribute("title", "Some text");
return marker;
}
editor.doc.setGutterMarker(1, "CodeMirror-lint-markers", makeMarker());
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/codemirror.min.js"
integrity="sha512-/8pAp30QGvOa8tNBv7WmWiPFgYGOg2JdVtqI8vK+xZsqWHnNd939v9s+zJHXZcJe5wPD44D66zz+CLTD3KacYA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/codemirror.min.css"
integrity="sha512-uf06llspW44/LZpHzHT6qBOIVODjWtv4MxCricRxkzvopAlSWnTf6hpZTFxuuZcuNE9CBQhqE0Seu1CoRk84nQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<textarea id="code" name="code" placeholder="Code goes here...">
mycode
pass
a__ = 5
Check
Hello World
123456
</textarea>
</body>
</html>
Related
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 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 copy value from div to textarea and it works. But I want to use content of textarea in my javascript and if I don't click in text area and use for example "space bar" it doesn't work :/ I need to click here and write anything to make it work. But I want to make it work without editing anything manually. I want to have in textarea only copy of div. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Editor</title>
<style type="text/css" media="screen">
#editor {
margin-left: 15px;
margin-top: 15px;
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="src-min/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<div id="editor"></div>
<textarea id="input"></textarea>
<script src="bundle.js"></script>
<form id="myForm">
<input type="hidden" id="output">
</form>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
var code = editor.getSession().getValue();
console.log(code);
console.log(document.getElementById('output').innerHTML);
var test = document.getElementById('input');
console.log(test.value);
}
var textarea = $('#input');
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/sh");
editor.getSession().on('change', function () {
textarea.val(editor.getSession().getValue());
});
textarea.val(editor.getSession().getValue());
</script>
</body>
</html>
And "budle.js" file:
var input = document.getElementById('input');
var error = document.getElementById('error');
input.addEventListener('change', update);
input.addEventListener('input', update);
function update() {
try {
var value = parse(input.value);
output.textContent = JSON.stringify(value, null, 2);
error.textContent = '';
} catch (e) {
error.textContent = String(e);
}
}
#edit
So I want to send content of textarea without any integration, but like now I need to click for example spacebar in it to make it work :/
Hi I am looking to allow uses to add events into a calender(using date-picker at the moment) by entering data into text-boxes then clicking on a date on the calender then hitting submit. I want events to be highlighted and when a date is clicked on (with an event on it) the event pops up with the information.
Tried to search but I did not have any luck.
Thank you
EDIT: Changed a bit of the code so it compiled properly
I would also like to simply reference the date that is selected so that I may use it to record the data. To use this program simply type in your values than hit refresh and the new values will be loaded into the 13th of may.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>jQuery & jQueryUI Base - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css">
<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<style type='text/css'>
table.ui-datepicker-calendar tbody td.highlight > a {
background: url("images/ui-bg_inset-hard_55_ffeb80_1x100.png") repeat-x scroll 50% bottom #FFEB80;
color: #363636;
border: 1px solid #FFDE2E;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var equip = document.getElementById('equipment').value;
var size = document.getElementById('size').value;
var surface = document.getElementById('surface').value;
var orderNumber = document.getElementById('orderNumber').value;
var responsible = document.getElementById('responsible').value;
var events = [
{ Title: "Equipment: " + equip + "\nSize: " + size, Date: new Date("05/13/2013") },
{ Title: "Dinner", Date: new Date("02/25/2011") },
{ Title: "Meeting with manager", Date: new Date("03/01/2011") }
];
$("div").datepicker({
beforeShowDay: function(date) {
var result = [true, '', null];
var matching = $.grep(events, function(event) {
return event.Date.valueOf() === date.valueOf();
});
if (matching.length) {
result = [true, 'highlight', null];
}
return result;
},
onSelect: function(dateText) {
var date,
selectedDate = new Date(dateText),
i = 0,
event = null;
while (i < events.length && !event) {
date = events[i].Date;
if (selectedDate.valueOf() === date.valueOf()) {
event = events[i];
}
i++;
}
if (event) {
alert(event.Title);
}
}
});
});//]]>
addLow()
</script>
</head>
<body>
Equipment: <input type='text' id='equipment' /> <br />
Size: <input type='text' id='size' /> <br />
Required on Surface: <input type='radio' id='surface' /> <br />
Work Order Number: <input type='text' id='orderNumber' /> <br />
Responsible: <input type='text' id='responsible' /> <br />
<div></div>
<button type="button" onclick="addLow()">Add Lowering Event</button><br>
</body>
</html>
I am using Jörn Zaefferer's jquery autocomplete plugin, and I can't seem to figure out how to make it work when I clone an autocomplete field. It almost works, in that the cloned autocomplete field displays the choices when the I type in text, but I cannot select items. At first I thought it was a browser-compatibility issue, but it happens in both FF3 and Safari, so I'm guessing there's a gotcha I've missed.
Here is a working example of what I'm doing:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Autocomplete Clone Demo</title>
<style>
body {
margin: 40px;
}
.hide_element {
display: none;
}
</style>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script type="text/javascript">
function setAutocomplete()
{
var users = [
{ name: "Fred", id: "1" },
{ name: "Barney", id: "2" },
{ name: "Wilma", id: "3" }
];
$(".user_selector").autocomplete(users,
{
mustMatch: true,
matchContains: true,
minChars: 2,
formatResult: function(row) { return row.name; },
formatItem: function(row, i, max) { return row.name; }
}
);
}
var current= 0;
var addParticipantFields = function()
{
current++;
$newParticipant = $("#template").clone(true);
$newParticipant.removeAttr("id");
$newParticipant.removeClass("hide_element");
$prefix = "extra" + current;
$newParticipant.children("div").children(":input").each(function(i) {
var $currentElem= $(this);
$currentElem.attr("name",$prefix+$currentElem.attr("name"));
});
$newParticipant.appendTo("#participantsField");
setAutocomplete();
}
$(document).ready(function() {
setAutocomplete();
$("#addParticipant").live("click", addParticipantFields);
});
</script>
</head>
<body>
<h1>Test Autocomplete Cloning</h1>
<form id="demo" method="post" action="">
<fieldset id="participantsField">
<label>Participants</label>
<div class="participant">
<input class="user_selector" name="user" size="30"/>
</div>
</fieldset>
<!-- This is the template for adding extra participants -->
<div class="participant hide_element" id="template">
<input class="user_selector" name="_user" size="30"/>
</div>
<p><input type="button" id="addParticipant" value="Add Another Participant"></p>
<p><input class="button" type="submit" value="Submit"/></p>
</form>
</body>
</html>
Make
$newParticipant = $("#template").clone(true);
like so
$newParticipant = $("#template").clone();
Your example works for me in FF when you don't clone events on #template.
first of all:
$newParticipant.children("div").children(":input").length == 0
so there is no children returned by this line.
Use
$newParticipant.children()
instead. It returns 1 chield instead. But steel don't work for me. Have to think more.