How to make dialog close work with generated views? - javascript

I have a Primefaces project where all the views are generated via Netbeans.
Some of the views are edited and made into common used one, to make it more transparant. My problem is, that the VIEW part of the CRUD is one of the common ones, so it's referenced like this:
myView/myListView.xhtml:
<p:dialog id="InvoiceViewDlg" widgetVar="InvoiceViewDialog" modal="true" resizable="false" appendTo="#(body)" header="#{bundle.ViewInvoiceTitle}">
<ui:include src="View.xhtml"/>
</p:dialog>
referencing myView/View.xhtml:
<?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 xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:components="http://xmlns.jcp.org/jsf/composite/Components"
xmlns:my="http://mywork.com/jsf/facelets">
<ui:composition>
<ui:include src="/view/form/formView.xhtml">
<ui:param name="item" value="#{invoiceController.selected}" />
<ui:param name="formType" value="invoice"/>
<ui:param name="controller" value="#{invoiceController}"/>
</ui:include>
</ui:composition>
</html>
referening /view/form/formView.xhtml and this is the problem:
<p:commandButton value="#{bundle.Close}" onclick="PF('FormViewDialog').hide()" styleClass="cancelButton"/>
formView is referenced on every View form and sadly the Close button (not the X, that is working) isn't working, because of the bad reference in the onclick event. I have no idea how make this work for every form... Has anyone any idea?
EDIT:
I edited my myView/View.xhtml to this:
<?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 xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:components="http://xmlns.jcp.org/jsf/composite/Components"
xmlns:my="http://mywork.com/jsf/facelets">
<ui:composition>
<ui:include src="/view/form/formView.xhtml">
<ui:param name='dialogname' value='InvoiceViewDialog'/>
<ui:param name="item" value="#{invoiceController.selected}" />
<ui:param name="formType" value="invoice"/>
<ui:param name="controller" value="#{invoiceController}"/>
</ui:include>
</ui:composition>
</html>
And my /view/form/formView.xhtml:
<p:commandButton value="#{bundle.Close}" onclick="PF('#{dialogname}')).hide()" styleClass="cancelButton"/>
Sadly, this is the error I'm still getting:

Related

How to include jqplot dateAxisRenderer.min.js file in your xhtml page

I would like to include jqplot.dateAxisRenderer.min.js file in your xhtml page.
How do i do ?
PF Version : 6.0.0
Added Dependency using POM:
<dependency>
<groupId>org.wicketstuff</groupId>
<artifactId>jqplot</artifactId>
<version>7.6.0</version>
</dependency>
How to add in xhtml file?
Following is my xhtml file code:
<?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 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"
xmlns:pe="http://primefaces.org/ui/extensions">
<ui:composition template="/pages/layout.xhtml">
<ui:define name="pageTitle">
<h:outputText value="Page 3" />
</ui:define>
<ui:define name="centerContent">
<div class="contentdetailheadline parbase">
<h1>Page 1</h1>
</div>
<div class="bodycopy parbase">
<div style="clear: both"></div>
<div class="content-body">
<p>
Welcome to My Page !!!
</p>
</div>
<div style="clear: both"></div>
</div>
</ui:define>
</ui:composition>
</html>

How to include JavaScript file in JSF

he truth is that the code is small since I am learning, but I can not make it work, I have already touched other issues about this and I have not found a solution
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<h:outputScript library="js" name="jquery-last.js" />
</h:head>
<div id="header">
<div class="logo"></div>
<div class="medio">MANAGER DX2</div>
<div class="fin"> </div>
</div>
<h:body>
<div class="body">
<div class="upbody">
<div></div>
<div>
Salir
</div>
</div>
<div class="container">
</div>
</div>
</h:body>
</html>
I also add some images with error and be able to provide more information
Thank you very much for your help

Can't show a primefaces panel with onclick

I'm trying to show a p:panel with a widgetVar and onclick but it only shows up for like a split second. Then it hides again.
When it hides again I get the following error-message in the browser development console:
Uncaught TypeError: Cannot read property 'val' of undefined
The error also shows up only for a split second.
This is my .xhtml page:
<?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 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>
<h:outputStylesheet library="css" name="style.css" />
<h:outputScript name="jquery/jquery.js" library="primefaces"/>
</h:head>
<h:body>
<h:form>
<p:commandButton value="testbutton" ajax="false" onclick="PF('panelwv').show();" />
<p:panel widgetVar="panelwv" visible="false" toggleable="true">
<h:outputText value="Test" />
</p:panel>
</h:form>
</h:body>
</html>
I'm using Primefaces 5.2.
Having ajax="false" on a p:commandButton while not having specified an action or actionListener attribute referencing a bean, causes this. It looks like you do not need to or do not want to call any action on the server and just do some javascript. In that case add a type="button" to the p:commandButton.
See also:
Primefaces - commandButton does not work
Page 112 of the PF 5.2 docs

CommandButton does not invoke javascript in JSF

The declaration and the invoke is here:
<?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 xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>#{msgs.windowTitle}</title>
<h:outputScript library="javascript" name="Resources/js/checkPassword.js" />
</head>
<body>
<h3>#{msgs.Entrance}</h3><br/><br/><br/>
<h:form>
<h:panelGrid columns="2" columnsClasses="evenColumns, oddColumns">
#{msgs.namePrompt}
<h:inputText/>
#{msgs.PasswordPrompt}
<h:inputSecret id="password" />
#{msgs.ConfirmPasswordPrompt}
<h:inputSecret id="passwordConfirm"/>
</h:panelGrid>
<h:commandButton type="button" value="Submit" onclick="checkPassword()" />
</h:form>
</body>
</html>
The checkpassdword.js
function checkPassword(){
alert("here it is");
var password = form[form.id+":passwordConfirm"].value;
var passwordConfirm = form[form.id+":password"].value;
if(password==passwordConfirm){
form.submit();
}
else{
alert("Wrong");
}
}
It is inside WebContent/Resources/js
when i write in put and, click button, nothing happens.
In explorer the error is in console
<script src="RES_NOT_FOUND" type="text/javascript"></script>
How can i solve this problem? I tried to put in src, webinf, meta inf and tried to declare as src not name but nothing happened.
The error unidentified checkPassword.
Replace
<h:outputScript library="javascript" name="Resources/js/checkPassword.js" />
with
<h:outputScript name="js/checkPassword.js"/>
and rename your Resources folder in your WebContent into resources
And go over the following thread What is the JSF resource library for and how should it be used?

Can't access javascript file in jsf component

I have a jsf component that must access to a javascript file, i added this whith outputScript as in the code bellow, I get an error in the generated html, and the javascript can't be reached.
The javascript file is located in document_root/js directory
How can i resolve this problem, thank you for your help.
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head><title>(For validation only)</title>
<link href="./css/styles.css"
rel="stylesheet" type="text/css"/>
</h:head>
<h:body>
<composite:interface/>
<composite:implementation>
<h:outputScript library="js" name="messages.js" />
<h:outputScript library="js" name="DateValidation.js" />
<h:form id="f">
<h:outputText value="Date" />
<h:inputText id="dateA"
onblur="return validateDateField('f:dateA');">
</h:inputText>
</h:form>
</composite:implementation>
</h:body>
</html>
Those files have to be placed in the /resources subfolder. So, you should have the following in the public webcontent:
/resources/js/DateValidation.js
/resources/js/messages.js
Unrelated to the concrete problem, your composite component approach is pretty awkward. I'd suggest to check out composite-component tag wiki: https://stackoverflow.com/tags/composite-component/info

Categories