I'm trying to get a simple test going with QUnit but it won't locate functions defined within $(document).ready().
test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="qunit-git.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="code.js"></script>
<script type="text/javascript" src="test.js"></script>
<link rel="stylesheet" type="text/css" href="qunit-git.css" media="screen"/>
</head>
<body>
<h1 id="qunit-header">QUnit Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
</body>
</html>
test.js
test('Blah blah', function() {
ok(mytest(), 'foo bar'
);
});
code.js
$(document).ready(function() {
var mytest = function() {
return true;
}
});
--> "Died on test #1: mytest is not defined..."
As you start testing, you may find that you need to improve the structure of your code. Defining functions as local variables inside $(document).ready is strange, and makes it so they cannot be accessed anywhere but in the .ready call. Move that function somewhere else.
Related
I'm writing Qunit tests for the following html file:
var PinPointService = {
doAjax: function(doAjax_params) {
//do some stuff
}
//a bunch more variables and functions
}
The test I'm writing in a seperate file:
QUnit.test("test", function(assert) {
var array = [];
PinPointService.doAjax(array);
//assert some stuff
});
The error I get:
PinPointService is not defined
My main js file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Pinpoint Test</title>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.0.0.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://code.jquery.com/qunit/qunit-2.0.0.js"></script>
<script type="text/javascript" src="C:\path\to\jshamcrest.js"></script>
<script type="text/javascript" src="C:\path\to\core.js"></script>
<script type="text/javascript" src="C:\path\to\integration.js"></script>
<script type="text/javascript" src="C:\path\to\jsmockito-1.0.4.js"></script>
<script type="text/javascript" src=""></script>
<script src="C:\path\to\pinpoint.html"></script>
<script src="C:\path\to\pinpointTest.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
Is there something additional I have to do besides including pinpoint.html in my main js file? I'm new to JavaScript, so I think I could be missing some fundamentals of how the language works in contrast to Java which I'm very comfortable with.
Make sure you import the file where
QUnit.test("test", function(assert) {
var array = [];
PinPointService.doAjax(array);
//assert some stuff
});
is located, after you imported PinPointService.
So in your html file it should be something like
...
<script src="C:\path\to\pinpointTest.js"></script>
<script src="file_containing_the_code_above"></script>
...
the html page is read and included from top to bottom so if you have not included the pinpointTest file yet, you can not use anything inside it.
So I have the following index.html:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
 <link href="public/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="public/js/main.js"></script>
</body>
main.js
(function($){
// Object declarations goes here
var FormLoanView = Backbone.View.extend({
tagName: 'div',
template: _.template('<p class="text-uppercase">Uppercased text.</p>'),
initialize: function(){
var data = this.$el.html(this.template())
$('body').html(data)
}
})
$(document).ready(function () {
var LoanView = new FormLoanView({
});
});
})(jQuery);
I am trying to create <p class="text-uppercase">Uppercased text.</p> and append it to the body in my index.html. It does return the p element, but the bootstrap styles don't kick in because "Uppercased text." does not return with uppercase letters. Anyone know why this is happening? Can bootstrap classes not be using in _.template?
It looks like your bootstrap.css isn't included properly. Try using the CDN or fixing the relative path of the css file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="public/js/main.js"></script>
</body>
Here's an example using only the CSS: https://jsfiddle.net/9nm5f0x9/
You don't need to include the bootstrap JS file as another commenter stated.
I have created a small HTML page in which jquery library is being called but I am getting Uncaught ReferenceError: $ is not defined.
The code is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script type="text/javascript">
$(document).ready(function(){
$.get('fetch.php/adds/3',function(data) {
$('#div-adds').html(data);
});
});
</script>
</head>
<body>
</div>
<div id="parent-container">
<div class="middle-cont" id="result-div">
<div class="left-panel">
<div id="div-restaurants"></div>
</div>
<div class="right-panel">
<div id="div-adds"></div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js" type="text/javascript"></script>
</html>
Any idea?
Thanks
Ordering problem. Loading the library after executing the code? change order to
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.get('fetch.php/adds/3',function(data) {
$('#div-adds').html(data);
});
});
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="../../fancybox/source/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="../../fancybox/source/jquery.fancybox.css" type="text/css" media="screen"/>
</head>
<body>
<a id = "single_image" href = "images/decoration/bottom4.jpg"><img src="images/decoration/bottom4.jpg" alt=""/></a>
<script type="text/javascript">
$(document).ready(function(){
$("a#single_image").fancybox();
});
</script>
</body>
</html>
I'm trying to get fancybox to display an image but it just keeps linking to the image externally. This is the very shortened version of my code but it still won't work properly as is. Typically, this issue is caused by loading jQuery twice, but that doesn't seem to be the case here.
Make sure to use the instructions given here http://fancyapps.com/fancybox/
Working code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="../../fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="../../fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
</head>
<body>
<a class="fancybox" rel="group" href="images/decoration/bottom4.jpg"><img src="images/decoration/bottom4.jpg" alt="" /></a>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</body>
</html>
i have js file named defined_tools.js iside folder js .
i wrote simple function in it
function xxxx(){
alert("rt");
}
now in my index page i included the file by this line
<script type="text/javascript" src="js/defined_tools.js"></script>
and in the head scope i write this code to execute xxxx() function
<script type="text/javascript" language="javascript">
$(document).ready(function(e) {
xxxx();
});
</script>
i got error in chrome console
Uncaught ReferenceError: xxxx is not defined
MY FULL PAGE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Main Site</title>
<link rel="stylesheet" type="text/css" href="css/defaults.css"/>
<link rel="stylesheet" type="text/css" href="css/devtool.css"/>
<!-- Jquery Library -->
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="js/defined_tools.js"></script>
<script type="text/javascript" src="js/core_osx.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(e) {
xxxx();
});
</script>
</head>
<body>
<!-- Tool Dev -->
<div id="tooldev" class="ToolSize">
<div id="new_panel" class="ToolCommands"></div>
<div id="new_text" class="ToolCommands"></div>
<div id="new_image" class="ToolCommands"></div>
</div>
<div id="workspace" class="DefaultWorkspace">
</div>
</body>
</html>
In defined_tools.js file, try to change function definition for this:
document.xxxx = function() { alert("RT");}
And import the jQuery file after the defined_tools.js.