I'm using PhantomJS to setup CI for jasmine tests. I'm facing the problem with including SystemJS in my html page. I removed everything from it, just left javascript and still facing the same error:
ReferenceError: Can't find variable: System
Here is the example of html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="lib/systemjs/dist/system.src.js"> </script>
<script>
System.config({
baseURL: './lib'
});
</script>
</body>
</html>
I ran it in console like that: phantomjs test.js http://localhost:8080.
test.js contains following code:
var page = require('webpage').create();
page.open(system.args[1], function(status)
{
phantom.exit(0);
});
It looks like it doesn't see system.src.js. I tried to put there absolute path - but still the same error. Also tried with page.injectJs - no good either.
After some time I found an answer and I want to share it, maybe someone will find it useful. I logged page.outerHTML and saw that instead of script with system.src.js I've got additional script with system-polyfills.js. It looked like that:
<script src="lib/systemjs/dist/system.src.js"></script>
<script type="text/javascript" src="http://127.0.0.1:8080/lib/systemjs/dist/system-polyfills.js">
So I've just added missing system-polyfills.js to the following folder and it fixed the error. Although I still have no idea where it came from.
Related
I have a js code that uses jQuery.MD5 library. It works perfectly on my server:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://example.com/static/js/jquery.md5.js"></script>
</head>
<body>
<script>
// my code goes here (declaring variables and functions)
var code = $.md5('mystring');
// and a little more code
</script>
</body>
But then I upload it to a web application (which I cannot control), that makes it look like this and puts it into an iframe:
<head>
<script>
// some extra variables are declared here
// double-checked that nothing here can break my code
</script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://example.com/static/js/jquery.md5.js"></script>
<script>
// some code
var code = $.md5('mystring');
// some code
</script>
</body>
And this code starts giving me the $.md5 is not a function error. Strange thing. Tried clearing the cache, putting jquery.md5.js code directly into mine, nothing works.
Note that all the code works on my machine, so there must be no problem with my JS.
Update: the problematic code behavior seems to be unpredictable, meaning that sometimes it works fine with no changes.
What can be wrong?
Hm... That's a little embarrassing, but the problem was in jQuery. The one I included in my iframe conflicted with the one included in the page. Somehow this lead to "hiding" my $.md5 function after its code's end.
And yeah, I know, it was quite obvious that jQuery could cause problems.
If you want to use jQuery md5 function you should have import jquery.md5.js file in your project.
Steps-
Download jquery.md5.js file from https://github.com/placemarker/jQuery-MD5
Copy this file into your source folder. (ex: assert/theme/js)
Import that js file to your project.
(ex: <script src="<?= base_url(); ?>/public/assert/theme/js/jquery.md5.js"></script>
)
That's it! You are done!
I am playing around with an html template and I have noticed that the developer doesn't use RequireJS or anything else to require and call different functions from other node files. Instead, they used this in the html file to initialise and call the function:
<script src="../../assets.js/test.js"></script>
<script type="text/javascript">
$(document).ready(function(){
test.initSomeFunction();
});
</script>
And I've got the below code in assets/js/test.js which defines initSomeFunction in javascript:
test = {
initSomeFunction: function() {
//Some code
}
initAnotherFunction: function() {
//More code
}
}
(It would be helpful if someone can tell me what this method is called so that I can research it more.)
My problem arises when I try to do the same thing in my node app in the home directory /main.js. The node app works fine on its own but when I add something like this:
test2 = {
initMyFunction: function() {
console.log("I finally decided to work! Good luck...");
}
}
and modify my html file like this:
<script src="../../main.js"></script>
<script type="text/javascript">
$(document).ready(function(){
test.initSomeFunction();
test2.initMyFunction();
});
</script>
then it won't work. Can someone please point me to the right direction as I don't even know what to Google. I am trying to avoid using RequireJS or anything else as I am a total beginner and the method that the developer used sounds so simple and tempting.
I wish this answer will help you:
I am using express, so I do this to solved your problem!
main.js file's position:
modify app.js add:
app.use(express.static(path.join(__dirname, '/')));
Then, in the view file:
<html>
<head>
<script src="public/javascripts/jquery-1.10.2.min.js"> </script>
<script src="main.js"></script>
</head>
<body>
<script>
$(function () {
//test.initSomeFunction();
test2.initMyFunction();
})
</script>
</body>
</html>
Open the chrome Developer Tools. You will see the result.
I am trying to play audio using AngualarJs
My HTML CODE:
<!doctype HTML>
<html>
<head>
</head>
<body ng-app="test" ng-controller="audioTest">
<button ng-click="playSound()"></button>
<script src="javascripts/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script src="javascripts/angular.audio.js"></script>
<script src="app.js"></script>
</body>
</html>
My app.js Code:
var app = angular.module("test",['ngAudio']);
var audio = app.controller("audioTest",function($scope,ngAudio){
$scope.playSound = function(){
$scope.audio = ngAudio.load("abc.wav");
$scope.audio.play();
}
});
While i load page i got error in console which lead me to
Error Details
The error you're reporting is due to an error resolving angular.audio.js script that can't be found by the name javascripts/angular.audio.js
I made a working fiddle: http://jsfiddle.net/en8x1nny/
This fiddle imports the script that the original demo from ngAudio is using.
The full path for that script is: http://danielstern.github.io/ngAudio/angular.audio.js.
You can download it and add it to your javascripts directory. Be sure not to use it by the URL mentioned above because github is not a CDN intended to serve scripts.
If you previously installed ngAudio by bower, the script should be in:
your_project_path/bower_components/angular-audio/app/angular.audio.js
I am a newbie to require js and faced this strange problem while creating our first :
Following is the home page :index.html
<html>
<head lang="en">
<meta charset="UTF-8">
<title>My first JS app using require</title>
</head>
<body>
<strong> This is my first require js app</strong>
<span id="output"></span>
</body>
<script data-main="js/main" src="js/lib/require.js"></script>
</html>
main.js is as follows :
require(['lib/jquery','app/message'],function($,message){
$('#output').html(message);
});
message.js is as follows :
define(function(){
return "Message from message.js";
});
When i run index.html on browser, $ in main.js comes as undefined. It does not produce any other error on console. Also all files are loaded successfully(confirmed from networks tab in browser).
If i change the main.js to be as follows :
require(['jquery','app/message'],function($,message){
$('#output').html(message);
});
And accordingly place jquery.js in appropriate directory, everything works fine.
I am not able to figure out the reason here. Can anybody please help here. Thanks in advance.
I have a problem including a jQuery script in my webpage. I always get the error "$ is not a function" in line 6. I reduced my script to the following very simple one:
$(document).ready(function(){
myTest();
});
function myTest(){
window.console && console.log($("#test"));
}
Why is there an error in line 6? Why not already in line 1?
You have not included jquery.js in your page, or the path you have used is incorrect. Here is an example one using Google's CDN:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
// your code here...
</script>
</head>
</html>
The line numbers given in browser error messages are notoriously unreliable, always use the actual error message as a guide to the problem.
Hi Please download and include jquery.js or jquery.min.js
in script tag
Give jquery.js path in script src attribute
This error message means that jQuery is not included