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!
Related
When I reload a page called Donkey.aspx, there's a breakpoint being hit on the method below.
protected void Application_BeginRequest(object sender, EventArgs e)
{
if (application.Request.Url.AbsolutePath.EndsWith(".blopp")) { ... }
}
The problem is that all I get to see is a hit on the Donkey.aspx and another file (the one with id __browserLink_initializationData) referenced by it, only. However, there's a bunch of other references to files and those are not causing hits on the method. The end of the produced page looks like this.
<script type="text/javascript" src="/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.placeholder.js"></script>
<script src="beep.blopp" type="text/javascript"></script>
<script src="typeahead.bundle.min.js" type="text/javascript"></script>
<script type="text/javascript" src="utils.js"></script>
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR"
id="__VIEWSTATEGENERATOR" value="54ACFC5B" />
</div>
</form>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"f51b45a6ac174b6e8880184492a80734"}
</script>
<script type="text/javascript" src="http://localhost:64593/9...7/browserLink" async="async">
</script>
<!-- End Browser Link -->
</body>
Accessing another page gives me the expected behavior, namely a bunch of hits on the event handler above, including CSS-files etc. Notable is that the files do indeed get loaded, as verified by the functionality of the scripts, console status codes (200 and 304 all around). The master page is virtually empty.
I'm at loss on what's wrong and even more uncertain on how to trouble-shoot it.
Static files are usually cached by browser. Turn off browser cache or reload all from server (Ctrl+F5).
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.
I am trying to access linkedIn from my website. For that I have created a new Application and get the API key. And implemented in my code below. This gives me the blank page but works only in Javascript API developer console.
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: mykey
authorize: true
</script>
</head>
<body>
<script type="In/Login">
Hello, <?js= firstName ?> <?js= lastName ?>
</script>
</body>
Please help to get the login button..
The code looks alright as far as I can tell. As mentioned in the docs:
Verify that your API key, is specified in the framework script tag.
Verify that the full domain name you are using to access the html
file is specified in the key's configuration details.
Check your JavaScript Console for any framework errors.
If you are using Firebug or WebKit's Developer Tools, check to make
sure that the following files were loaded automatically: in.js,
userspace.js and framework.js
I found that you need a specific jQuery version to make the button appear!
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5b1.js"></script>
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: xxxxxxxxxxxxx
onLoad: onLinkedInLoad
authorize: true
</script>
And to show the Button you will need also this somewhere BUT INSIDE A BODY TAG!!!
<body>
<script type="IN/Login"></script>
</body>
hope that will give some light to the issue!
I'm building an HTML5 app that uses Google Doubleclick ads. 99% of the app is dynamically built with JS, but the ads are hardcoded into the html like so:
<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'></script>
<script type='text/javascript'>
GS_googleAddAdSenseService("ca-pub-3664602748600160");
GS_googleEnableAllServices();
GA_googleAddSlot("ca-pub-3664602748600160", "125x125");
GA_googleAddSlot("ca-pub-3664602748600160", "250x250");
GA_googleAddSlot("ca-pub-3664602748600160", "160x600");
GA_googleAddSlot("ca-pub-3664602748600160", "468x60");
GA_googleFetchAds();
</script>
<div id="ads" style="float:right;">
<div id="square" style="visibility:hidden">
<div>
<script type='text/javascript'>
GA_googleFillSlot("250x250");
</script>
</div>
</div>
<div id="small_square" style="visibility:hidden">
<div>
<script type='text/javascript'>
GA_googleFillSlot("125x125");
</script>
</div>
</div>
<div id="tall_banner" style="visibility:hidden">
<div>
<script type='text/javascript'>
GA_googleFillSlot("160x600");
</script>
</div>
</div>
<div id="half_banner" style="visibility:hidden">
<div>
<script type='text/javascript'>
GA_googleFillSlot("468x60");
</script>
</div>
</div>
These ads are then hidden/shifted as needed to fill the various ad spots on the generated pages. When i implemented a manifest file to cache persistent assets i get a message that it has failed to load the http://partner.googleadservices.com/gampad/google_service.js file. Knowing this, I tried saving a local copy of that js file and including it in the manifest, but this led to errors regarding the GA_googleblahlah calls being undefined which seems to indicate a load order issue of some sort. Is there some way to exempt this file from cache?
I found the solution. Using a wildcard in the network area after defining the cached elements seems to have fixed the issue. My manifest file now looks like this:
CACHE MANIFEST
CACHE:
/js/jquery.min.js
/js/jquery.easing.1.3.js
/etc
NETWORK:
*
Thanks to Ben Poole for the pointers.
If you don't want a file to cache you add it to the NETWORK: section of your manifest file. From Dive Into HTML5:
The line marked NETWORK: is the beginning of the “online whitelist”
section. Resources in this section are never cached and are not
available offline. (Attempting to load them while offline will result
in an error.)
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.