CODEWITHSUNDEEP
javascriptjqueryhtml
MikeShea
MikeShea

Reputation: 3

JQuery - HTTP 404 NOT FOUND - The server has not found anything matching the requested URI

I'm working on teaching myself front-end dev, and ran into an issue with getting jquery to work. I have all my site posted here: http://mike.shea.sdf.org

What should happen is between the header and the nav buttons, there should be blog postings. The entries are hand coded into the postBuilder.js file which (along with helper.js and the jquery lib) should generate the HTML to display the posts.

It has the following structure: 

html  
  index.html  
  blog.css  
js  
  jquery-2.2.1.min.js  
  helper.js  
  postBuilder.js

I have read/exe rights on everything.

All is fine when tested locally on my own machine, but when posted up to the server I get this on the console:

HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
GET - http://mike.shea.sdf.org/js/jQuery-2.2.1.min.js

If I put everything under the root html folder, it works. I'm reasonably sure that i have the relative paths typed in correctly. Again, locally the files have the same structure and they work. If you look at the source, you'll see that I tried more than one jQuery lib file and tried putting it in the root html folder as well. I'm really not sure what to look at next. Here is the html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Contemplating Tech</title>

    <!-- Bootstrap core CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles-->
    <link href="blog.css" rel="stylesheet">

    <script src="/js/jQuery-2.2.1.min.js"></script>
    <!-- <script src="./jQuery-2.2.1.min.js"></script> -->
    <!-- <script src="https://code.jquery.com/jquery-2.2.1.js></script> -->
    <script src="/js/helper.js"></script>
  </head>

  <body>

    <div class="blog-masthead">
      <div class="container">
        <nav class="blog-nav">
          <a class="blog-nav-item active" href="#">Home</a>
          <a class="blog-nav-item" href="#">New features</a>
          <a class="blog-nav-item" href="#">About</a>
        </nav>
      </div>
    </div>

    <div class="container">

      <div class="blog-header">
        <h1 class="blog-title">Contemplating Tech</h1>
        <p class="lead blog-description">Personal musings about technology, web development and whatever else I come across.</p>
      </div>

      <div class="row">

        <div id="posts" class="col-sm-8 blog-main">
          <script src="/js/postBuilder.js"></script>

          <nav>
            <ul class="pager">
              <li><a href="#">Previous</a></li>
              <li><a href="#">Next</a></li>
            </ul>
          </nav>

        </div><!-- /.blog-main -->

        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
          <div class="sidebar-module sidebar-module-inset">
            <h4>About</h4>
            <p>Mike has been involved with desktop support in one manner or another for 20+ years. This will be both a personal blog and a sandbox as he works on improving his front end web development skill set.</p>
          </div>
          <div class="sidebar-module">
            <h4>Archives</h4>
            <p>When I get a little better at getting posts in here and finding how to create an archive, I'll populate a list here.</p>
            <!--<ol class="list-unstyled">
              <li><a href="#">March 2014</a></li>
              <li><a href="#">February 2014</a></li>
              <li><a href="#">January 2014</a></li>
              <li><a href="#">December 2013</a></li>
              <li><a href="#">November 2013</a></li>
              <li><a href="#">October 2013</a></li>
              <li><a href="#">September 2013</a></li>
              <li><a href="#">August 2013</a></li>
              <li><a href="#">July 2013</a></li>
              <li><a href="#">June 2013</a></li>
              <li><a href="#">May 2013</a></li>
              <li><a href="#">April 2013</a></li>
            </ol>-->
          </div>
          <div class="sidebar-module">
          </div>
          <div class="sidebar-module">
            <h4>Elsewhere</h4>
            <ol class="list-unstyled">
              <li><a href="http://github.com/LottaJavaMike">GitHub</a></li>
              <li><a href="https://twitter.com/ContemplateTech">Twitter</a></li>
            </ol>
          </div>
        </div><!-- /.blog-sidebar -->

      </div><!-- /.row -->

    </div><!-- /.container -->

    <footer class="blog-footer">
      <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
      <p>
        <a href="#">Back to top</a>
      </p>
    </footer>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
    <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> -->

  </body>
</html>

Any and all help or suggestions are appreciated!

Upvotes: 0

Views: 19008

Answers (1)

Scott Marcus
Scott Marcus

Reputation: 65825

When I look at your page and navigate to the location specified in your source code (http://mike.shea.sdf.org/js/jQuery-2.2.1.min.js), I too get the 404 error.

Now, I can navigate to your helper.js file, which seems to have the same path, so you need to triple check the naming of the jQuery file.

Also, (as an aside) and as I mentioned in my comment, you have a leading forward-slash in your link (/) to the jQuery file. This means that the js folder is a sub-folder of the root of your server, which may not be the same as a sub-folder of your HTML folder that you talk about. Remove the forward-slash from the link and make sure that the js folder is a child of the folder where the HTML file is.

Upvotes: 2

Related Questions