jsp dont load css and scripts after deploy - javascript

I am trying to deploy a java jsp application, but the view not charge .css and .js files, as I can fix this?
the file structure is as follows:
-Project
-META-INF
-WEB_INF
-resources
-CSS
-scripts
-administracion
-control
-inicio

Your could add lines given below:
<script type="text/javascript" src="resources/scripts/your_js_file.js"></script>
<link rel="stylesheet" type="text/css" href="resources/CSS/style.css" />

Add this line in your jsp
<script type="text/javascript" src="scripts/your_js_file.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
scripts and css are folders outsideWEB-INF and contains .js files and .css files respectively

logically he called .css and .js files from the JSP.
when I'm editing the project work perfectly, but do not load the deployment
<link href="../resources/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="../resources/css/colors.css" rel="stylesheet" type="text/css"/>
<script src="../resources/scripts/jquery.js" type="text/javascript"></script>
<script src="../resources/scripts/bootstrap.js" type="text/javascript"></script>

Related

Script and css linking

when my index at here
the script url was
<link rel="stylesheet" type="text/css" href="../jquery.fullPage.css" />
<script type="text/javascript" src="../jquery.fullPage.js"></script>
when i move the index file to front folder > untitled 3
which is here
and the url change to
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script type="text/javascript" src="jquery.fullPage.js"></script>
but it dint work.
Even the link use browse and select the script file and url given by the system
help~
is that any setting need to change

Using a HTML5 Theme in Angular 2

I am wondering how can i set up my current Theme that is designed using bootstrap and some css and js
I am using following css and js files in my theme and i don't want to put it in index.html like we did in angular 1 can any one tell me how to import all css and js effectively without compromising Angular 2 structure and behaviour.
<link href="assets/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/bootstrap-select2/select2.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/switchery/css/switchery.min.css" rel="stylesheet" type="text/css" media="screen" />
<link href="theme/css/theme-icons.css" rel="stylesheet" type="text/css">
<link class="main-stylesheet" href="theme/css/theme.css" rel="stylesheet" type="text/css" />
<link href="theme/css/style.css" rel="stylesheet" type="text/css" />
Js files
<script src="assets/plugins/pace/pace.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/modernizr.custom.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="assets/plugins/boostrapv3/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery/jquery-easy.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-unveil/jquery.unveil.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-bez/jquery.bez.min.js"></script>
<script src="assets/plugins/jquery-ios-list/jquery.ioslist.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-actual/jquery.actual.min.js"></script>
<script src="assets/plugins/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap-select2/select2.min.js"></script>
<script type="text/javascript" src="assets/plugins/classie/classie.js"></script>
<script src="assets/plugins/switchery/js/switchery.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
I tried using ng2-bootstrap and bootstrap but can not get it working.
Your problem is your loading straight bootstrap along with jquery plugins instead of a something like angular-ui-bootstrap. Some boostrap stuff uses pure CSS(no compatibility issues) and others use jquery/ which can work iffy with Angular1/2 sometimes hence projects like angular-ui-bootstrap.
try the angular 2 version https://ng-bootstrap.github.io/
then load all the css files using webpack(just putting in the same css folder the current project css files are). Obviously you would need to change the existing bootstrap javascript code to angular-ui directives.

how to call css and js files in webview?

I have one local html page in my android app.
in html page i call css and js files but when i run app , only context loaded and css and js don't load
I import css and js folders to android_assets/images/css nad android_assets/images/js
and i call css and js in html page like this:
<link href="./android_asset/images/css/bootstrap.min.css" rel="stylesheet" />
<link href="./android_asset/images/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="./android_asset/images/css/touchnswipe.min.css" rel="stylesheet" />
<link href="./android_asset/images/css/responsive.css" rel="stylesheet" />
<script src="./android_asset/images/js/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="./android_asset/images/js/bootstrap.min.js" type="text/javascript"></script>
<script src="./android_asset/images/js/modernizr.custom.js" type="text/javascript"></script>
<script src="./android_asset/images/js/jquery.mousewheel.min.js"></script>
<script src="./android_asset/images/js/jquery.hammer.min.js" type="text/javascript"></script>
<script src="./android_asset/images/js/TweenMax.min.js" type="text/javascript"></script>
<script src="./android_asset/images/js/responsive_example.min.js" type="text/javascript"></script>
And in Sites.java onCreate section i write this code:
WebView wbSites =(WebView)findViewById(R.id.wbSites);
// wbSites.setWebChromeClient(new WebChromeClient());
// wbSites.setWebViewClient(new WebViewClient());
wbSites.getSettings().setJavaScriptEnabled(true);
wbSites.loadUrl("file:///android_asset/images/sites.html");
Tip: htmlpage named sites.html and pasted in android_asset/images path
but still don't load js and css files.
pls help me
Have you tried including the file:// prefixes to all the resources you want to load?
i solve it
i most write address like this
<script src="./js/modernizr.custom.js" type="text/javascript"></script>
. Refers to local root => /android_asset/images/

grails: Href and Src to Subfolder not working

i have the files inside the folder lib\Responsive
How to link this inside the GSP file?
i have used the following code but its not working:
<script type="text/javascript" src="/lib/Responsive/Responsive.min.js"></script>
<link rel="stylesheet" href="/css/tablestyle.css"/>
i hope it should be from static folder how to refer ?
<link rel="stylesheet" href="${resource(dir:'css',file:'tablestyle.css')}" />
If css file under wep-app/css/tablestyle.css
.

Adding bootstrap in HTML

I'm going to use bootstrap to build up my front end. Also I'm using JSP and JSTL
What I've read in some articles over the internet is the proper approach of adding an external javascript file should be written before the body closing tag for more optimization of the page. Now I'm trying to apply this with the bootstrap, what i did is put the css of the bootstrap to an external html file:
import_header.html:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="bootstrap-css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap-css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="bootstrap-css/bootstrap-responsive.min.css">
which I imported to the head of the html like this:
<jsp:include page="import_header.html" flush="true" />
Now I want to do the same thing with the js file of the of the bootstrap and the jQuery lib but I don't know what is the proper way of doing this.
that's the recommended way, how to place them:
e.g. footer.html
<!-- Placed at the end of the document so the pages load faster -->
<script src="jquery/jquery-2.0.3.min.js"></script>
<script src="bootstrap/bootstrap-2.3.1.min.js"></script>
<script src="myOwn.js"></script>
</body>
</html>

Categories