i recently coded a site, it worked fine. When i moved it to another folder the js files are not loading here is the code:
<script src="https://example.com/js/jquery.js"></script>
<script src="https://example.com/js/jquery-1.8.3.min.js"></script>
<script src="https://example.com/js/bootstrap.min.js"></script>
<script src="https://example.com/js/jquery.scrollTo.min.js"></script>
<script src="https://example.com/js/jquery.nicescroll.js" type="text/javascript"></script>
<script src="https://example.com/js/jquery.customSelect.min.js"></script>
<script src="https://example.com/js/respond.min.js"></script>
<script class="include" type="text/javascript" src="https://example.com/js/jquery.dcjqaccordion.2.7.js"></script>
<!--common script for all pages-->
<script src="https://example.com/js/common-scripts.js"></script>
in my network tab this comes up :
My file perms are all 777
Related
I recently updated to rails 6.0.2 everything works fine but as i was creating a new project i fined that the javascript folder has been moved from assest pipeline to the app folder. Am using a theme to create a simple one page site everything works fine except the javascript. I have placed all my javascripts file app/javascripts/packs and here is how am calling it on my homepage.
<script type="text/javascript" src="/javascript/jquery.min.js"></script>
<script type="text/javascript" src="/javascript/jquery-migrate.min.js"></script>
<script type="text/javascript" src="/javascript/bootstrap.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="/javascript/snap.min.js"></script>
<script type="text/javascript" src="/javascript/owl.carousel.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="/javascript/jquery.prettyPhoto.init.min.js"></script>
<script type="text/javascript" src="/javascript/jQuery.headroom.min.js"></script>
<script type="text/javascript" src="/javascript/headroom.min.js"></script>
<script type="text/javascript" src="/javascript/script.js"></script>
<script type="text/javascript" src="/javascript/revolution.extension.video.min.js"></script>
<script type="text/javascript" src="/javascript/revolution.extension.slideanims.min.js"></script>
<script type="text/javascript" src="/javascript/revolution.extension.actions.min.js"></script>
<script type="text/javascript" src="/javascript/revolution.extension.layeranimation.min.js"></script>
<script type="text/javascript" src="/javascript/revolution.extension.kenburn.min.js"></script>
<script type="text/javascript" src="/javascript/revolution.extension.navigation.min.js"></script>
<script type="text/javascript" src="/javascript/revolution.extension.migration.min.js"></script>
<script type="text/javascript" src="/javascript/revolution.extension.parallax.min.js"></script>
here is my application.js
console.log('Hello World from Webpacker')
require("packs/bootstrap")
require("packs/headroom")
require("packs/jquery-migrate")
require("packs/jQuery.headroom")
require("packs/jquery")
require("packs/jquery.prettyPhoto.init")
require("packs/jquery.prettyPhoto")
require("packs/jquery.themepunch.revolution")
require("packs/jquery.themepunch.tools")
require("packs/owl.carousel")
require("packs/revolution.extension.actions")
require("packs/revolution.extension.kenburn")
require("packs/revolution.extension.layeranimation")
require("packs/revolution.extension.migration")
require("packs/revolution.extension.navigation")
require("packs/revolution.extension.parallax")
require("packs/revolution.extension.slideanims")
require("packs/revolution.extension.video")
but i still get
ActionController::RoutingError (No route matches [GET] "/javascript/revolution.extension.parallax.min.js"):
if you have loaded all your js in application.js . Shouldn't it be sufficient to call
<%= yield :javascript %>
in application.html.erb.
Another way you can place your js files in public/js/packs directory and access those file like
<script src="/js/packs/jquery.prettyPhoto.init"></script>
I am giving the JavaScript file path perfectly in master page of asp.net but then also in browser console showing the error of status 404 in JavaScript path i.e. in short the browser not getting the path of the JavaScript file.
Here is my code:
<script type="text/javascript" src="index/analytics.js"></script>
<script type="text/javascript" src="index/modernizr.js"></script>
<script type="text/javascript" src="index/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="index/jquery.dlmenu.js"></script>
<script type="text/javascript" src="index/waypoints.min.js"></script>
<script type="text/javascript" src="index/jquery.counterup.min.js"></script>
<script type="text/javascript" src="index/owl.carousel.js"></script>
<script type="text/javascript" src="index/viewportchecker.js"></script>
<script type="text/javascript" src="index/bootstrap.min.js"></script>
<script type="text/javascript" src="index/transit.js"></script>
<script type="text/javascript" src="index/jquery.simpleslider.js"></script>
<script type="text/javascript" src="index/backstretch.js"></script>
<script type="text/javascript" src="index/custom.js"></script>
<script type="text/javascript" src="index/jquery.flexisel.js"></script>
<script type="text/javascript" src="index/classie.js"></script>
Now this JS file is in index folder only, but then also I really confused that why browser console showing this type of error that status:
404 javascript file not found.
Image:
You might try using something like the ResolveUrl() method to reference your jQuery library to ensure that it is targeting the proper location :
<script src="<%= ResolveUrl("~/index/jquery-1.10.1.min.js") %>" type="text/javascript"></script>
I am having some problems with multiple js files. When I tried adding the lightgallery plugin to a page I noticed it didn't work for some reason. After a long while I found out it was because of bootstrap.js , when I remove it the lightgallery works, but now my fixed menu stops working.
So depending on what file I comment out, different things start and stop working. I would like that everything works with both files.
My list of js files:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="js/jquery.matchHeight-min.js"></script>
<script type="text/javascript" src="js/appear.js"></script>
<script type="text/javascript" src="js/featherlight.min.js"></script>
<script type="text/javascript" src="js/jquery.shuffle.modernizr.min.js"></script>
<script type="text/javascript" src="js/spsimpleportfolio.js"></script>
<script type="text/javascript" src="js/owl.carousel.js"></script>
<script type="text/javascript" src="js/rev-tool.js"></script>
<script type="text/javascript" src="js/revolation.js"></script>
<script type="text/javascript" src="js/count-down.js"></script>
<script type="text/javascript" src="js/parallex.js"></script>
<script src="js/lightgallery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
The errors I get in the console:
When I click on the first error it points to this part:
<script type="text/javascript">
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
</script>
I added my bootstrap.js file here.
I'm including datatables.js to my Liferay theme so it can be used for all the portlets in that theme. I have included it in the
portal_normal.vm
just above te end og the body tag like this
<script src="$theme_dir/js/jquery.min.js" type="text/javascript"></script>
<script src="$theme_dir/js/jquery-ui.custom.min.js" type="text/javascript"></script>
<script src="$theme_dir/js/bootstrap.min.js" type="text/javascript"></script>
<script src="$theme_dir/js/modernizr.min.js"></script>
<script src="$theme_dir/js/clndr.js"></script>
<script src="$theme_dir/js/moment.min.js"></script>
<script src="$theme_dir/js/es.js" type="text/javascript"></script>
<script src="$theme_dir/js/fullcalendar.min.js" type="text/javascript"></script>
<script src="$theme_dir/js/bootstrap-year-calendar.js" type="text/javascript"></script>
<script src="$theme_dir/js/bootstrap-year-calendar.es.js" type="text/javascript"></script>
<script src="$theme_dir/js/form-solicitud.js" type="text/javascript"></script>
<script src="$theme_dir/js/filterable.pack.min.js" type="text/javascript"></script>
<script src="$theme_dir/js/datatables.js" type="text/javascript"></script>
</body>
The problem is that the datatable.js seems to load correctly, but when I refresh the page with F5 it doesn't load the js.
I've tried to load the js also in the
portal_pop_up.vm
but it doesn't work at all.
I'm curious if it is possible to add the .js using in Google Chrome console, so the code is executed in between the list of loaded .js files.
As result, when the page is loaded, there are some .js files that are loaded from top to the bottom.
<script src="js1.js" type="text/javascript"></script>
<script src="js2.js" type="text/javascript"></script>
I want to load it in this order:
<script src="js1.js" type="text/javascript"></script>
<script src="js_from_console.js" type="text/javascript"></script>
<script src="js2.js" type="text/javascript"></script>
Is it possible?
Son ? Google is our best friend :). and here is your answer:
https://stackoverflow.com/a/19348/539075
Javascript files loaded in the head section should load sequentially and block until each has finished loading, so you can do
<html>
<head>
<script src="js1.js" type="text/javascript"></script>
<script src="js_from_console.js" type="text/javascript"></script>
<script src="js2.js" type="text/javascript"></script>
</head>
</html>
Is this what you are looking for?
Or you go with head.js
<script src="//cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js"></script>
<script>
head.load("js1.js", function() {
console.log("js1.js has loaded. js2.js loads after I have done my stuff now");
// do it
head.load("js2.js");
});
</script>