I've been migrating aplication from EJB to JSF + Spring and doing this, I updated RichFaces from 3.3.1 to 4.1.0.
Now I'm struggling with following problem, that the console in chrome shows
Uncaught ReferenceError: jQuery is not defined
in RichFaces scripts like richfaces-event.js, popupPanel.js.
I know that in header of the html file, including of the jQuery file should be first, but I've looked into the former application and this scripts are also included there before jQuery and no errors appear. What's more, I don't now how I could change this, because these scripts are added implicitly by having:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
How can I fix this problem?
<f:view contentType="text/html" locale="#{localeSelector.language}">
<h:head>
<title>#{messages['news.title']}</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css"
href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
</h:head>
<h:body>
<h:outputScript name="jquery.js" library="js" target="head" />
<div id="container">
</div>
</h:body>
</f:view>
</html>
The problem here is not lightbox but RichFaces.The html code generated is:
<script type="text/javascript" src="/ESA/javax.faces.resource/richfaces-event.js.xhtml"> </script>
<script type="text/javascript" src="/ESA/javax.faces.resource/popupPanel.js.xhtmlln=org.richfaces"></script>
<script type="text/javascript" src="/ESA/javax.faces.resource/popupPanelBorders.js.xhtml?ln=org.richfaces"></script>
<script type="text/javascript" src="/ESA/javax.faces.resource/popupPanelSizer.js.xhtml?ln=org.richfaces"></script>
<script type="text/javascript" src="/ESA/javax.faces.resource/jquery.js.xhtml?ln=js"> </script>
<script type="text/javascript" src="/ESA/javax.faces.resource/jquery.lightbox-0.5.js.xhtml?ln=js"></script>
But is the application I'm migrating, the code is the same and console does not show any errors
You should load your JavaScript libraries in the right order. If you see the source of the rendered page you will see that jQuery is loaded in second or not at all because of the library="js".
Modify the inclusion like that :
<h:head>
<h:outputScript name="jquery.js" />
<h:outputScript name="js/jquery.lightbox-0.5.js" />
</h:head>
Note :
The jQuery used will come from RichFaces, you wont be able to use the $ descriptor. You will need to use jQuery("your-selector")... instead. You will also need to put the LightBox library in <web-root>/resources/js/jquery.lightbox-0.5.js so it will be found.
Related
I have an ASP.Net MVC 5 project using Infragistics IgniteUI. When I load igniteui charts or grids using my bundled and minified infragistics scripts and stylesheets, I get errors. When I use the unbundled versions, I do not get the errors.
UPDATE I also tried bundling with minification disabled, which still produces the errors.
Why is it looking for images in the /bundles/ path when I use the bundled files?
What can I do differently, to prevent these errors while using bundling?
Errors
The controller for path '/bundles/images/ui-icons_888888_256x240.png' was not found or does not implement IController.
The controller for path '/bundles/images/igLoadingSmall.gif' was not found or does not implement IController.
BundleConfig
#region Scripts
...
bundles.Add(new ScriptBundle("~/bundles/igniteui_full_js").Include(
"~/Scripts/IgniteUI/js/infragistics.core.js",
"~/Scripts/IgniteUI/js/infragistics.dv.js",
"~/Scripts/IgniteUI/js/infragistics.lob.js",
"~/Scripts/IgniteUI/js/infragistics.loader.js"
));
#endregion
#region Styles
...
bundles.Add(new StyleBundle("~/bundles/igniteui_full_css").Include(
"~/Content/IgniteUI/css/themes/infragistics/infragistics.theme.css",
"~/Content/IgniteUI/css/structure/infragistics.css"
));
#endregion
Layout Head Razor Code
<!-- Header Styles-->
#Styles.Render(
"~/bundles/css",
"~/bundles/igniteui_full_css"
)
<!-- Header Scripts-->
#Scripts.Render(
"~/bundles/jquery",
"~/bundles/ajax",
"~/bundles/modernizr",
"~/bundles/bootstrap",
"~/bundles/site",
"~/bundles/igniteui_full_js"
)
Unbundled Head - Doesn't produce Errors
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Header Styles-->
<link href="/Content/bootstrap-multiselect.css" rel="stylesheet"/>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/Dashboard.css" rel="stylesheet"/>
<link href="/Content/IgniteUI/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"/>
<link href="/Content/IgniteUI/css/structure/infragistics.css" rel="stylesheet"/>
<!-- Header Scripts-->
<script src="/Scripts/jquery-2.2.0.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/validator.js"></script>
<script src="/Scripts/jquery.browser.mobile.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/bootstrap-multiselect.js"></script>
<script src="/Scripts/site.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.core.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.dv.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.lob.js"></script>
<script src="/Scripts/IgniteUI/js/infragistics.loader.js"></script>
</head>
Bundled Head - Produces Errors
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Header Styles-->
<link href="/bundles/css?v=DOErVhQffVVJij5tRivXIDYvvea9XjXYoWkD6iph4yo1" rel="stylesheet"/>
<link href="/bundles/igniteui_full_css?v=oMN-4N9H6hCThCn7D6WHIiusJgqj7Qk9KfeKje7iGdI1" rel="stylesheet"/>
<!-- Header Scripts-->
<script src="/bundles/jquery?v=3wcNYlWV3nKyr3gSm0Ry9LrwfpXaysXErYMcQN9fkcw1"></script>
<script src="/bundles/ajax?v=jmjhTWiGrUMlGQS2hayanNTeGVZ9FC7i0HnCBpQ4IZ81"></script>
<script src="/bundles/modernizr?v="></script>
<script src="/bundles/bootstrap?v=kNIhecyepPMk8f_DFvoGkBz2T4zIItHFFHq2488ZHwY1"></script>
<script src="/bundles/site?v=stk1SwAEJZvoHt7p5QZ9202zmQ1IeBvXWmqmxFpIXI01"></script>
<script src="/bundles/igniteui_full_js?v=6y5k9Wl7x2PlzNsRN0azCfVIh1oR8SLPZohqnlbLrNo1"></script>
</head>
View
#using Infragistics.Web.Mvc
#using MyProject.Web.Website.ViewModels
#model ReportViewModel
#(Html.Infragistics()
.Grid(Model.ReportData.AsQueryable())
.ID("grid")
.AutoGenerateColumns(true)
.AutoGenerateLayouts(true)
.DataBind()
.Render()
)
I believe the issue is that you need a CssRewriteUrlTransform because the bundling changes where the resources should be referenced from.
bundles.Add(new StyleBundle("~/bundles/igniteui_full_css")
.Include("~/Content/IgniteUI/themes/infragistics/infragistics.theme.css", new CssRewriteUrlTransform())
.Include("~/Content/IgniteUI/structure/infragistics.css", new CssRewriteUrlTransform()));
On a side note, you can remove the infragistics.loader.js from your script bundle as you're bundling all of the combines script files, thus the loader is not needed.
I am using the following snippet for uploading photo, using primefaces :
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:outputText value="PrimeFaces Single Upload" />
<h:form enctype="multipart/form-data">
<p:fileUpload fileUploadListener="#{uploadPhotoHandler.handleFileUpload}" mode="advanced"
update="messages" label="Choose a file" sizeLimit="5242880" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
invalidSizeMessage="The maximum file size allowed is 1 Megabyte !"
invalidFileMessage="You are allowed to upload only images !" />
<p:growl id="messages" showDetail="true" sticky="true" />
This composition I am adding into the main page, which is index.xhtml using the following command : <ui:include src="upload_img_form.xhtml" />.
The main page looks like :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.1.1.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.xdr-transport.js"></script>
<script type="text/javascript" src="js/jquery.fileupload.js"></script>
<script type="text/javascript" src="themes/jquery-ui-1.10.0.custom/js/jquery-ui-1.10.0.custom.min.js"></script>
<link type="text/css" rel="stylesheet" href="themes/jquery-ui-1.10.0.custom/css/sunny/jquery-ui-1.10.0.custom.css" />
<link type="text/css" rel="stylesheet" href="css/base.css" />
<link type=" text/css" rel="stylesheet" href="css/styles.css" />
</h:head>
<h:body>
<div id="container" class="container ">
<ui:include src="upload_img_form.xhtml" />
</div>
</h:body>
</html>
I have the following problems :
The progress bar doesn't work,
Cancel button doesn't work, and the biggest problem is the sizeLimit which doesn't validate the file which is given as a input.
Even this is not autoupload, the files are autouploaded, without clicking Upload button before.
The problem is 100% related to the head section because if I remove that, it works. Though, it doesn't work for others functionality in the same page, so I have to keep the js files and styles.
Thank you for your response.
Get rid of the manually included jQuery. PrimeFaces already auto-includes own copies. If they are of a different version, it would only conflict, resulting in JS-related trouble in all colors. You would have noticed it if you have checked the JS console in browser's developer toolset.
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 am using Primefaces 3.3.1, JSF 2.0 and Liferay 6.0 in my app. I have my JS files included in the portal_normal.vm as follows
portal_normal.vm
<html class="#language("lang.dir")" dir="#language("lang.dir")" lang="$w3c_language_id">
<head>
<title>$the_title - $company_name</title>
<script src="$javascript_folder/jquery-1.7.2.min.js"></script>
<script src="$javascript_folder/javascript.js"></script>
<script src="$javascript_folder/jquery.tablesorter.min.js"></script>
<script src="$javascript_folder/jquery.tablesorter.pager.js"></script>
<script src="$javascript_folder/jquery.autocomplete.js"></script>
<script src="$javascript_folder/jquery.simplemodal.1.4.2.min.js"></script>
<script src="$javascript_folder/jquery.scrollTo.js"></script>
<script src="$javascript_folder/ui.datepicker.js"></script>
$theme.include($top_head_include)
</head>
<body></body>
</html>
sample.xhtml:
<div xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
lang="en" xml:lang="en" style="padding-bottom: 8px;">
<h:head>
<script type="text/javascript" src="#{lookupBean.themePath}/js/jquery-1.7.2.min.js" />
<script type="text/javascript" src="#{lookupBean.themePath}/js/javascript.js" />
<script type="text/javascript" src="#{lookupBean.themePath}/js/jquery.tablesorter.min.js" />
<script type="text/javascript" src="#{lookupBean.themePath}/js/ui.datepicker.js" />
</h:head>
<h:body></h:body>
</div>
Prime faces requires h:head to be included in the view. When I add the h:head to my xhtml, none of the js files are getting imported. Could you please let me know how can I add the .js to h:head?
The portal_normal.vm file is designed to be a template for the portal page, and is contained within the Liferay theme. You should not need to add any PrimeFaces or jQuery related resources to the head section of this template. Instead, simply create a PrimeFaces portlet and use h:head within your Facelet view. If you do that, then PrimeFaces will automatically add required resources during the JSF lifecycle, and Liferay Faces Bridge will take care of injecting them into the <head>...</head> section of the portal page for you. I would recommend that you look at the primefaces3-portlet demo for more information.
JSF 2 expects all resources to be located under webapp - resources
here you can place your scripts. You might want to create a subfolder called "scripts" and then use this tag:
<h:outputScript library="js" name="common.js" />
full guide here:
http://www.mkyong.com/jsf2/how-to-include-javascript-file-in-jsf/
Edit: Yes your view do need namespaces. Try this header:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui" xmlns:o="http://omnifaces.org/ui">
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.