I am experimenting with nicEdit, a WYSIWYG editor (http://nicedit.com/)
It is quite straightforward to use. Need to add just the following two lines to code
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
My html is
<!DOCTYPE html>
<html>
<head>
<!-- add list of tags here in meta data -->
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="index.css">
<title>some title</title>
<script src="jquery/jquery-3.3.1.min.js"></script>
</head>
<body>
<textarea id="d" type="text"></textarea>
<textarea id="s" type="text"></textarea>
<textarea id="h" type="text"></textarea>
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas)</script>
<-- ISSUE HERE IF I USE () -->
</body>
</html>
It seems I can pass configuration options to the editor - http://wiki.nicedit.com/w/page/515/Configuration%20Options
I want to call the allTextAreas by passing a configuration object to it. But when I call the allTextAreas by adding ({someProperty:someValue}), I get error in the console
nicEdit-latest.js:8 Uncaught TypeError: bkLib.domLoad[i] is not a function
at HTMLDocument.domLoaded (nicEdit-latest.js:8)
domLoaded # nicEdit-latest.js:8
Why does using () give error?
It looks it needs a function, try wrap it:
<script type="text/javascript">bkLib.onDomLoaded(() => nicEditors.allTextAreas({someProperty: someValue}))</script>
Explain
bkLib.onDomLoaded accepts a callback function.
nicEditors.allTextAreas works because it's a function, but you will not be able to pass custom argument when it's get called.
() => nicEditors.allTextAreas({someProperty: someValue}) works because it wraps nicEditors.allTextAreas in another function, and when it's get called, the {someProperty: someValue} is passed into it.
nicEditors.allTextAreas({someProperty: someValue}) doesn't work because it calls that function immediately and resolves whatever it returns and passed it into bkLib.onDomLoaded. Which I assume is not what you wanted.
Related
I try to make dynamic page that needs to load math symbol lazily, and so I need to call MathJax after all my math symbol has finished being loaded. I tried to read MathJax doc and found this: http://docs.mathjax.org/en/latest/advanced/typeset.html but when I did as it told, I get "ReferenceError: MathJax is not defined" error in console. How can I solve this? Here's my html code:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js">
</script>
</head>
<body>
<div id="main" class="container">
<p>\(A \cup B\)</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
</script>
<script>
$(document).ready(function () {
$("#main").append("<p>\\(A \\cup B\\)</p>");
MathJax.typeset();
})
</script>
</body>
</html>
Cause
By specifying async in your <script> tag, you are loading the MathJax-script in an asynchronous way, meaning your browser is downloading the MathJax library in background, while it continues to execute the rest of the page's content.
Chances are that your document is ready, so your browser executes the call MathJax.typeset(); before it finishes loading the library, causing this unknown reference error.
Suggestions
You can remove the async property, to force the browser to load the library first, then execute the rest of the scripts.
Or you can use defer property, to asynchroneously load the scripts and ensure that the scripts are executed in the right order (they rely on each other).
Related topics you might be interested in:
https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html#script-async
Script Tag - async & defer
Async and document ready
async="async" attribute of a <script> tag in html, What does it mean?
I am not sure what I am doing wrong but in my application when I try to do something like
$('#root').text();
I get
VM269:1 Uncaught TypeError: Cannot read property 'val' of null(…)
I have no clue why as I am referencing jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" />
<meta charset="UTF-8">
<title>Document</title>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!--materialize does not understand jquery if I use it as import-->
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
I am using reactjs but I don't think that should be a problem and the fact that I have no problems with firebug in firefox when I do the same command.
Edit
My bad $('#test') is something rendered into "root" div but same issue. So I just updated my query to do $('#root').text()
but doing $('#root') works it finds the element and like I said in firebug everything works.
You are trying to get the value from a tag with id='test' and you don't have one in your HTMl.
If you have used $('#root').val() it'd work.
Helpful selector link
I believe you want the value of id="test". However, I do not see id="test" on your html file that you have included. Furthermore, you can also try $('#test').text() that will grab html text.
Context
I've used Mocha before many times, both in the browser and just using the command line. I tend to use Chai's expect module for bdd.
I have five test files that have been working with command line npm test. I just want to run the tests in the browser for better debugging.
Problem
The setup is just boggling my mind. I either get a blank Mocha page without tests or I see the first test flash on screen, then it redirects.
Current specRunner.html
<!DOCTYPE HTML
<html>
<head>
<title>Mocha Tests</title>
<link rel="stylesheet" href="node_modules/mocha/mocha.css" />
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/mocha/mocha.js"></script>
<script src="node_modules/chai/chai.js"></script>
<script>mocha.setup('bdd');</script>
<script src="mineLocation.js"></script>
<script src="test/mineTests.js"></script>
<script>
window.expect = chai.expect;
mocha.run();
</script>
</head>
<body>
<div id="mocha"></div>
</body>
</html>
Previous Attempts
I've tried moving script tags around, thinking that dependencies are being unmet at load time.
I've tried relative vs. absolute paths. Console says all the tags are loading correctly.
I've tried modifying the run script tag. When it is as the example above, it turns out a blank page and says "Cannot read property 'appendChild' of null", pointing back to Mocha:
When the run script tag looks like this:
$(function() {
window.mochaPhantomJS ? mochaPhantomJS.run() : mocha.run();
});
It redirects from /specRunner.html to /2,1 and the console error repeats about every 30 seconds.
Here you go, just tested it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mocha Test</title>
<link rel="stylesheet" type="text/css" href="node_modules/mocha/mocha.css">
</head>
<body>
<div id='mocha'></div>
<div id='app'></div>
<script src="node_modules/mocha/mocha.js"></script>
<script src="node_modules/chai/chai.js"></script>
<script src="app.js"></script>
<script>
mocha.setup('bdd');
var expect = chai.expect;
</script>
<!-- Tests -->
<script src="app_test.js"></script>
<script>
mocha.run();
</script>
</body>
</html>
So, I've found that it's not necessarily an issue with the HTML setup, but rather an issue with a test.
Setting the location variable globally within the file causes the strange redirection (to /2,1) and error "Cannot read property 'appendChild' of null".
Moving the variable within the describe statement, on line 4, fixes the problem.
My final HTML is cleaner as well:
<html>
<head>
<meta charset="utf-8">
<title>Mocha Tests</title>
<link rel="stylesheet" href="node_modules/mocha/mocha.css" />
</head>
<body>
<div id="mocha"></div>
<script src="node_modules/mocha/mocha.js"></script>
<script>mocha.setup('bdd');</script>
<script src="node_modules/chai/chai.js"></script>
<script>var expect = chai.expect;</script>
<!-- src files -->
<script src="narcissistic.js"></script>
<script src="morseCodeDecoder.js"></script>
<script src="windComponents.js"></script>
<script src="mineLocation.js"></script>
<!-- test files -->
<script src="test/narcissisticTests.js"></script>
<script src="test/morseTests.js"></script>
<script src="test/windTests.js"></script>
<script src="test/mineTests.js"></script>
<script>mocha.run();</script>
</body>
</html>
Going slightly insane here, I'm wondering why a simple
console.log("test")
isn't appearing in my console. My code is below. I also tried
$(function() {
console.log("test")
});
but that didn't do it either. Isn't the purpose of the above and my function below to wait until the page loads and then do the function? No matter where I put the code - header, body...it's not working.
<!DOCTYPE html>
<html>
<head>
<title>jQM Autocomplete</title>
<meta content="initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport" />
<meta name="viewport" content="width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="styles.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="jqm.autoComplete-1.5.2.js"></script>
<script src="code.js"></script>
</head>
<body>
<div data-role="page" id="mainPage">
<div data-role="content">
<p>
In this example autoComplete uses a local array comprised of strings. This also shows an example of the matchFromStart property set to false.
</p>
<p>
<input type="text" id="searchField" placeholder="Categories">
<ul id="suggestions" data-role="listview" data-inset="true"></ul>
</p>
</div>
</div>
<script>
$(document).on("pageshow", "mainPage", function() {
console.log("test")
});
</script>
</body>
</html>
The console is ready way before the page so you won't get anything by using document.ready callback. Chances are something has overridden your console. To find out if that's true, inspect your console object by simply typing console into your console. In Chrome, it should return something like this:
Console {memory: MemoryInfo, debug: function, error: function, info: function, log: function…}
If that proves true, you need to find where in your code is the console redefined. Also, you might want to test your code in another browser - perhaps you have an extension or something that's blocking the console for some reason.
But before everything, please double-check your code for syntax errors.
Also, make sure you've set your console to show logs (the filter button, it's next to the clear console button).
The problem was to do with my console settings. In console there's some grey buttons along the bottom - All, Errors, Warnings, Logs, Debug. Well, Errors was selected, for some reason. So I was getting nothing in Console but errors. Click 'All' and it works properly.
Having said that, my code was also missing that # before mainpage, as highlighted by null.
I really enjoy this set of widgets: http://www.jmwidgets.com/index.php/docs/widgets/hmiindicator/
However, I need to set the value of an indicator at initialize (or later on page update) using a value, rather than linking it to another value (although I could do this through a dummy element if I had to I suppose).
I can't, no matter what I've tried, get it to work. Here is the fiddle: http://jsfiddle.net/uLuZQ/39/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HMI Indicator Example</title>
<!-- JMWidgets styles -->
<link rel="stylesheet" href="css/base/jmwidgets-0.8.0.base.min.css">
<link rel="stylesheet" href="css/jmwidgets-0.8.0.allstyles.min.css">
<!-- jQuery classes -->
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery-ui-1.8.23.custom.min.js"></script>
<!-- JMWidget classes -->
<script src="js/jmwidgets-0.8.0.min.js"></script>
<script>
$(function() {
$("#ind1").hmiIndicator( {colors:['red','yellow','green'],value:1} );
var val= $("#ind1").hmiIndicator( 'option','value' );
alert(val)
});
</script>
</head>
<body id="page1">
<div id="ind1" style="width:150px; height:150px"></div>
<br />
</body>
</html>
Please tell me what I'm stupidly missing. The documentation seems pretty clear, but I can't get it to work at initialize or using setter.
Thanks,
C