I try to use bootstrap css in my JSF Page and have problems referenciong it.
Followed a tutorial I did the following:
added Maven Dependency:
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.0.0</version>
</dependency>
added reference in the JSF Page:
<h:outputStylesheet library="webjars"
name="bootstrap/3.0.0/css/bootstrap.css"/>
<h:outputStylesheet name="css/mystyles.css" />
When calling the page only my "mystyles.css" could be referenced. See source of the HTML Page:
<link type="text/css" rel="stylesheet" href="RES_NOT_FOUND" />
<link type="text/css" rel="stylesheet" href="/j2eetest4_war_exploded/javax.faces.resource/css/mystyles.css.xhtml" />
What could be the problem referencing the webjar ?
Related
I am setting up my application to bundle css and js files when not in development, and not bundle when in development.
To do that I first have a bundleconfig.json file:
[
{
"outputFileName": "wwwroot/css/bundle.min.css",
"inputFiles": [
"wwwroot/lib/bootstrap/bootstrap.min.css",
"wwwroot/lib/jqueryui.jquery-ui.min.css"
]
},
{
"outputFileName": "wwwroot/js/bundle.min.js",
"inputFiles": [
"wwwroot/lib/jquery/jquery.min.js",
"wwwroot/lib/jqueryui/jquery-ui.min.js",
"wwwroot/lib/bootstrap/dist/js/bootstrap.bundle.js"
]
}
]
Then in my page I have a head tag:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewBag.Title</title>
<environment exclude="development">
<link rel="stylesheet" href="~/css/bundle.min.css" asp-append-version="true" />
<script type="text/javascript" src="~/js/bundle.min.js" asp-append-version="true"></script>
</environment>
<environment include="development">
<link rel="stylesheet" href="~/lib/bootstrap/bootstrap.css" asp-append-version="true" />
<link rel="stylesheet" href="~/lib/jqueryui/jquery-ui.css" asp-append-version="true" />
<script type="text/javascript" src="~/lib/jquery/jquery.js" asp-append-version="true"></script>
<script type="text/javascript" src="~/lib/jqueryui/jquery-ui.js" asp-append-version="true"></script>
<script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.bundle.js" asp-append-version="true"></script>
</environment>
</head>
This all works fine. I'm just not a fan of the fact that I have to duplicate the list of files in the budingconfig.json and in the development environment tag in the header.
In WebForms project I can use <%: Scripts.Render("...") %> and it will generate links for each item in the bundle if in development mode, and it will generate 1 link for the bundle if not in development mode. Is something like this available in .net core MVC projects as well?
There is no build-in way to do this in ASP.NET Core. However it is pretty straight forward to roll your own.
Mad Christensen has build an unpacker for MVC5 and here is a gist that adapts it to .NET Core.
You use it like this:
<environment names="Development">
#Bundler.Unpack(HostingEnvironment.ContentRootPath, "/js/site.min.js")
</environment>
However, if you have no specific reason to include each file other than debugging you can also rely an sourcemaps. There is a flag in the bundleconfig for this. ( "sourceMap": true )
You can try a TagHelper like the following
https://github.com/meziantou/Meziantou.AspNetCore.BundleTagHelpers
That will help you what you want to achieve. Instead of writing following type of code
<environment names="Development">
<link rel="stylesheet" href="~/css/site1.css" />
<link rel="stylesheet" href="~/css/site2.css" />
<link rel="stylesheet" href="~/css/site3.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
You can only write this:
<bundle name="wwwroot/css/site.min.css" />
In production, it uses the minified file and appends the version in
the query string (same behavior as asp-append-version).
In development, it uses all input files and does not append version.
I install kendo ui asp.net mvc 2018.1.117 and 2016.
1. I add Style and JS Folder to my project and renamed both of them to "kendo" .
2. add reference to my project
3. I didn't config BundleConfig.cs because there was no BundleConfig.cs in my project
4. I add namespace to web.config
5. I add Styles and ... manually in my project like :
<link href="#Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/kendo.common-material.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/kendo.material.min.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/kendo/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/angular.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/jszip.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/kendo.all.min.js")"></script>
I did all these steps and when I add kendo date Picker it doesn't work:
#(Html.Kendo().DatePicker().Name("datepicker"))
When I click inspect element it shows my css and js file but kendo ui doesn't work.
Dev tool screenshot:
pic1
I have a <p:download> like this:
<h:form id="form1">
<p:commandButton id="downloadLink" value="Download" ajax="false" onclick="PrimeFaces.monitorDownload(start, stop)"
icon="ui-icon-arrowthichk-s" actionListener="#{search.downloadActionListener}">
<p:fileDownload value="#{search.dwnloadFile}" />
</p:commandButton>
</h:form>
It doesn't work. The download button just reloads the page and doesn't show the Save As dialog. After checking every single thing, I came to know that if I remove the <h:head> tag from the page, then it starts to work.
I can't work without <h:head> as PrimeFaces look'n'feel and all ajax functionality depends on it.
Update: the generated HTML <head> with <h:head> is like this:
<head>
<link href="/Project2.0/javax.faces.resource/themes/sam/theme.css.xhtml?ln=icefaces.ace" rel="stylesheet" type="text/css" />
<link href="/Project2.0/rfRes/skinning.ecss.xhtml?db=eAG7mShzEgAFjAIg" rel="stylesheet" type="text/css" />
<link href="/Project2.0/javax.faces.resource/primefaces.css.xhtml?ln=primefaces" rel="stylesheet" type="text/css" />
<script src="/Project2.0/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces" type="text/javascript"></script>
<script src="/Project2.0/javax.faces.resource/primefaces.js.xhtml?ln=primefaces" type="text/javascript"></script>
<link href="/Project2.0/javax.faces.resource/dock/dock.css.xhtml?ln=primefaces" rel="stylesheet" type="text/css" />
<script src="/Project2.0/javax.faces.resource/dock/dock.js.xhtml?ln=primefaces" type="text/javascript"></script>
<link href="/Project2.0/javax.faces.resource/layout/layout.css.xhtml?ln=primefaces" rel="stylesheet" type="text/css" />
<script src="/Project2.0/javax.faces.resource/layout/layout.js.xhtml?ln=primefaces" type="text/javascript"></script>
<script src="/Project2.0/javax.faces.resource/jsf.js.xhtml?ln=javax.faces" type="text/javascript"></script>
<script src="/Project2.0/javax.faces.resource/icepush.js.xhtml?v=9261182" type="text/javascript"></script>
<script src="/Project2.0/javax.faces.resource/bridge.js.xhtml?v=9261182" type="text/javascript"></script>
<script type="text/javascript">document.documentElement.isHeadUpdateSuccessful=true;</script>
<style type="text/css">.ice-blockui-overlay {position: absolute;background-color: white;z-index: 28000;opacity: 0.22;filter: alpha(opacity = 22);}.ice-status-indicator-overlay {position: absolute;background-color: white;z-index: 28000;opacity: 0.22;filter: alpha(opacity = 22);}</style>
<script src="/Project2.0/javax.faces.resource/compat.js.xhtml" type="text/javascript"></script>
<script src="/Project2.0/javax.faces.resource/icefaces-compat.js.xhtml" type="text/javascript"></script>
<title>
Project
</title>
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="../Styles/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
</head>
and without <h:head> it's like this:
<head>
<title>
Project
</title>
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="../Styles/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
</head>
The HTML output of the <h:head> suggests that you're mixing PrimeFaces with ICEfaces. The main cause of your concrete problem is this script from ICEfaces:
<script src="/Project2.0/javax.faces.resource/icefaces-compat.js.xhtml" type="text/javascript"></script>
This basically turns every non-ajax submit button into an ajax submit button. This also includes the download button. But you cannot download files with ajax.
Remove ICEfaces altogether. You don't need it. It's basically a clone of PrimeFaces 2.x. But if you're already using PrimeFaces 3.x, then ICEfaces has utterly no additional value. Perhaps it was a leftover from previous experimenting with various JSF component libraries.
See also:
ICEfaces libary in classpath prevents Save As dialog from popping up on file download
Unrelated to the concrete problem, the HTML output also suggests that you're also having RichFaces in the runtime classpath. Whilst that should theoretically work fine together with PrimeFaces, I wouldn't recommend mixing them. RichFaces has in essence nothing which PrimeFaces doesn't already offer.
I have and accordion working on a normal html page, but when I try and add it to a Spring MVC page then I get the error: $(...).accordion is not a function.
Here is the header of my WEB-INF\views\index.jspfile:
<!DOCTYPE html>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Jeeni Software Ltd</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="<c:url value="css/style.css"/>" type="text/css">
<link rel="stylesheet" href="<c:url value="css/menu/menu_style.css"/>" type="text/css"/>
<script type="text/javascript" src="<c:url value="js/jquery-1.8.3.js"/>"></script>
<script type="text/javascript" src="<c:url value="js/jquery-ui-1.9.2.js">"></script>
<script type="text/javascript" src="<c:url value="js/jquery.flip.js"/>"></script>
...
<!-- This is the 'accordion' div -->
<div id="accordion" style="height:800px;">
<h3>Title...</h3>
...
Here is the ready function:
$(document).ready(function() {
var object = $("#accordion");
alert("object: " + object.accordion);
$("#accordion").accordion({ collapsible: true, active: 'false', autoHeight: false });
$("#banner").fadeIn(1000);
alert("Done");
});
with this alert("object: " + object.accordion); show object: undefined and it bombs out on the next line.
Here is my servlet-context.xml file
<mvc:resources mapping="/cv/**" location="/cv/" />
<mvc:resources mapping="/wow/**" location="/wow/" />
<mvc:resources mapping="/css/**" location="/css/" />
<mvc:resources mapping="/imgs/**" location="/imgs/" />
<mvc:resources mapping="/js/**" location="/js/" />
<mvc:resources mapping="/inc/**" location="/inc/" />
<mvc:resources mapping="/article-imgs/**" location="/article-imgs/" />
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
<property name="prefix" value="/WEB-INF/views/"/>
<property name="suffix" value=".jsp"/>
</bean>
Firebug shows no problem loading any of the jquery files. I can re-create the proper behavior outside of Spring mvc, so the problem must be something to do with Spring/Java?!? But I can not find out what. The only error Firebug reports is the $(...).accordion is not a function, but everything is setup just like on the jquery ui accordion example.
BTW, I've trawled the internet for the last 3 hours and found similar problems that were fixed by typos. This isn't a typo error. I can not find anything like this regarding jquery UI and Spring MVC.
Solved!
The problem was that I was importing some content via:
<jsp:include page="../includes/index_page_intro_txt.jsp" />
and this JSP file was re-importing jquery. Took this out and everything was fine.
Special thanks to #NimChimpsky for being a sounding board and keeping me going.
There's no way anyone could have solved this with the information above. So just let you all know how I solved it:
I started by removing everything from the file other than the library imports, the ready statement and the accordion div block. Then it worked. So I slowly added everything back until it stopped working and then investigated that cause.
Should have done that in the first place - duh!
<script type="text/javascript" src="<c:url value="js/jquery-ui-1.9.2.js">"></script>
is not correct in some way.
Can you get any jquery functions to work ?
Is it just the jquery-ui functions that are not working?
Did you customize the jquery-ui download and not include accordion ?
Do you get 404 in the browser debugger ?
Are you opening a popup which overwrites the jQuery object with something else ?
Also probably better to use a cdn hosted version of the jQuery lib files. The below gets the latest version and works with accordion.
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js' type='text/javascript'></script>
I am attempting to use jQuery Mobile in Spring Roo.
When I login to my application the application displays the source code for the last included javascript file.
Take a look at mjquery-scripts.tagx file below.
Notice that whatever is the last included file, the source code of that file, will be displayed in the browser.
The address will be something like https://testdomain.com:8080/scripts/jquerymobile/jquery.mobile-1.0.min.js
Now, when I type the url https://testdomain.com:8080/ I will be shown the proper page.
The problem seems to be that on login the redirection is to the path scripts/jquerymobile/jquery.mobile-1.0.min.js .
What could be causing this problem?
Even though I have indicated jquery.mobile this problem happens for jquery.min too.
The default load-scripts.tagx works just fine.
<jsp:root xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:spring="http://www.springframework.org/tags" version="2.0">
<spring:url value="/scripts/jquery-1.7.min.js" var="jQuery_URL" />
<spring:url value="/scripts/jquerymobile/jquery.mobile-1.0.min.css" var="mobile_CSS" />
<spring:url value="/scripts/jquerymobile/jquery.mobile-1.0.min.js" var="mobile_js" />
<link rel="stylesheet" type="text/css" href="${mobile_CSS}"><!-- required for FF3 and Opera --></link>
<script type="text/javascript" src="${jQuery_URL}"><!-- required for FF3 and Opera --></script>
<script type="text/javascript" src="${mobile_js}"><!-- required for FF3 and Opera --></script>
This turned out to be a silly problem on my part.
I placed the jquery js files in the /src/main/webapp/scripts folder.
Moved them over to
/src/main/resources/web-resources
as in the following:
<jsp:root xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:spring="http://www.springframework.org/tags" version="2.0">
<spring:url value="/resources/jquery-1.7-min/jquery-1.7.min.js" var="jQuery_URL" />
<spring:url value="/resources/jquerymobile/jquery.mobile-1.0.min.css" var="mobile_CSS" />
<spring:url value="/resources/jquerymobile/jquery.mobile-1.0.min.js" var="mobile_js" />
<link rel="stylesheet" type="text/css" href="${mobile_CSS}"><!-- required for FF3 and Opera --></link>
<script type="text/javascript" src="${jQuery_URL}"><!-- required for FF3 and Opera --></script>
<script type="text/javascript" src="${mobile_js}"><!-- required for FF3 and Opera --></script>
</jsp:root>
Now it works as expected.