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!