I wanted to make my site work offline and I did it. But the problem is that I can't update my manifest file. I have the function that should check for update and update it if is possible but I don't know why it's not working.
This is my index.html
<html manifest="VideoPlayer.appcache" >
<head>
<title>Video Player</title>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body id='main'>
...
<script>
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {}
}, false);
}, false);
....
</script>
</body>
</html>
And my VideoPlayer.appcache:
CACHE MANIFEST
index.html
style.css
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
Can You tell me what's wrong with it?
I don't know whether your Javascript can make it easier (I sure hope so!), but what I have learned from experiments with appcached files is that they are only successfully updated/refreshed/reloaded in Chrome and Firefox under the following conditions:
The in your case VideoPlayer.appcache file itself must also be updated. You can do that by including a date and time in the file and change that to the date and time that you update the web page. See the below code block how to include date and time.
Chrome's normal but total browser cache must be cleared as well; just doing a 'hard reload' with Ctrl + F5 won't do. See here how to clear it: http://www.guidingtech.com/1662/clearing-cache-in-google-chrome/.
In Firefox, that doesn't even do, not even in combination with Ctrl + F5. Firefox's Offline Cache must be cleared: Tools -> Options -> Advanced -> Network -> Offline Web Content and User Data -> Remove [site].
Here is the date and time method for the appcache file:
CACHE MANIFEST
# 2014-06-25 — 15.50
CACHE:
[your to-appcache files here]
Changing the date and/or time will tell the browser that the to-appcache file is updated and should be reloaded.
I have not tested matters in IE, among others things because I don't have IE10, and IE9 doesn't do appcaches.
Let me know how it works out if you will, especially in combination with your Javascript.
Related
I'm trying to get PouchDB's Getting Started Guide working using IE11 from a local file (file://). Is it possible?
It works great using a local http server by adding the following scripts to the header in the index.html file:
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill#8/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch#3.0.0/dist/fetch.umd.min.js"></script>
I think my issue is both indexedDB and localStorage seem to be restricted by IE when served using the file:// protocol, however I was able to get localStorage working on it's own using the code below from this post:
!localStorage && (l = location, p = l.pathname.replace(/(^..)(:)/, "$1$$"), (l.href = l.protocol + "//127.0.0.1" + p));
So I thought that would get it working, but even then when i add the pouchdb localstorage adapter I get this error: "AssertionError: .status required, old abstract-leveldown".
Even if that did work, the solution isn't ideal because I need to add file://127.0.0.1 to the trusted sites list.
That's about as far as I've gotten, any help would be appreciated!
Thanks to Zhi Lv - MSFT comment I was able to get the demo working in IE11, however it requires the user to add 'file://127.0.0.1' to the trusted sites list in IE.
After completing the 'Getting Started' guide you'll need to make the following changes.
Update the head element in index.html file:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>VanillaJS • TodoMVC</title>
<link rel="stylesheet" href="style/base.css">
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill#8/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch#3.0.0/dist/fetch.umd.min.js"></script>
<script src="pouchdb/object-assign.js"></script>
<script src="pouchdb/pouchdb-7.2.1.js"></script>
<script src="pouchdb/pouchdb.localstorage.js"></script>
<script src="pouchdb/pouchdb.memory.js"></script>
<!--[if IE]>
<script src="style/ie.js"></script>
<![endif]-->
</head>
You will need to download any missing 7.2.1 pouch-db files and put into a pouchdb directory. object-assign.js can be found here.
Modify the app.js, replace the db variable with these two lines:
!localStorage && (l = location, p = l.pathname.replace(/(^..)(:)/, "$1$$"), (l.href = l.protocol + "//127.0.0.1" + p));
var db = new PouchDB('todos', {adapter: 'localstorage'});
Goto line 8796 of pouchdb.localstorage.js, edit it to set the db.status like this:
function LevelUP (db, options, callback) {
db.status = 'unknown';
if (!(this instanceof LevelUP)) {
return new LevelUP(db, options, callback)
}
Bit of a muck around, but worked for me. Any improvement please let me know.
All I am trying to do at this point is get the quick example working as shown here - https://cloudinary.com/documentation/upload_widget
This is my code -
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
</head>
<body>
<button id="upload_widget" class="cloudinary-button">Upload files</button>
<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>
<script type="text/javascript">
var myWidget = cloudinary.createUploadWidget({
cloudName: 'cloudname',
uploadPreset: 'uploadPreset'}, (error, result) => {
if (!error && result && result.event === "success") {
console.log('Done! Here is the image info: ', result.info);
}
}
)
document.getElementById("upload_widget").addEventListener("click", function(){
myWidget.open();
}, false);
</script>
</body>
</html>
When I click on the "Upload files" button the grey box of the upload widget does appear but all I see inside is a loading icon.
your code is working perfectly fine for me locally and on Codepen without making a single change to the code. I even uploading two pictures using it, which you should check if they appeared in your Cloudinary account. Don't worry, they are clean.
Since I can't check if the images were uploaded to your account, I created a Cloudinary account of my own and verified that the widget is indeed working fine. I only checked it by changing to my cloudName and preset.
Here's the Codepen Link
Your code below since Codepen Links need to have code accompany them.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
</head>
<body>
<button id="upload_widget" class="cloudinary-button">Upload files</button>
<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>
<script type="text/javascript">
var myWidget = cloudinary.createUploadWidget({
cloudName: 'dw62s0tlm',
uploadPreset: 'rossm67'}, (error, result) => {
if (!error && result && result.event === "success") {
console.log('Done! Here is the image info: ', result.info);
}
}
)
document.getElementById("upload_widget").addEventListener("click", function(){
myWidget.open();
}, false);
</script>
</body>
</html>
This is from their support (which worked) -
The most common reason why that would happen is if the HTML file that contains the code for the widget is opened in the browser directly, via the file:// protocol. In order for this to work, the file should be opened from within your localhost through a web server via HTTP.
For example, if your system has Python installed you can quickly run a simple HTTP server in the same directory as your file which would make it accessible.
For example in Python 3:
python3 -m http.server
Python 2.7:
python -m SimpleHTTPServer
Then navigating to http://localhost:8000/index.html would run the code and should allow you to launch the widget.
I have the following code:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
function loadPhotos(folderName){
var folder = "assets/photos/"+folderName+"/";
$.ajax({
url : folder,
success: function (data) {
$(data).find("a").attr("href", function (i, val) {
if( val.match(/\.(jpe?g|png|gif)$/) ) {
$("body").append( "<img src='"+ folder + val +"'>" );
}
});
}
});
}
</script>
</head>
<html>
<div onclick="loadPhotos('7thAnnual')">7th Annual</div>
</html>
For some odd reason when I click on the div, the loadPhotos function throws a 404 not found error on the ajax call.... but the directory that it is saying it can't find, does exist.
For the record I am running this on localhost (http://127.0.0.1:8020/).
the directory structure is Ljf/assets/photos/7thAnnual ....
so the full path would be http://127.0.0.1:8020/Ljf/assets/photos/7thAnnual
the 7thAnnual directory holds all the images
Any thoughts?
Okay.... so it seems that I have to fully qualify the name in the url like so:
var folder = "127.0.0.1:8020/Ljf/assets/photos/7thAnnual";
instead of using just:
var folder = "Ljf/assets/photos/7thAnnual"
This answer brings a
"Cross origin requests are only supported for protocol schemes: http,
data, chrome, chrome-extension, https, chrome-extension-resource."
which is a different issue than this post, but it does solve the
404 not found
So I'll mark it as the answer
You must create the directory assets/photos/7thAnnual/. Be sure you did that
If you run this in chrome and open the nifty little inspector
(right click on the background somewhere, choose inspect, then go to the network tab on the inspection window)
then click the div that should trigger the ajax, it should show you the path it tries to get to. (on your little network panel at the very bottom)
Make sure that the path looks right
Look at the response to see if there is any other potentially useful info
let me know what you find!
Goal:
To sum it up, I'm trying to replace an excel spreadsheet. I'm creating an application that will run in IE9, but does not connect to the internet or an intranet (I know, I know. Just bear with me. If you're curious read more below). It needs to use CRUD (create, read, update, and delete) methods on a set of data that changes daily. The dataset must persist even when the browser is closed.
Question:
What options are available, using javascript and html, for storing data on the local computer the web page is accessed on? I'm doing this at work, so there will be no server-side to this. I also will not be able to install any software on the computer, although I can download javascript plugins. The webpage will be loaded from a file on the computer, using Win 7 and IE9.
Background:
This deserves an explanation. I use an excel spreadsheet to track a set of data that changes daily. I'm learning HTML and javascript, and I can create a much better (and easier to use) solution as a webpage. I can create the UI / UX, but I'm having a difficult time figuring out how to store the data on the local computer. Any good suggestions?
Attempts:
Unfortunately, it seems localStorage is not an option. I'm attempting to use jStorage, but I've been running into problems there, also. A similar set of problems has been encountered using simpleStorage.
Thank you for considering, please let me know if any more info is needed, or if I need to clarify something.
Addendum:
Localstorage, and other forms of HTML5 storage, do not work. Officially it does, unofficially it is very buggy. See blog post here, and SO answer here. Either way, with the following simple code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Backlog Tracker</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="backlog_localstorage.js"></script>
</head>
<body>
</body>
</html>
and javascript (ref as "backlog_localstorage.js" above):
$(document).ready(function(){
$("body").append("<button>Try It</button>");
$("button").click(function(){
localStorage.setItem("key1", "Hello");
console.log(localStorage.getItem("key1"));
});
});
... I get the following error: "SCRIPT5007: Unable to get value of the property 'setItem': object is null or undefined" on the line localStorage.setItem("key1", "Hello");
HTA (which is really just an html file with one extra tag and a different file extension) is one possible solution for windows users:
Important: Save as demo.hta to run on windows as an app
<!DOCTYPE html>
<html> <!-- some parts lifted from
http://msdn.microsoft.com/en-us/library/ms536496(v=vs.85).aspx
http://msdn.microsoft.com/en-us/library/ms536473(v=vs.85).aspx
-->
<head>
<title>State Saving Demo</title>
<hta:application id="App"
application="yes"
applicationname="demo"
icon="calc.exe"
border="thin"
caption="yes"
sysmenu="yes"
showintaskbar="yes"
singleinstance="yes"
sysmenu="no"
maximizeButton="yes"
minimizeButton="yes"
navigable="no"
scroll="yes"
contextmenu="no"
selection="no"
windowstate="normal" >
<!-- Use Internet Explorer 10 Standards mode (to use JSON, CSS3, etc...) -->
<meta http-equiv="x-ua-compatible" content="IE=10">
</head>
<body onload=loadMe() >
<h1 id=h1>Command-line args: </h1>
<h3>Persisted Text</h3>
<textarea rows=20 cols=100 id=mydata onchange=saveMe() >
You can change me and i won't forget!
</textarea>
<script>
document.title+=" - Today is " + Date(); // task/title bar demo
h1.innerHTML+= JSON.stringify( App.commandLine ); // optional invocation info here (much like a real app)
// app-specific custom code:
FILENAME="state.txt";
function saveMe(){save(FILENAME, mydata.value); }
function loadMe(){mydata.value=load(FILENAME) || mydata.value;}
// generic utils:
function load(filename) { //IE FSO file Loader
var file,
text="",
fso= new ActiveXObject('Scripting.FileSystemObject');
try{
file = fso.OpenTextFile(filename, 1, false);
text = file.readAll();
file.Close();
}catch(y){}
return text;
}
function save(filename, sData){ //IE FSO file Saver
var file,
fso = new ActiveXObject('Scripting.FileSystemObject');
file = fso.CreateTextFile(filename, 2, false);
file.write(sData);
file.Close();
return file;
}
</script>
</body>
</html>
I recently re-discovered HTAs, and they are not half bad. I don't think I would want to distribute and maintain them, but HTA's are an easy way to make simple desktop app using HTML, CSS, and JS. Its nice not to have to build anything to "recompile" the app after changes are made. saves a few steps compared to node-webkit, packaged apps, air, cordova, etc, but HTA's have a major downside: they only work on windows afaik...
Looks to me like you can use LocalStorage, the big question is how are you trying to store it? You can easily store an object/array into LocalStorage, and that object/array can be your data, then JS can output this into a table. If you're looking to store actual files then you're looking at something more like an ActiveX plugin.
http://caniuse.com/#search=localstorage
Alternatively if you have internet access through a desktop or a phone you can put this on Google Drive. This would be far easier than reinventing the wheel.
I have an app wich is an index.php file with javascript and when the user is logged in the javascript loads the content of the page which is stored in content.php
(k, I've figured out that it works in safari if the user has allowed popups. I get the same error with firefox. So can popup windows be the enemy? How can i rewrite this to ton use popups?)
Index.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My app</title>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script src="js/jquery.validationEngine.js"></script>
<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<script src="js/functions.js"></script>
</body>
</html>
functions.js:
FB.init({
appId : '123456789',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.login(function(response) {
if (response.session) {
if (response.perms) {
$.get("content.php", {get: "form"}, function(data){
$('body').append(data);
});
} else {
top.location.href="http://example.com";
}
} else {
top.location.href="http://www.example.com";
}
}, {perms:'publish_stream'});
It works in Firefox and Internet Explorer but in Chrome, Safari and Opera it doesn't.
I got this error in Chrome with the javascript debug:
Unsafe JavaScript attempt to access frame with URL https://www.facebook.com/login.php?api_key=123456789&skip_api_login=1&display=popup&cancel_url=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D0%23cb%3Df13bcfbe1%26origin%3Dhttp%253A%252F%252Fexample.com%252Ff1fd4b982c%26relation%3Dopener%26transport%3Dpostmessage%26frame%3Df206b2144c%26result%3D%2522xxRESULTTOKENxx%2522&fbconnect=0&next=https%3A%2F%2Fwww.facebook.com%2Fdialog%2Fpermissions.request%3F_path%3Dpermissions.request%26app_id%3D152123456789%26redirect_uri%3Dhttp%253A%252F%252Fstatic.ak.fbcdn.net%252Fconnect%252Fxd_proxy.php%253Fversion%253D0%2523cb%253Df13bcfbe1%2526origin%253Dhttp%25253A%25252F%25252Fexample.com%25252Ff1fd4b982c%2526relation%253Dopener%2526transport%253Dpostmessage%2526frame%253Df206b2144c%2526result%253D%252522xxRESULTTOKENxx%252522%26sdk%3Djoey%26display%3Dpopup%26api_key%3D123456789%26fbconnect%3D0%26locale%3Den_US%26method%3Dpermissions.request%26perms%3Dpublish_stream%26return_session%3D1%26session_version%3D3%26from_login%3D1&rcount=1 from frame with URL http://example.com/myfacebookapp/. Domains, protocols and ports must match.
In Opera it gets stuck on a popup window (popup allowed) with this url:
http://static.ak.fbcdn.net/connect/xd_proxy.php?version=0#cb=f5132b51b60fbe&origin=http%3A%2F%2Fexample.com%2Ff10a57ba8d445c&relation=opener&transport=flash&frame=f19023256ffd8&result=%7B%22perms%22%3A%22publish_stream%22%2C%22selected_profiles%22%3A1245738876%2C%22session%22%3A%22%7B%5C%22session_key%5C%22%3A%5C%222.buXjHddfcr_xKQHVeu_FXw__.3600.1299679200-1245738876%5C%22%2C%5C%22uid%5C%22%3A%5C%221245738876%5C%22%2C%5C%22expires%5C%22%3A1299679200%2C%5C%22secret%5C%22%3A%5C%22glwIAcpeG0HDT__0z1QI3g__%5C%22%2C%5C%22access_token%5C%22%3A%5C%22152384968151443%7C2.buXjHdcfcr_xKQHVeu_FXw__.3600.1299679100-1245738876%7CdyZCE5trqgMkU0HSzSorX3jqbIs%5C%22%2C%5C%22sig%5C%22%3A%5C%228724dd80df9f16e7c3a2ce1b06f8d1e1%5C%22%7D%22%7D
So my question is: How can I get this to work in all browsers (Firefox, IE, Chrome & safari preferably)?
(edit: I have changed the urls and removed codes and urls to my app)
I also had a similarly bad experience with the popups. Eventually I moved away from the client flow model you are using, to the server flow model, where the server does the redirecting.
(I never followed this through with Javascript, but what I can see in the docs, there does not seem to be an option to turn off the popup. http://developers.facebook.com/docs/reference/javascript/fb.login/)
I can't provide you with a php example, as my stuff is in .NET but I think it should work in a similar way for you:
Create a link to your FB login page: e.g. FBLogin.php
This page then uses a library (facebook php sdk?) to help create the login url for facebook with a return url (e.g. FBAuthorize.php) to your site. You will then be redirected to the facebooke login url.
After successfully authentication on FB, you will be sent back the FBAuthorize.php page, where the magic token exchanging should be handled by the library.
No popup, no javascript.