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:
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 - .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* e first in the head; any other head content must e *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>Contemplating Tech</title>
<!-- Bootstrap core CSS -->
<link href=".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=".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 e 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="">GitHub</a></li>
<li><a href="">Twitter</a></li>
</ol>
</div>
</div><!-- /.blog-sidebar -->
</div><!-- /.row -->
</div><!-- /.container -->
<footer class="blog-footer">
<p>Blog template built for <a href="">Bootstrap</a> by <a href="">@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=".11.3/jquery.min.js"></script> -->
<!-- <script src=".3.5/js/bootstrap.min.js"></script> -->
</body>
</html>
Any and all help or suggestions are appreciated!
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
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/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* e first in the head; any other head content must e *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>Contemplating Tech</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn./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./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 e 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./LottaJavaMike">GitHub</a></li>
<li><a href="https://twitter./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.">Bootstrap</a> by <a href="https://twitter./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./ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
<!-- <script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script> -->
</body>
</html>
Any and all help or suggestions are appreciated!
Share Improve this question asked Mar 6, 2016 at 14:33 MikeSheaMikeShea 31 gold badge1 silver badge4 bronze badges 1- The way your jQuery link is now, there should be a js folder that is a sub-folder of the ROOT of your site, which may not be the same location as the HTML folder on your server. Remove the leading / and make sure that there is a js sub-folder of the folder that contains the HTML file. – Scott Marcus Commented Mar 6, 2016 at 14:38
1 Answer
Reset to default 2When I look at your page and navigate to the location specified in your source code (http://mike.shea.sdf/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 ment, 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.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744345308a4569646.html
评论列表（0条）