I am using CodeMirror as editor with show-hint.js and anyword-hint.js as example. By default, hints appear after pressing Ctrl-Space.
Problem:
I want CodeMirror to show hints after I type ## along with Ctrl-Space.
What I have tried already:
I tried adding extraKeys like "'#'": "autocomplete" and "'#'-'#'": "autocomplete", but it does not work. It works with a single #, but not with ##.
HTML: (save as .html)
<!doctype html>
<title>CodeMirror: Any Word Completion Demo</title>
<meta charset="utf-8" />
<link rel=stylesheet href="https://codemirror.net/doc/docs.css">
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://codemirror.net/addon/hint/show-hint.css">
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/addon/hint/show-hint.js"></script>
<script src="https://codemirror.net/addon/hint/anyword-hint.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
<article>
<h2>Any Word Completion Demo</h2>
<form>
<textarea id="code" name="code">
function isInt(n) { return n % 1 === 0; }
</textarea>
</form>
<script>
CodeMirror.commands.autocomplete = function(cm) {
cm.showHint({
hint: CodeMirror.hint.anyword
});
};
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
extraKeys: {
"Ctrl-Space": "autocomplete",
"'#'": "autocomplete",
}
});
</script>
</article>
I solved it like this.If there is a better suggestion , please post.
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
extraKeys: {
"Ctrl-Space": "autocomplete",
"'#'": function(cm) {
var charTomatch = '#';
var curretCursorPosition = cm.getCursor();
var backwardCursorPosition = {
line: curretCursorPosition.line,
ch: curretCursorPosition.ch - 1
};
var forwardCursorPosition = {
line: curretCursorPosition.line,
ch: curretCursorPosition.ch + 1
};
var backwardCharacter = cm.getRange(backwardCursorPosition, curretCursorPosition);
var forwardCharacter = cm.getRange(curretCursorPosition, forwardCursorPosition);
//update text anyway
cm.replaceRange(charTomatch, curretCursorPosition);
//
if (backwardCharacter === charTomatch || forwardCharacter === charTomatch) {
CodeMirror.commands.autocomplete(cm);
}
}
}
});
Related
I am playing with jQuery and Javascript. Working on a TODOs app using li items and with this API: https://jsonplaceholder.typicode.com/todos. I receive 200 items from this API.
I am trying to post a new item created with a click from the button (btn-add) and everything works as expected, with the exception that the post request is leaving in blank one property which is "title". Here is my HTML and JS code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/CSS/styles.css" rel="stylesheet">
<title>TO DO List</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="/JS/index.js"></script>
</head>
<body>
<div id="inputDIV">
<input id="input" type="text" placeholder="Enter new item">
</div>
<div id="buttons">
<button id="btn-add">Add List Item</button>
<button id="btn-update">Update First Item</button>
<button id="btn-delete">Delete First Item</button>
</div>
<div id="ulDIV">
<ul id="list">
<!-- Here we will insert the list items via JS-->
</ul>
</div>
</body>
</html>
$(document).ready(function(){
let inputNew = $('#input');
let list = $('#list');
let currentInputValue = "";
$('#btn-add').click(createTODOItemAtBackend);
inputNew.on({
"input": function(e){
console.log(e.target.value);
currentInputValue = e.target.value;
},
"keyup": function(e){
if(e.keyCode === 13){
createTODOItemAtBackend();
}
}
})
getTODOListFromBackend();
function clearInputData(){
inputNew.val("");
currentInputValue = "";
}
function createTODODynamically(id, title){
let newListElement = document.createElement("li");
let textNode = document.createTextNode(title);
newListElement.appendChild(textNode);
newListElement.id = id;
return newListElement;
}
function getTODOListFromBackend(){
$.get("https://jsonplaceholder.typicode.com/todos", function(data, status){
let response = data;
for(let i=0; i < response.length; i++){
list.append(createTODODynamically(response[i].id, response[i].title));
}
});
}
let obj = {
"userId": 1,
"title": currentInputValue,
"completed": false
};
function createTODOItemAtBackend(){
$.post("https://jsonplaceholder.typicode.com/todos", obj, function(data, status){
let response = data;
list.append(createTODODynamically(response.id, currentInputValue));
console.log("Item Added to the list!");
clearInputData();
});
}
})
And this is what I see when I read the post information in the web browser:
{userId: "1", title: "", completed: "false", id: 201}
completed: "false"
id: 201
title: ""
userId: "1"
Can somebody help me, why is the property "title" being posted as empty? Thanks in advance
The answer is in what #epascarello hinted on the OP's comment. You set currentInputValue when the input value is changed but there's no code which updates this value to obj.
"input": function(e){
console.log(e.target.value);
currentInputValue = e.target.value;
//Add this line
obj.title = e.target.value;
},
Additional note: You really don't need currentInputValue if you refactor your code, using obj should do the job.
Report Paging works, Refresh works, Export (with some probs) and Print works but Find does not highlight anything.
Find code is:
function findText() {
$('.ReportViewerContent').removeHighlight();
var searchText = $("#ReportViewerSearchText").val();
if (searchText != undefined && searchText != null && searchText != "") {
showLoadingProgress('Searching Report...');
var params = $('.ParametersContainer :input').serializeArray();
var urlParams = $.param(params);
var page = parseInt($('#ReportViewerCurrentPage').val());
$.get("/Report/FindStringInReport/?reportPath=#Model.ReportPath.UrlEncode()&page=" + page + "&searchText=" + searchText + "&" + urlParams).done(function (data) {
if (data > 0) {
viewReportPage(data, function () {
$('.ReportViewerContent').highlight(searchText);
hideLoadingProgress();
});
} else {
$('.ReportViewerContent').highlight(searchText);
hideLoadingProgress();
}
});
}
}
Scripts in _Layout are:
<script src="~/lib/jquery/dist/jquery-3.3.1.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
Scripts in Report Viewer are:
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/select2.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/select2-bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/mvcreportviewer-bootstrap.css" />
<script src="~/lib/bootstrap/dist/js/select2.min.4.0.3.js"></script>
<script src="~/lib/jquery/dist/jquery.highlight-5.js"></script>
Have tried options like:
$('.ReportViewerContent').highlight(searchText, { wholeWord: false, ignoreCase: true, color: "#ffff00", bold: true });
Any thoughts please.
I have just tested on my working environment and it is highlighting. It does require a css class for it to highlight appropriately. So be sure that you have a ".highlight" style similar to this:
.highlight { background-color: yellow; }
When reading the introduction of Dojo, I followed (as newbie) the hello world tutorial.
How can I get this local demo working (via the CDN approach)? Afer a POC I will put it on a webserver, etc.
Step 1: I copied the module into the demo folder:
define([
'dojo/dom'
], function(dom){
var oldText = {};
return {
setText: function (id, text) {
var node = dom.byId(id);
oldText[id] = node.innerHTML;
node.innerHTML = text;
},
restoreText: function (id) {
var node = dom.byId(id);
node.innerHTML = oldText[id];
delete oldText[id];
}
};
});
Then in the current folder I put the Html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<script>
var dojoConfig = {
async: true,
packages: [{
name: "demo",
location: location.pathname.replace(/\/[^/]*$/, '') + '/demo'
}]
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<script>
require([
'demo/myModule'
], function (myModule) {
myModule.setText('greeting', 'Hello Dojo!');
setTimeout(function () {
myModule.restoreText('greeting');
}, 3000);
});
</script>
</body>
</html>
When double clicking the browser on the Html file, no traffic is seen, no demo text is changed and re-changed.
It was not simple as a newbie to get the Dojo "hello world" running.
The changes are marked with ** ... **
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<script>
var dojoConfig = {
async: true,
packages: [{
name: "demo",
**location: 'K:/k_schijf/dojo/demo'**
}]
};
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<script type="text/javascript">
require(
**[ "demo/myDojoModule.js" ],**
function (myDojoModule) {
myDojoModule.setText('greeting', 'Hello Dojo!');
setTimeout(function () {
myDojoModule.restoreText('greeting');
}, 3000);
});
</script>
</body>
</html>
Working "Hello World" example using CDN from Google.
var dojoConfig = {
async: true
};
require(["dijit/form/Button", "dojo/dom", "dojo/domReady!"], function(Button, dom){
// Create a button programmatically:
var myButton = new Button({
label: "Click me!",
onClick: function(){
// Do something:
dom.byId("result1").innerHTML += "Thank you! ";
}
}, "progButtonNode").startup();
});
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<button id="progButtonNode" type="button"></button>
<div id="result1"></div>
var originalContentFirst = $('#first').html();
$('#first').hover(function() {
$('#first').html('<strong>New HTML</strong>');
}, function() {
$('#first').html(originalContentFirst);
});
var originalContentSecond = $('#second').html();
$('#second').hover(function() {
$('#second').html('<strong>New HTML</strong>');
}, function() {
$('#second').html(originalContentSecond);
});
var originalContentThird = $('#third').html();
$('#third').hover(function() {
$('#third').html('<strong>New HTML</strong>');
}, function() {
$('#third').html(originalContentThird);
});
var originalContentFourth = $('#fourth').html();
$('#fourth').hover(function() {
$('#fourth').html('<strong>New HTML</strong>');
}, function() {
$('#fourth').html(originalContentFourth);
});
This was copied and adapted from elsewhere on this website. As you can see, its function is pretty basic. I have 4 divs (terrible ids, I know), and on a hover it should replace the HTML in them with the new HTML. Any idea why this is not doing anything at all? I'm sure I'm missing something rather elementary, but I can't figure out what the hell it is?
Edit: full HTML
<!DOCTYPE html>
<html>
<head>
<title>Bio</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script language="Javascript" type="text/javascript" src="script.js"></script>
</head>
<body>
<div id=first>
<span>About Me</span>
</div>
<div id=second>
<span>Past Jobs</span>
</div>
<div id=third>
<span>Projects</span>
</div>
<div id=fourth>
<span>About</span>
</div>
</body>
</html>
As Jaromanda X said - you're loading the script ABOVE the html, therefore it has nothing to attach to.
$(function() { // this waits until all html loaded
var originalContentFirst = $('#first').html();
$('#first').hover(function() {
$('#first').html('<strong>New HTML</strong>');
}, function() {
$('#first').html(originalContentFirst);
});
var originalContentSecond = $('#second').html();
$('#second').hover(function() {
$('#second').html('<strong>New HTML</strong>');
}, function() {
$('#second').html(originalContentSecond);
});
var originalContentThird = $('#third').html();
$('#third').hover(function() {
$('#third').html('<strong>New HTML</strong>');
}, function() {
$('#third').html(originalContentThird);
});
var originalContentFourth = $('#fourth').html();
$('#fourth').hover(function() {
$('#fourth').html('<strong>New HTML</strong>');
}, function() {
$('#fourth').html(originalContentFourth);
});
}); // this closes it
I have an issue with a Button. It is appearing in IE and Firefox, but not appearing in Chrome.
The code for the button is using Rally API and it’s generated while loading the page.
I have tried Googling the answer, but I couldn't find anything.
Heres my code:
function onClick(b, args) {
if(OneButtonClickFlag == true) {
OneButtonClickFlag = false;
var buttonValue = args.value;
var userName = "__USER_NAME__";
TimeSheetReport(); // calling the “timesheet report “
}
}
function onLoad() {
var config = {
text: "Generate",
value: "myValue"
};
var button = new rally.sdk.ui.basic.Button(config);
button.display("buttonDiv", onClick); // call the “onclick” function
}
rally.addOnLoad(onLoad);
This App below seems to work with your code in it up until the point where it encounters your OneButtonClick flag. I tested it in Chrome. Does this work for you?
<head>
<title>Button Example</title>
<meta name="Name" content="Component Example: Button"
/>
<meta name="Version" content="2010.4" />
<meta name="Vendor" content="Rally Software" />
<script type="text/javascript" src="https://rally1.rallydev.com/apps/1.26/sdk.js"></script>
<script type="text/javascript">
function onClick(b, args) {
console.log("works until this undefined variable");
if (OneButtonClickFlag == true) {
OneButtonClickFlag = false;
var buttonValue = args.value;
var userName = "__USER_NAME__";
TimeSheetReport(); // calling the “timesheet report “
}
}
function onLoad() {
var config = {
text: "Generate",
value: "myValue"
};
var button = new rally.sdk.ui.basic.Button(config);
button.display("buttonDiv", onClick); // call the “onclick” function
}
rally.addOnLoad(onLoad);
</script>
</head>
<body>
<div id="buttonDiv"></div>
</body>