CODEWITHSUNDEEP
javascriptjqueryajax
DJ Burb
DJ Burb

Reputation: 2364

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?

Upvotes: 4

Views: 6936

Answers (3)

DJ Burb
DJ Burb

Reputation: 2364

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

Upvotes: 1

Stephen Black
Stephen Black

Reputation: 1

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!

Upvotes: 0

Michael Horta Fleitas
Michael Horta Fleitas

Reputation: 101

You must create the directory assets/photos/7thAnnual/. Be sure you did that

Upvotes: 0

Related Questions