Jquery ajax is giving me a 404 not found error - javascript

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!

Related

Google Appscript WebApp Refresh

Does anyone know of an effective way of triggering a window refresh for a deployed Google Appscript Web Application using Javascript?
I've searched and tested variations of window.location.href = window.location.href, window.reload(true), etc.
Nothing seems to work.
The only work-around that I've found is creating a hidden web-address link and using the .click() command to navigate to the same page (i.e. refresh), but lately, this is causing issues, especially because I now have to keep track of different link addresses.
Does anyone have a better alternative to this?
HTML:
<html>
<head>
<title>Finance Mileage Entry</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<base target="_top">
<?!= include("page-css");?>
<a id="refreshLink" href="<?= ScriptApp.getService().getUrl() ?>?v=home" style="display:none"></a>
JS:
function refresh(){
var link = document.getElementById("refreshLink")
link.click();
};
In order to refresh the Web App, you can just use Window.open(url, windowName), like this:
window.open("https://script.google.com/macros/s/{your-webapp-id}/exec", "_top");
Update:
You could also retrieve the script URL via ScriptApp.getService().getUrl(), instead of writing it yourself. To do that, you would have to retrieve this information from the server-side (you cannot access classes like ScriptApp from the client-side). You have to use google.script.run to execute server-side functions from the client-side:
function retrieveUrl() {
google.script.run.withSuccessHandler(refresh).getUrl();
}
This way, retrieveUrl will execute a function called getUrl from your server code (.gs), which could be something like this:
function getUrl() {
return ScriptApp.getService().getUrl();
}
Finally, when getUrl returns successfully, the success handler will execute a client-side function called refresh (and its return value –the script URL– will be passed as a parameter):
function refresh(scriptUrl) {
window.open(scriptUrl, "_top");
}
Reference:
Window.open

PouchDB IE11 using file://

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.

Does anyone actually know how to fix these errors?

Does anyone know how to deal with these erros? I'm new to Javascript and I'm currently trying to learn some api stuff for esri. I honestly don't understand what these errors mean or how to go about fixing them. Here are the errors:
XMLHttpRequest cannot load file://www.arcgis.com/sharing/rest/content/items/b3c3566f3e1c4b6b8035185fba217f54?f=json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
q {message: "Unable to load file://www.arcgis.com/sharing/rest/…b3c3566f3e1c4b6b8035185fba217f54?f=json status: 0", response: Object, status: 0, responseText: "", xhr: XMLHttpRequest…}
Here is the code that made them.
<!doctype html>
<html>
<head>
<title>Create a Web Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.14/esri/css/esri.css">
<style>
html, body, #mapDiv, .map.container{
padding: 0;
margin: 0;
height: 100%;
}
</style>
<script>var dojoConfig = { parseOnLoad:true };</script>
<!--<script> Access-Control-Allow-Origin: null </script> perhaps this could be part of a solution-->
<script src="http://js.arcgis.com/3.14compact/"></script>
<script>
var map;
require([
"esri/map",
"esri/arcgis/utils",
"dojo/domReady!"
], function(Map, arcgisUtils){
arcgisUtils.createMap( "b3c3566f3e1c4b6b8035185fba217f54", "mapDiv").then(function (response) {
map = response.map;
});
});
</script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>
Any help would be great. I have to say I am completely lost at this point.
Look at the URL:
file://www.arcgis.com/.....
AJAX doesn't work on the file system. (Nor is that likely to be a valid file system path anyway, it looks like it should be a website.) It works on web servers.
Presumably you're opening this HTML file directly from your file system. Instead, host it on a web server (which can be your local computer) and open it through HTTP.
There may yet be other concerns regarding your AJAX requests. Perhaps you're not specifying the URL correctly (there isn't a complete enough example here to know for certain), or perhaps even once you're making a request to a web server it may be a cross-domain request. We can't really know. But at the very least, this has to run on a web server.

Update application cache

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.

Getting 404 for an external Javascript file in HTML on XAMPP

This is my first post on Stackoverflow. Please guide if I miss something.
I'm trying to do HTML5 development with external javascript file and testing the same on XAMPP 3.2.1 server.
I have stored "HF_Chapter10_WebWorkers_Example1" in "C:\xampp\htdocs" of XAMPP installation and the Javascript file "manager.js" is also residing in the same folder. The 'manager.js' internally creates a worker thread and invokes the same.
Issue: When I'm opening the HTML file in Google Chrome, I see 404 (in Dev chrome tools) stating the server can't find the external Javascript file referenced. Also, I see that the server is load the javascript file as 'text/HTML' instead of 'text/javascript'. I have tried appending type='text/javascript' in the call to the javascript but that didn't help either.
I'm trying to understand the reason of this issue.
This is what goes into the HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Wed, 08 Jan 2014 05:07:11 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>HF_Chapter10_WebWork_Example1</title>
<LINK REL="stylesheet" HREF="theme.css" TYPE="text/css">
<script type="text/javascript" src="manager.js"> </script>
</head>
<body>
<p id="output"> ![enter image description here][1]</p>
</body>
</html>
This is what goes into the javascript file 'manager.js'
window.onload = function() {
//create the worker thread
var worker = new Worker("worker.js");
//send the message to the worker thread
worker.postMessage("ping");
//create an event listener to act on the messages arriving from the worker thread
worker.onmessage = function(event) {
var message = "Worker says" + event.data;
document.getElementById("p").innerhHTML = message;
}
}
This is what goes into the worker.js file:
onmessage = pingPong;
function pingPong(event) {
//based on the type of data, respond back with the 'postMessage'.
//Note that the message will go to the main javascript handler
if (event.data == "ping") {
postMessage("pong");
}
}
not clear what generates the 404 but this might help you
http://w3-video.com/Web_Tools/XAMPP/xampp_example_htdocs.html
I am attaching the image of the folder structure.

Categories