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>
Related
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
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.
Ok so I am trying to load sb-admin-2 and the menu is not collapsing, I browsed for some solutions and none of them work for me, also as you can see the data-table is not working too and my tags looks like this:
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/bootstrap.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular-ui-router.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular-animate.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular-messages.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular-ui-validate.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/angular-cookies.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/ng-file-upload-shim.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/ng-file-upload.min.js"></script>
<!--SB ADMIN FILES-->
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/metisMenu.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/dataTables.responsive.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}/static/lib/sb-admin-2.min.js"></script>
can you help me out guys.
ps: I am loading sb-admin through angularjs and django
gentos - i had a similar issue (sidebar not collapsing) and it turned out that i had overlapping jquery's. Once i removed the calls to both jquery and jquery.min files and just used a jquery link:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
collapsible sidebar returned. I also reordered jquery and put the above link at the top of my HTML file (above bootstrap, metisMenu, etc.)
So I recently transfered over my files from one server to another. For some reason on the new
server I am getting odd errors in chrome under the network tab such as:
Uncaught ReferenceError: jQuery is not defined
Uncaught ReferenceError: autoResize is not defined
Some pages even stopped working!
I was messing around with the order of my script links.
Here is my current order:
<script type="text/javascript" src="assets/assetsz/js/modernizr.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery.cookie.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/flot/jquery.flot.resize.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/responsive-tables.js"></script>
<script type="text/javascript" src="assets/assetsz/js/custom.js"></script>
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<script type="text/javascript" src="assets/assetsz/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/page-manager.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<script src='https://coinbase.com/assets/button.js' type='text/javascript'></script>
How should I order this and is there any way to make it so the order doesnt matter?
Thanks I have no idea what to search for this so I am stuck.
EDIT: New order. Less errors. http://prntscr.com/3y98gt
<!---JQuery/Javascript-->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/modernizr.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery.cookie.js"></script>
<script type="text/javascript" src="assets/assetsz/js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/flot/jquery.flot.resize.min.js"></script>
<script type="text/javascript" src="assets/assetsz/js/responsive-tables.js"></script>
<script type="text/javascript" src="assets/assetsz/js/custom.js"></script>
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<script type="text/javascript" src="js/page-manager.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<script src='https://coinbase.com/assets/button.js' type='text/javascript'></script>
1rst place: JQuery
2nd place: JQuery Migrate
3rd place: JQuery UI
4th place: Bootstrap
Order of the rests are less important, but pay attention to don't call function before is loading by the script tag, eso
Another advice: separate CSS and JS files. It's a bad idea to mix everything.
Pay also attention: for performance reason, it's better to load JS at the end of the page. But CSS have to take place in the head section.
For starters, every script which uses jQuery should be loaded after your jQuery include. So, putting jquery-1.11.1.min.js on top should be a quick fix.