Given the following document, Require.js functions fine if I run it on a webserver but fails if I open the same document locally (file:///).
I'll see 'called' printed to the console when I open the document locally (thus callback fired w/o issue) but:
There is no request listed in Firebug's/Chrome's network tab.
The variables in common.js aren't defined and none of the console.log statements run.
Require.js is NOT requesting the common.js file when the document is loaded from my desktop.
<html>
<head></head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://s3.amazonaws.com/<MYBUCKET>/scripts/require.min.js"></script>
<script>
require.config({
baseURL: 'https://s3.amazonaws.com/<MYBUCKET>'
});
require(['scripts/common'], function(){
console.log('called')
});
</script>
</body>
</html>
Given that baseurl states the http/s protocal, I don't understand why this is failing when the document is located on my desktop and works fine when the document is located at http://whatever.com.
Secondary/related:
Ideally I'd like to omit the protocals and allow the browser to handle that itself but this of course also fails completely locally.
(same code as above, sans http/https)
<html>
<head></head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//s3.amazonaws.com/<MYBUCKET>/scripts/require.min.js"></script>
<script>
require.config({
baseURL: '//s3.amazonaws.com/<MYBUCKET>'
});
require(['scripts/common'], function(){
console.log('called')
});
</script>
</body>
</html>
This probably has nothing to do with Require.js and everything to do with how browsers handle requests from file:
Is there a sensible way to make this work regardless of the document's location?
It's baseUrl, with only the U in capitals. You're using baseURL which is ignored.
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!
My cache manifest file looks like:
CACHE MANIFEST
calendar.html
scripts/jquery.js
scripts/calendar.js
NETWORK:
https://apis.google.com/js/client.js
My calendar.html looks something like:
<html manifest="calendar.cache">
<head>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/calendar.js" type="text/javascript"></script>
<script src='https://apis.google.com/js/client.js?onload=checkAuth'></script>
</head>
<body>
<div id="authorize-div" style="display: inline">
<span>Authorize access to Google Calendar API</span>
<!--Button for the user to click to initiate auth sequence -->
<button id="authorize-button">
Authorize
</button>
</div>
<pre id="output"></pre>
<script>
$(document).ready(function(){
console.log("ready");
})
</script>
</body>
</html>
If I disable the cache everything works fine. However, when the cache is enabled I get an error for the apis.google.com/js/client.js file. The error is jquery.js:5 GET https://apis.google.com/js/client.js?onload=checkAuth&_=1474962265124 net::ERR_FAILED. This is for google chrome browser, but I get a similar error for firefox. What am I missing?
This is caused due to those parameters which you are passing for client.js ie.?onload=checkAuth
In web whenever you pass any parameter that request is considered unique.So as far as the browser is concerned scripts declared in your manifest aren't the same
https://apis.google.com/js/client.js // script A
https://apis.google.com/js/client.js?onload=checkAuth //script B ≠ script A
But in calendar.cache you have declared only script A as non-cached.So now you can guess changing manifest to below would solve the issue
CACHE MANIFEST
calendar.html
scripts/jquery.js
scripts/calendar.js
NETWORK:
https://apis.google.com/js/client.js?onload=checkAuth
Ofc just removing onload=checkAuth could also work in-case you don't need the callback.Just wipe entire cache and reload to see the magic!
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.
I was wondering how to make the Jquery library work. I have of course research on this before asking this question, and I have a book that suggest doing the following:
<script src="scripts/jquery-1.6.2.min.js"><script>
however, for some reason, the stuff on my page does not respond to my code even with this. So I was very confused. What I tried was, moving the files I was working on to the same directory as the jquery-1.6.2.min.js, since jquery is a js library, but didnt work. I was wondering what could it be? I have search for syntax errors like mad, so I reallllllyyyy doubt thats the problem. I was wondering what I did wrong? The only other option I can think of is using the website tag (which I havnt tried yet):
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
or
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery- 1.6.2.min.js"></script>
</head>
Which I wanted to avoid because I didnt want to rely of being on the web when I do my work, we never know... Thanks!
This is the full code by the way:
<!DOCTYPE html>
<html>
<head>
<title>jQuery goes to DOM-ville</title>
<style>
#change_me {
position: absolute;
top: 100px;
left: 400px;
font: 24px arial;
}
#move_up #move_down #color #disappear { padding: 5px; }
</style>
<script src="scripts/jquery-1.6.2.min.js"></script>
</head>
<body>
<button id="move_up">Move Up</button>
<button id="move_down">Move Down</button>
<button id="color">Change Color</button>
<button id="disappear">Disappear/Re-appear</button>
<div id="change_me">Make Me Do Stuff!</div>
<script>
$(document).ready(function() {
$("#move_up").click( function() {
$("#change_me").animate({top:30},200);
});//end move_up
$("#move_down").click( function() {
$("#chage_me").animate({top:500},2000);
});//end move_down
$("#color").click( function() {
$("#change_me").css("color", "purple");
});//end color
$("disappear").click( function(){
$("#change_me").toggle("slow");
});//end disappear
});//end doc ready
</script>
</body>
</html>
The problem is most likely the path... Are you just using HTML pages? If so, there are a couple of things to note:
1.) When a path begins with a / it means it starts at the root folder.
2.) When a path does not start with a / it means its going to start relative to the current folder it is in.
To fix:
Inside the folder with your html, make a javascripts folder (you could call it anything, "js" for example), and place your jquery javascript files within it.
Then use this for the path to jquery:
<script type="text/javascript" src="/javascripts/jquery.min.js"
This will reference the absolute path, so if later on, you have html files in nested folders, it won't look to the relative path but the absolute one.
As well if you want to use the google version when you have internet, and a local version when you don't you can use this snippet:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script type="text/javascript">
window.jQuery || document.write("<script src='/PATH/TO/jquery.js'><\/script>")
</script>
Addendum:
Fixed the post to reflect Fabrício Matté correction.
The absolute path can get a bit funky if you're not running behind a webserver (apache for example). This is why it would work on a server, and not on your computer.
If you're running it locally, without a webserver (don't do this, install MAMP or XAMP, Apache, nginx, IIS, anything...), you'll need to specify the full path:
Mac:
/Users/yourusername/Sites/website/index.html
PC:
C:/somethign/something/else/index.html
Do you have your page (the one you copied all code for and showed us) in the same directory as a directory called "scripts"? In that "scripts" directory, do you have a file called "jquery-1.6.2.min.js"?
My guess is one of three things is happening:
You're jquery file is in a different directory
You never included the jquery file
the jquery file name is not exactly the same
If you check in FireBug, I'll bet that this file is missing
EDIT: I have discovered that this is a 405 error. So there is something going on with the webserver and handling POST methods.
I am having a strange occurrence. I have identical javascript code on both my test environment and production environment.
The test environment functions, and the production does not. Here is my identical code.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>
<script type="text/javascript" src="./js/jquery.scrollTo-min.js"></script>
</head>
<body>
<div class="content" id="content">
<a id="changeText" href="test.html">Change</a>
</div>
<script>
$(document).ready(function() {
$("#changeText").live('click', function(){
var url = $(this).attr("href");
$("#content").load(url, {var1:Math.random()*99999},function(){
alert(url + " loaded");
});
$.scrollTo("0%", 400);
return false;
});
});
</script>
</body>
</html>
Both environments report that
alert(url + " loaded");
is happening. But only my test environment actually displays the change.
The production webserver has "test.html" available in the correct location.
Are you sure the scrollTo script is being included on the production server ( or am I misinterpreting what you mean by change ) ? Perhaps try a root relative path instead of './js'? I would check Firebug's script tab to ensure it is being included.
405 errors mean that the URL you're sending to isn't expecting you to send the data in that manner. For example, if you're sending a POST request to a URL that's only designed to handle a GET request, you'll get this error.
My guess is whatever server you're running on is set up to not allow POST data to be sent to a page with a .html extension, causing the error you're seeing. Try changing the extension to a .php, .aspx, etc, and see if that helps.