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.
Related
In head tag, I have these scripts
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="js/jquery-migrate-3.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-min.js" type="text/javascript"></script> //jquery-ui-1.13.2
<script src="js/scrollpane.js?v=<!--{$smarty.const.BUILDTIME}-->" type="text/javascript"></script>
<script src="js/bulk-import.js?v=<!--{$smarty.const.BUILDTIME}-->" type="text/javascript"></script>
<script src="js/copypaste.js?v=<!--{$smarty.const.BUILDTIME}-->" type="text/javascript"></script>
<script src="js/main.js?v=<!--{$smarty.const.BUILDTIME}-->" type="text/javascript"></script>
<script src="js/menubar.js?v=<!--{$smarty.const.BUILDTIME}-->" type="text/javascript"></script>
There were many errors, I minimized it to 3 now. removed jquery-ui-1.13.2 normal script and added minified. It reduced looping. Also removed tooltip js, also added setTimeout() to load jquery properly. But still facing these issues.
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 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.)
I am trying to run some JQuery in my website using bootstrap that is carousel slide and lightbox for gallery album but both of them do not work...
I have tried to apply noConlict() many times but it still doesn't work.
Here the scripts I have
<script src="js/jquery.js"></script>
<script src="js/prototype.js"></script>
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script> window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript" charset="utf-8">
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
var jq-$.noConflict();
jq(document).ready(function(){
jq('#mySlide1').carousel({
interval:3000
});
jq('#mySlide1').carousel('cycle');
jq("[rel^='lightbox']").prettyPhoto();
});
</script>
Replace all your current code with this:
<script src="js/prototype.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/main.js"></script>
// and the Google analytics script
You just need one version of jQuery here. I'd suggest you to use CDN link from Google for your jQuery
you have like 4 instances of jquery on the page!! just use one instance!!
<script src="js/jquery.js"></script>
<script src="js/prototype.js"></script>
<script src="js/bootstrap.min.js"></script>