I am just learning and trying to test my javascript with Jasmine framework.
My javascript is just setting placeholder attribute of textarea to blank.
function clearPlaceholderTextOnFocus(i) {
i.placeholder = '';
}
I am calling this function on onClick event of textarea.
I wrote below code in Jasmine spec-
describe("Test suite for clearPlaceholderTextOnFocus",function(){
it("Should set placeholder to blank", function(){
var i=affix('textarea[name="message"][placeholder="write your message here..."]');
clearPlaceholderTextOnFocus(i);
var placeholderval = $('i').attr('placeholder');
expect(placeholderval).toHaveValue('');
});
});
When I run this code by double clicking on SpecRunner.html then I am getting below error -
Error: jasmine-fixture requires jQuery to be defined at window.jQuery or window.$
Below is my SpecRunner.html file :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v2.5.2</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.5.2/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine-2.5.2/jasmine.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/core.js"></script>
<script src="lib/jasmine-2.5.2/jasmine.js"></script>
<script src="lib/jasmine-2.5.2/jasmine-html.js"></script>
<script src="lib/jasmine-2.5.2/boot.js"></script>
<script src="lib/jasmine-2.5.2/jasmine-jquery.js"></script>
<script src="lib/jasmine-2.5.2/jasmine-fixture.js"></script>
<!-- include source files here... -->
<script src="src/myfirst.js"></script>
<!-- include spec files here... -->
<script src="spec/myfirstSpec.js"></script>
</head>
<body>
</body>
</html>
What is wrong with my spec code? or do i need any other setup to run this?
Update - Including
Did you import Jquery in your SpecRunner.html? Like this
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/core.js"></script>
I have one line of JavaScript;
alert('test');
It's included through the following HTML:
<html>
<head>
<script type="text/javascript" src="code.jquery.com/jquery-latest.min.js"></script>;
<script type="text/javascript" src="test.js"></script>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
It fires the alert box twice. All browsers.
Why?
Is this normal?
Please!
More code is needed to be sure (always list the full example) but while using Google Chrome try placing debugger; before your alert('test'); call and you will be able to compare the call stacks from the first and second passes through the code. This should be enough information to help you figure out why.
You import the same script twice in your HTML, thus running it twice. Remove one of the two script tags and you should be groovy.
<html>
<head>
<script type="text/javascript" src="code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="test.js"></script>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
</body>
</html>
On a separate note - you don't need that semi-colon after the jQuery import.
trying beginner's Angular using tutorial here: https://www.youtube.com/watch?v=WuiHuZq_cg4. i think files are in proper places, permissions set, yet my index.html shows nothing on my browser, and Chrome dev tools show everything in place, no errors. code is here" https://gist.github.com/9ad771c60d33fc020216.git, but also here: [what am i missing??]
index.html:
<!doctype html>
<html ng-app>
<head>
<script src="https://code.angularjs.org/1.0.0rc3/angular-1.0.0rc3.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="js/todo.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"
</head>
<body>
<div ng-controllers="TodoCtrl">
{{totalTodos}}
</div>
</body>
</html>
todo.js:
function TodoCtrl($scope) {
$scope.totalTodos = 4;
}
Try
ng-controller="TodoCtrl"
instead of
ng-controllers="TodoCtrl"
S won't tag with controller
I am trying to setup bootstrap-calendar, but I am having some difficulties. I used the command
$ bower install bootstrap-calendar
to download the dependences and I created a test index file which looks like this:
<html>
<head>
<title>calendar test</title>
<script type="text/javascript" src="bower_components/bootstrap-calendar/js/language/en-GB.js"></script>
<script type="text/javascript" src="bower_components/bootstrap-calendar/js/calendar.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/docs/assets/js/bootstrap.js"></script>
<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/moment/moment.js"></script>
<script type="text/javascript" src="bower_components/underscore/underscore-min.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-calendar/css/calendar.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/docs/assets/css/bootstrap.css">
<script type="text/javascript">
var calendar = $('#calendar').calendar();
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
Opening index.html with a browser, gives an empty page. Any idea why?
Thanks in advance
It is possible that simply the order which you include your scripts is wrong. I usually put jQuery on top (considering most things are dependent upon it, it will need to be loaded first) then bootstrap.js below it, then underscore, so on and so forth. Scripts should also be included at the end of the body for speed, although it could also be possible that your scripts are running in the head before the dom is loaded, and #calendar is not found simply because it's not there yet. Try those things, good luck!
I got the SyntaxHighlighter from http://alexgorbatchev.com/SyntaxHighlighter/
I cant get the autoloader to work. What am I doing wrong?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="styles/shCoreDefault.css" rel="stylesheet" type="text/css" />
<script src="scripts/shCore.js" type="text/javascript"></script>
<script src="scripts/shAutoloader.js" type="text/javascript"></script>
<script type="text/javascript">
SyntaxHighlighter.autoloader('js scripts/shBrushJScript.js');
SyntaxHighlighter.all();
</script>
</head>
<body>
<pre class="brush: js">
function foo()
{
}
</pre>
</body>
</html>
I've made sure that my urls/script paths are correct.
This works, but I'd really like to get the autoloader working.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="styles/shCoreDefault.css" rel="stylesheet" type="text/css" />
<script src="scripts/shCore.js" type="text/javascript"></script>
<script src="scripts/shBrushJScript.js" type="text/javascript"></script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
</head>
<body>
<pre class="brush: js">
function foo()
{
}
</pre>
</body>
</html>
To make "SyntaxHighlighter.autoloader" work, you should move the line under your "pre" sections or put it into document ready's callback.
The "autoloader" method checks current loaded "pre" sections and requests corresponding brushes. So if it's executed before the body element loaded, no brush will be loaded.
My answer deals with the latest version of SyntaxHighlighter at the time of writing, which is version 3.0.83.
I was also having this problem and then I tried the alternative syntax for the autoloader function and it worked for me even with relative paths. Please put the following code at the bottom of your page below all your <pre> tags:
<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shAutoloader.js" ></script>
<script type="text/javascript">
SyntaxHighlighter.autoloader(
['js','jscript','javascript','js/shBrushJScript.js'],
['bash','shell','js/shBrushBash.js'],
['css','js/shBrushCss.js'],
['xml','js/shBrushXml.js'],
['sql','js/shBrushSql.js'],
['php','js/shBrushPhp.js']
);
SyntaxHighlighter.all();
</script>
Please note that the documentation about the alternative syntax on the SyntaxHighlighter website here is currently wrong. It suggests that you put in an array within an array and also that you must use full paths. Both are misleading statements because the following does not work and no error is thrown either:
SyntaxHighlighter.autoloader([ [ 'alias1', 'alias2', '/full/path/to/brush.js' ] ])
The truth is that to use the alternative syntax you just put in a series of arrays (no parent array is required!), like so and can have relative or absolute paths:
SyntaxHighlighter.autoloader([ 'alias1', 'alias2', 'path/to/brush.js' ], [ 'alias1', 'alias2', 'path/to/brush2.js' ]),
Additionally, I must note that I had a problem with using the unminified version of SyntaxHighlighter (the file under the src folder bundled with SyntaxHighlighter). It was asking for the XRegExp library which can be downloaded here: http://xregexp.com/. However, even after including this library (which for some reason does not need to be included in the minified version - very strange I know!) the code was still throwing errors. In summary, I used the minified version (available under the scripts directory) with no problems.
To finish off this answer, here is my fully working SyntaxHighlighter autoloader code:
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hello SyntaxHighlighter</title>
<link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>
</head>
<body style="background: white; font-family: Helvetica">
<h1>Hello SyntaxHighlighter</h1>
<pre class="brush: js;">
function helloSyntaxHighlighter()
{
return "hi!";
}
</pre>
<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shAutoloader.js" ></script>
<script type="text/javascript">
SyntaxHighlighter.autoloader(
['js','jscript','javascript','js/shBrushJScript.js'],
['bash','shell','js/shBrushBash.js'],
['css','js/shBrushCss.js'],
['xml','js/shBrushXml.js'],
['sql','js/shBrushSql.js'],
['php','js/shBrushPhp.js']
);
SyntaxHighlighter.all();
</script>
</html>
Try:
<script type="text/javascript">
window.onload = function ()
{
SyntaxHighlighter.autoloader('js scripts/shBrushJScript.js');
SyntaxHighlighter.all();
}
</script>
For people reading this in future, for some reason the shAutoloader.js script's path is locked in...
Meaning if you want it to auto load you're going to have to put it in this specific path:
js/syntaxhighlighter/shAutoloader.js along with the rest of the language scripts.
It's stupid but if anyone knows how to fix this, let me know :D
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="styles/shCoreDefault.css" rel="stylesheet" type="text/css" />
<script src="scripts/shCore.js" type="text/javascript"></script>
<script src="scripts/shAutoloader.js" type="text/javascript"></script>
</head>
<body>
<pre class="brush: js">
function foo()
{
}
</pre>
<script type="text/javascript">
SyntaxHighlighter.autoloader('js scripts/shBrushJScript.js');
SyntaxHighlighter.all();
</script>
</body>
</html>