Here is a snippet of the paths I am using:
<link rel="stylesheet" type="text/templates.css" href="../templates/css/superfish.css" th:href="#{../templates/css/superfish.css}"/>
<link rel="stylesheet" type="text/templates.css" href="../templates/css/style.css" th:href="#{../templates/css/style.css}"/>
<link rel="stylesheet" type="text/templates.css" href="../templates/css/nivo-slider.css" th:href="#{../templates/css/nivo-slider.css}"/>
<link rel="stylesheet" type="text/templates.css" href="../templates/css/jquery.qtip.min.css" th:href="#{../templates/css/jquery.qtip.min.css}"/>
<link rel="stylesheet" type="text/templates.css" href="../templates/css/jquery-ui.css" th:href="#{../templates/css/jquery-ui.css}"/>
<link rel="stylesheet" type="text/templates.css" href="../templates/css/jquery.fancybox.css" th:href="#{../templates/css/jquery.fancybox.css}"/>
<link rel="stylesheet" type="text/templates.css" href="../templates/css/jquery.fancybox-buttons.css" th:href="#{../templates/css/jquery.fancybox-buttons.css}"/>
Controller:
#RequestMapping(value="/", method= RequestMethod.GET)
public String contactForm(#Valid #ModelAttribute("contact") Contact contact, BindingResult bindingResult,
HttpServletRequest request, Model model, Device device) throws IOException {
System.out.println("Inside controller-----------------");
main method:
#SpringBootApplication
#ComponentScan("com.stidham")
public class StidhamFinancialApplication extends SpringBootServletInitializer {
#Override
protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
return application.sources(StidhamFinancialApplication.class);
}
public static void main(String[] args) {
SpringApplication.run(StidhamFinancialApplication.class, args
);
}
}
Only the html renders, no js or css. I have tried several ways and the path I currently have looks correct and even my IDE auto fills as I type in the path.
In the war file they are also in the correct place.
mvn clean install builds correctly, they're no dependency issues. This seems just like a simple path issue that is not working when deployed.
---------------Update 1---------------
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" type="text/css" href="/css/superfish.css" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/css/nivo-slider.css" />
<link rel="stylesheet" type="text/css" href="/css/jquery.qtip.min.css" />
<link rel="stylesheet" type="text/css" href="/css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="/css/jquery.fancybox.css" />
<link rel="stylesheet" type="text/css" href="/css/jquery.fancybox-buttons.css"/>
new paths
Still getting 404 for js and css:
The folder "templates" is only reserved for thymeleaf to process html. JavaScript and CSS should be in the folder "static". This folder is mapped directly to the root URL for http.
Example: File located in ... /resources/static/css/superfish.css
<link rel="stylesheet" href="/css/superfish.css" />
Related
i am using laravel and vuejs to develop single page application in my index.blade.php i am invoke app element vuejs
this is my index.blade.php
#extends('layout.header')
<div id="app" v-cloak v-on:shownav="shownavO()">
<nav_bar v-if="hide" :authType="authType" ></nav_bar>
<menuuu v-if="hide" :authType="authType" ></menuuu>
<router-view class="v-cloak--hidden"></router-view>
</div>
#extends('layout.footer')
<script src="{{asset('js/app.js')}}"></script>
in my layout.header it is a blade file i include css file
<!DOCTYPE html>
<html class="loading" lang="{{$lang}}" data-textdirection="{{$lang=='ar'?'rtl':'ltr'}}" id="app">
<!-- BEGIN: Head-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="description" content="Vuexy admin is super flexible, powerful, clean & modern responsive bootstrap 4 admin template with unlimited possibilities.">
<meta name="keywords" content="admin template, Vuexy admin template, dashboard template, flat admin template, responsive admin template, web app">
<meta name="author" content="PIXINVENT">
<title>munasbaty</title>
<link rel="apple-touch-icon" href="{{url('/')}}/app-assets/images/ico/apple-icon-120.png">
<link rel="shortcut icon" type="image/x-icon" href="{{url('/')}}/app-assets/images/ico/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600" rel="stylesheet">
<!-- BEGIN: Vendor CSS-->
#if(!isset($lang)||$lang=='en')
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/vendors.min.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/charts/apexcharts.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/extensions/tether-theme-arrows.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/extensions/tether.min.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/extensions/shepherd-theme-default.css">
<!-- END: Vendor CSS-->
<!-- BEGIN: Theme CSS-->
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/bootstrap-extended.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/colors.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/components.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/themes/dark-layout.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/themes/semi-dark-layout.css">
<!-- BEGIN: Page CSS-->
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/core/menu/menu-types/vertical-menu.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/core/colors/palette-gradient.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/pages/dashboard-analytics.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/pages/card-analytics.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/plugins/tour/tour.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/pages/card-analytics.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/pickers/pickadate/pickadate.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/assets/css/style.css">
#endif
</head>
<!-- END: Head-->
<!-- BEGIN: Body-->
<body>
when update the page or when open the project the application It appears this way in the beginning
I have implemented a print function that allow the user to print a portion of a page.
This is the code:
print(): void {
let printContents, popupWin;
printContents = document.getElementById('print-section').innerHTML;
popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<title>Print tab</title>
<meta charset="utf-8">
<title>MegaMark - Reporting App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media='print,screen' type='text/css' href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="./plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="./distAdminLte2/css/AdminLTE.min.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="./distAdminLte2/css/skins/_all-skins.min.css">
<link rel="stylesheet" media='print,screen' type="text/css" href="./node_modules/primeng/resources/themes/omega/theme.css" />
<link rel="stylesheet" media='print,screen' type="text/css" href="./node_modules/primeng/resources/primeng.min.css" />
<link rel="stylesheet" href="./css/style.css">
</head>
<body onload="window.print();">${printContents}</body>
</html>`
);
popupWin.document.close();
}
The function runs properly, It open a new window with the content properly rendered.
The problem is that when I save the content as PDF file using "Microsoft print to PDF" as printer or "PDF Creator" , the PDF is not applying all the css properly...
I don't know if it is an angular problem or css problem...
Thanks to support
I am trying to use jQuery UI in my MVC 5 project. But I continue to get this .resizable/Resizable is not a function. It is the same for all of jQueryUI functions.. It looks like it keeps trying to see if those function reside in jQuery 3.1.1 instead of jQueryUI?
What I am trying to achieve.
https://jsfiddle.net/vp1dwuv3/
Uncaught TypeError: $(...).resizeable() is not a function
at HTMLDocument.<anonymous> (<anonymous>:2:22)
at mightThrow (jquery-3.1.1.js:3570)
at process (jquery-3.1.1.js:3638)
This is the of my page when it loads.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overview</title>
<link href="/Content/bootstrap.css" rel="stylesheet" />
<link href="/Content/site.css" rel="stylesheet" />
<link href="/Content/themes/base/core.css" rel="stylesheet" />
<link href="/Content/themes/base/resizable.css" rel="stylesheet" />
<link href="/Content/themes/base/selectable.css" rel="stylesheet" />
<link href="/Content/themes/base/accordion.css" rel="stylesheet" />
<link href="/Content/themes/base/autocomplete.css" rel="stylesheet" />
<link href="/Content/themes/base/button.css" rel="stylesheet" />
<link href="/Content/themes/base/dialog.css" rel="stylesheet" />
<link href="/Content/themes/base/slider.css" rel="stylesheet" />
<link href="/Content/themes/base/tabs.css" rel="stylesheet" />
<link href="/Content/themes/base/datepicker.css" rel="stylesheet" />
<link href="/Content/themes/base/progressbar.css" rel="stylesheet" />
<link href="/Content/themes/base/theme.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.8.3.js"></script>
<script src="/Scripts/jquery-3.1.1.js"></script>
<script src="/Scripts/jquery-ui-1.12.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
</head>
It is the same for all of jQueryUI functions.. It looks like it keeps trying to see if those function reside in jQuery 3.1.1 instead of jQueryUI
It means that the jquery ui files are not getting loaded, and as discussed in comments
So check if the path is correct, or the filename is proper, or the file exists at the said path.
I have the follow code:
app.middleware('files', '/lib', loopback.static(path.normalize(__dirname + '/lib')));
But I am getting this error on cosole:
Failed to load resource: the server responded with a status of 404 (Not Found)
Any idea why? The location of my css files is correct and the file is there.
Thanks
I am trying to integrate Raneto with Loopback, if someone can give me a hand I would apretiate it.
Here my html code:
<!DOCTYPE html>
<html lang="{{config.locale}}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{#meta.title}}{{meta.title}} - {{/meta.title}}{{config.site_title}}</title>
{{#meta.description}}<meta name="description" content="{{meta.description}}">{{/meta.description}}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon", href="http://buildmetric.com/favicon.ico?v=2">
<link rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="{{config.base_url}}/lib/highlightjs/styles/solarized_light.css">
<link rel="stylesheet" href="{{config.base_url}}/styles/raneto.css">
<link rel="stylesheet" href="{{config.base_url}}/styles/ghostdown.css">
<link type="text/css" rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/animate.css" />
<link type="text/css" rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/hover.css" />
<link type="text/css" rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/style.css" />
{{{config.analytics}}}
</head>
<body class="{{body_class}}">
Full path:
http://localhost:5000/lib/bootstrap/dist/css/bootstrap.min.css
I've installed Grocery-Crud and it works! But there is no any css files were loaded on page. I have standard code grocery_crud gives to users, so this is what I see, when I want to see page's code:
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="http://localhost/grocery.ru/assets/grocery_crud/themes/datatables/css/demo_table_jui.css" />
<link type="text/css" rel="stylesheet" href="http://localhost/grocery.ru/assets/grocery_crud/css/ui/simple/jquery-ui-1.9.0.custom.min.css" />
<link type="text/css" rel="stylesheet" href="http://localhost/grocery.ru/assets/grocery_crud/themes/datatables/css/datatables.css" />
<link type="text/css" rel="stylesheet" href="http://localhost/grocery.ru/assets/grocery_crud/themes/datatables/css/jquery.dataTables.css" />
<link type="text/css" rel="stylesheet" href="http://localhost/grocery.ru/assets/grocery_crud/themes/datatables/extras/TableTools/media/css/TableTools.css" />
<link type="text/css" rel="stylesheet" href="http://localhost/grocery.ru/assets/grocery_crud/css/jquery_plugins/fancybox/jquery.fancybox.css" />
<script src="http://localhost/grocery.ru/assets/grocery_crud/js/jquery-1.8.2.min.js"></script>
<script src="http://localhost/grocery.ru/assets/grocery_crud/js/jquery_plugins/ui/jquery-ui-1.9.0.custom.min.js"></script>
<script src="http://localhost/grocery.ru/assets/grocery_crud/themes/datatables/js/jquery.dataTables.min.js"></script>
<script src="http://localhost/grocery.ru/assets/grocery_crud/themes/datatables/js/datatables-extras.js"></script>
<script src="http://localhost/grocery.ru/assets/grocery_crud/themes/datatables/js/datatables.js"></script>
<script src="http://localhost/grocery.ru/assets/grocery_crud/themes/datatables/extras/TableTools/media/js/ZeroClipboard.js"></script>
<script src="http://localhost/grocery.ru/assets/grocery_crud/themes/datatables/extras/TableTools/media/js/TableTools.min.js"></script>
<script src="http://localhost/grocery.ru/assets/grocery_crud/js/jquery_plugins/jquery.fancybox.pack.js"></script>
<script src="http://localhost/grocery.ru/assets/grocery_crud/js/jquery_plugins/jquery.easing-1.3.pack.js"></script>
Is that means, that it loads these files? I thought it so. And this is what I see when I connect with controller "examples.php" (I'm nor writing this code, 'cause it basic files in grocery's archive): http://rghost.ru/46695190