I want to use the AutoComplete of CodeMirror, but I'm getting the error:
Uncaught TypeError: Cannot read property 'javascript' of undefined
CodeMirror.commands.autocomplete = function(cm) {
CodeMirror.showHint(cm, CodeMirror.hint.javascript); // Error Here
}
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
extraKeys: {"Ctrl-Space": "autocomplete"}
});
In order to use autocomplete capabilities, you must insure to include the appropriate scripts, i.e. show-hint.js, show-hint.css and javascript-hint.js (which seems like the one causing the fuss here).
Take a look at the autocomplete demo's source code for a reference.
Related
I've got a problem with v2 of ziggeo.
Following is my case:
I'm using ziggeo from that url:
//assets-cdn.ziggeo.com/v2-stable/ziggeo.js
I initialise it with the following code:
new ZiggeoApi.V2.Application({
token: {TOKEN},
language: {LANGUAGE},
webrtc_streaming: true
});
And if I output 'ZiggeoApi' the following appears:
So the main problem is now that 'Events' doesnt exist in the object. And if I use the following code which I got from your site (Here: https://ziggeo.com/docs/sdks/javascript/browser-integration/embed-methods#javascript-version=v2) with that at the beginning:
ZiggeoApi.Events.on("system_ready", function() {
... it doesn't work and produces an error. Because of the missing 'Events' Attribute I'm also not able to use any other functionality which is connected with events.
When I change the version to v1-stable in the url it's working.
Is this a bug or what am I doing wrong?
I've found a solution. You have to do it this way:
Initialise the app:
let app = new ZiggeoApi.V2.Application({
token: {TOKEN},
language: {LANGUAGE},
webrtc_streaming: true
});
Then call the 'on ready' function directly on the initialised object:
app.on('ready', function() {
// do what you want!
});
That's the way how you have to do it with Ziggeo V2.
When I try to pass language dynamically from select dropdown list, It shows following error
Uncaught TypeError: Cannot read property 'properties' of undefined at changeLanguage
Where changeLanguage is my function as follows:
function changeLanguage(lang)
{
lang = lang || "en_EN"; // if no language is set, use browser default
jQuery.i18n.properties({
path : 'language',
mode : 'both', language: lang,
name: 'Messages',
callback: refresh_i18n });
}
Following are the pictures of it:
Dropdown image
Console error
What is wrong with the code?
Please do suggest!
Thanks
UPDATE:
FOR MORE EXPLANATION:
This is my index file and initially I call it with onload it works fine.
<script>
function refresh_i18n() {
console.log('Some code...')
}
function changeLanguage(lang) {
lang = lang || "en_EN";
jQuery.i18n.properties({
path : 'js/libs/language',
mode : 'both',
language: lang,
callback: refresh_i18n
});
}
changeLanguage("en_US");
</script>
but when i call by changing dropdown like:
$('#selectLanguage').change(function(){
changeLanguage(this.value);
});
It gives above error
Probrably the i18n library is loading before the jquery (problems haha).
So, put the jQuery loading in the head of the html and the plugin i18n (and others, if you are using) in the body (I suggest in the end of body) of the html.
That must solve the problem.
I am attempting to eval a js file which has the following content:
let typeCache = {};
export function type(label = '') {
if (typeCache[label]) {
throw new Error(`Action type "${label}" is not unique"`);
}
typeCache[label] = true;
return label;
}
That's the whole file. No imports, nothing too fancy. But I'm getting an error that says ReferenceError: label is not defined. Which is strange, given that label seems defined just fine.
Can anyone spot anything wrong here?
UPDATE: This file (and many others) are generated from Typescript, and sent to gulp-template so that variables can be replaced, etc. That's when the code is evaled. Here is the complete stacktrace I'm getting:
ReferenceError: label is not defined
at eval (lodash.templateSources[80]:9:10)
at DestroyableTransform._transform (C:\Work\School\Frontend\node_modules\gulp-template\index.js:24:40)
at DestroyableTransform.Transform._read (C:\Work\School\Frontend\node_modules\readable-stream\lib\_stream_transform.js:159:10)
at DestroyableTransform.Readable.read (C:\Work\School\Frontend\node_modules\readable-stream\lib\_stream_readable.js:365:10)
at flow (C:\Work\School\Frontend\node_modules\readable-stream\lib\_stream_readable.js:739:34)
at DestroyableTransform.<anonymous> (C:\Work\School\Frontend\node_modules\readable-stream\lib\_stream_readable.js:610:7)
at emitNone (events.js:86:13)
at DestroyableTransform.emit (events.js:185:7)
at onwriteDrain (C:\Work\School\Frontend\node_modules\gulp\node_modules\readable-stream\lib\_stream_writable.js:300:12)
at afterWrite (C:\Work\School\Frontend\node_modules\gulp\node_modules\readable-stream\lib\_stream_writable.js:288:5)
at onwrite (C:\Work\School\Frontend\node_modules\gulp\node_modules\readable-stream\lib\_stream_writable.js:281:7)
Thanks!
Ohhh I found the issue.
The code above is sent to gulp-template, which uses Lodash's template function, which in turn also attempts to replace that ${label} in the function... resulting in the error given that this is not defined at that time.
So, beware my gulp-template friends.
I fixed my issue by disabling gulp-template's ES6 interpolation and leaving just the ERB style interpolation (e.g. <% blah %>). I did that by providing an options object along with the template, like so:
.pipe(plugins.template(templateToReplace, { interpolate: /<%=([\s\S]+?)%>/g }))
I'm using the CodeMirror library which is awesome. The code editor that I'm istantiating is a part of a form and therefore I want to do a basic check with linting to see whether the user's input seems valid. Unless the code is fine, I don't want to process the form.
So the question is: is there a method on the CodeMirror editor instance that would allow me to retrieve the result of linting? I'm looking through the docs and Google but failed to find anything helpful. There's this performLint method that is added to the editor, however it does not return the results of linting.
There isn't a specific method to get the linting results, but there is a hook provided when you define a getAnnotations property in the lint options object.
Here's a basic options object that would trigger linting:
var codeMirrorOptions = {
"lineNumbers": true,
"indentWithTabs": true,
"mode": "css",
"gutters": ['CodeMirror-lint-markers'],
"lint": true
}
You can specify an object (instead of a boolean) as the lint property:
"lint": {
"getAnnotations": css_validator,
"async": true
}
Then, define your own validator function. This function can just call CodeMirror's bundled validator:
function css_validator(cm, updateLinting, options) {
// call the built in css linter from addon/lint/css-lint.js
var errors = CodeMirror.lint.css(cm);
updateLinting(errors);
}
At this point you've replicated the behavior of lint:true -- but now the errors variable contains an array of lint errors. If errors.length == 0, no errors were found.
Note: this sample assumes you are linting CSS, but the same would apply for other types.
The updateLinting function in lint.js passes its annotations (and editor) to the onUpdateLinting option:
if (options.onUpdateLinting) options.onUpdateLinting(annotationsNotSorted, annotations, cm);
so all you have to do is have your handler as the lint option property:
lint: { onUpdateLinting: handleErrors }
This is a hint for Dezzas Answer:
Write,
var errors = CodeMirror.lint.css(cm, options);
Otherwise, it will fail.
#Clem's answer led me in the right direction, though I did run into a few issues. The first was seeing Bad option: onUpdateLinting repeatedly in the console (See this reported Codemirror issue). The second was seeing the annotations array containing null entries sometimes. Here is my linting configuration passed into Codemirror that solves these issues. Note that I'm using react-codemirror2, but the options get passed into Codemirror in the same format. My component has an optional onLintingComplete callback that can be provided by the consuming component and you'll see that callback referenced below where it is passed the array of lint annotations:
lint: onLintingComplete
? {
onUpdateLinting: (_annotationsNotSorted, annotations) =>
onLintingComplete(
// sometimes codemirror includes null annotations in the array, so we want to filter these out
annotations.filter(annotation => annotation != null)
),
// This empty lint options object is needed here, see: https://github.com/codemirror/CodeMirror/issues/4198
options: {},
}
: true,
When trying to use Mocha (version 1.3.2) in the browser, along the lines of the given example, I get the following exception when trying to specify acceptable globals in the expected way (i.e. with something like mocha.globals(['amplify', '_'])):
Uncaught TypeError: Object function Mocha(options) {
options = options || {};
this.files = [];
this.options = options;
this.grep(options.grep);
this.suite = new exports.Suite('', new exports.Context);
this.ui(options.ui);
this.reporter(options.reporter);
if (options.timeout) this.suite.timeout(options.timeout);
} has no method 'globals'
This is exhibited in Chrome 21.0.1180.
One may reproduce this by going to the given example link, and in the browser console run mocha.globals(['123']).
I would expect mocha.globals to work as the linked example suggests, or there to be some documentation about an alternative, but I have found none.
This is issue #42 on visionmedia/mocha GitHub. The solution is, in Coffeescript:
mocha.setup
ui: 'bdd'
globals: [ 'jade' ]