Jquery ajax is giving me a 404 not found error

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?

Jquery ajax is giving me a 404 not found error

3 Answers