The following bit of code doesn't add jquery-plugins.js:
<p:lightBox styleClass="imagebox">
<h:outputLink value="../resources/images/car.png">
<h:graphicImage value="/resources/images/car.png" />
</h:outputLink>
</p:lightBox>
This code does add jquery-plugins.js:
<p:lightBox styleClass="imagebox">
<h:outputLink id="tip" value="../resources/images/car.png">
<h:graphicImage value="/resources/images/car.png" />
</h:outputLink>
</p:lightBox>
<p:tooltip for="tip"></p:tooltip>
This tooltip has just been added for testing purposes and isn't needed in production. However, it seems that removing it will also break my p:lightBox (since jquery-plugins.js) won't be included anymore.
I am using templating (ui:insert, ui:define), the template does use h:head and h:body. Does anyone know how to fix this (so how to automatically include jquery-plugins.js with just p:lightBox)?
Note that I have tried multiple versions of Primefaces in which this occurs.
Does anyone know how to fix this (so how to automatically include jquery-plugins.js with just p:lightBox)?
It's a bug in their LightBox component. The resource dependency on jquery-plugins.js is missing. See the source code:
#ResourceDependencies({
#ResourceDependency(library="primefaces", name="primefaces.css"),
#ResourceDependency(library="primefaces", name="jquery/jquery.js"),
#ResourceDependency(library="primefaces", name="primefaces.js")
})
public class LightBox extends UIComponentBase implements org.primefaces.component.api.Widget {
They have to fix it themselves by adding the desired #ResourceDependency. Report an issue to PrimeFaces.
In the meanwhile, you can workaround it by just explicitly including it in master template.
<h:outputScript library="primefaces" name="jquery/jquery.js" />
<h:outputScript library="primefaces" name="jquery/jquery-plugins.js" />
Related
I have a question concerning the jsf component . Here is a small code example:
<ui:repeat var="bean" value="myBean.myListToIterate">
<h:selectOneCheckbox value="#{myBean.specificField}" />
#{bean.car.name}
</ui:repeat>
Question 1: Why the expression #{bean.car.name} alone inside the ui:repeat element and why not for example in a
<h:outputLabel value="#{bean.car.name}" />"?
If i use this, nothing will be displayed.
Question 2: Why does this example doesn´t look very well, if i use a
<h:selectOneRadio value="#{myBean.specificField}"/> component
instead of a
<h:selectOneCheckbox value="#{myBean.specificField}"/> component?
Greetz
Marwief
Answer 1 :
EL JSF expressions are allowed in the last JSF versions. So it can be put without any wrapping tag (like <h:outputText />).
Using this <h:outputLabel value="#{bean.car.name}" /> did not give result, because you did not specify for attribute to point to, in order to be rendered as label of its client id, which means, it cannot be used alone.
Answer 2 :
First, this JSF tag <h:selectOneCheckbox /> doesn't exist, maybe you wanted to mean <h:selectBooleanCheckbox />. Replacing this by <h:selectOneRadio ... /> does not look very well, because this last one needs <f:selectItem /> or <f:selectItems /> to hold choices from where the end user will be able to choose between (i.e at least 2 choices), in the contrary of <h:selectBooleanCheckbox /> which can have no child select item(s) tag(s) in the case of one alone choice to (un)check.
There a several related question on this topic on SO and elsewhere, but I couldn't find a definitive answer on this specific question.
I have a p:dataTable and I want the possibility to click on a row and open a detail page (a new page, not a dialogue or window).
I have solved it this way (which I have from the primefaces website, for some reason it is no longer there: http://web.archive.org/web/20101001223235/http://www.primefaces.org/showcase/ui/datatableRowSelectionInstant.jsf):
<p:dataTable var="order" value="#{orderBean.orders}" selection="#{orderBean.selectedOrder}" selectionMode="single" rowKey="#{order.number}">
<p:ajax event="rowSelect" listener="#{orderBean.orderSelect}"/>
<p:column ... />
</p:dataTable>
The navigation is then executed in the bean:
public void orderSelect(SelectEvent event) {
ConfigurableNavigationHandler nh = (ConfigurableNavigationHandler)FacesContext.getCurrentInstance().getApplication().getNavigationHandler();
nh.performNavigation("orderDetail?faces-redirect=true");
}
My Question: is there a way of doing this just inside JSF without the help of a backing bean?
I am also asking because they removed the code exmaple from the primefaces site, which might be an indication that this is not the right way of doing something like that.
Wrap the cell(s) of interest in a simple <h:link>.
<p:column>
<h:link outcome="orderDetail">
...
</h:link>
</p:column>
Use if necessary CSS display:block on the link to let it span the entire cell. You can if necessary pass request parameters using a nested <f:param>.
since it is an ajax request, typically the request/response is used to re-render some components in the web page. What you could do is
<p:ajax event="someventofintrest" onsuccess="javascript:myjsmethod();"></p:ajax>
and
<p:remotecommand name="myjsmethod" action="#{mybean.mybeanmethod}" />
and in the backing bean
public String mybeanmethod(){
return "mynewpage"; // Navigate away to mynewpage.xhtml
}
HTH.
As I didn't find a really perfect solution, this is how I do it now.
I have now a "navigator" class like this
#Component
public class Navigator {
public void nav(String page) {
UIHelper.navigateTo(page);
}
}
And I call this class from my ajax event:
<p:ajax event="rowSelect" listener="#{navigator.nav('orderDetail')}"/>
As I said, not really perfect, but I like the fact that I don't have to write code in my backing bean. (Of course I have to write code for the Navigator, but that I can re-use.)
Okay, so I have read through stackoverflow and various other portions of the net for a few days, and have not found a solution yet that fixes my issue.
Basically, I have an h:form in a p:dialog with two required fields. When the fields are both filled in, the form successfully submits and the dialog closes. When either or both fields are left blank, required field validation fails and updates the h:messages component in the p:dialog with the appropriate required messages. However, also when validation fails, the AJAX call seems to never "finish" and prevents subsequent calls from being executed. This is seen evident by my p:ajaxStatus component never disappearing from the screen, indicating that something is hanging somewhere. This is remedied by refreshing the page, at which point all other AJAX components begin to function again.
Additionally, I will note that this p:dialog is in a ui:define in a ui:composition, that dumps it into a master template. It is not nested within another h:form.
<p:dialog id="dlgDecision"
header="Decision"
widgetVar="dialogDecision"
modal="false"
resizable="false"
appendToBody="true">
<h:form id="fDlgDecision">
<h:messages id="msgDlgDecision" binding="#{msgform.messages}" errorClass="errormsg" infoClass="infomsg1" layout="table"/>
<h:outputFormat rendered="#{studentdetailsform.decisionAction == 'A'}">
<h:outputText value="Select an accept and admit code."/>
</h:outputFormat>
<h:outputFormat rendered="#{studentdetailsform.decisionAction == 'C'}">
<h:outputText value="Select a cancel and reason code."/>
</h:outputFormat>
<h:panelGrid columns="1">
<h:selectOneMenu id="apdcCode"
value="#{studentDetails.apdcCode}"
required="true"
requiredMessage="Please choose a decision code.">
<f:selectItem itemLabel="Select Decision Code"/>
<f:selectItems value="#{apdcCodes.apdcCodeList}"
var="apdc"
itemValue="#{apdc.apdcCode}"
itemLabel="#{apdc.apdcCode} - #{apdc.apdcDesc}"/>
</h:selectOneMenu>
<h:selectOneMenu id="admtCode"
value="#{studentDetails.admtCode}"
required="#{studentdetailsform.decisionAction == 'A'}"
requiredMessage="Please choose an admit code."
rendered="#{studentdetailsform.decisionAction == 'A'}">
<f:selectItem itemLabel="Select Admit Code"/>
<f:selectItems value="#{admtCodes.admtCodeList}"
var="admt"
itemValue="#{admt.admtCode}}"
itemLabel="#{admt.admtCode} - #{admt.admtDesc}"/>
</h:selectOneMenu>
<h:selectOneMenu id="wrsnCode"
value="#{studentDetails.wrsnCode}"
required="#{studentdetailsform.decisionAction == 'C'}"
requiredMessage="Please choose a reason code."
rendered="#{studentdetailsform.decisionAction == 'C'}">
<f:selectItem itemLabel="Select Reason Code"/>
<f:selectItems value="#{wrsnCodes.wrsnCodeList}"
var="wrsn"
itemValue="#{wrsn.wrsnCode}"
itemLabel="#{wrsn.wrsnCode} - #{wrsn.wrsnDesc}"/>
</h:selectOneMenu>
<p:commandButton id="decisionSubmit"
value="Submit Decision"
type="submit"
action="#{mainform.saveDecision}"
ajax="true"
partialSubmit="true"
process="#form"
update="#form msgDlgDecision"
oncomplete="if (!args.validationFailed) dialogDecision.hide()"/>
</h:panelGrid>
</h:form>
</p:dialog>
Some things I have already done in my debugging and troubleshooting:
- Moved the h:form into the p:dialog
- Made the backing bean with the values for the rendered attribute on the required fields ViewScoped (was having an issue with only some of the required messages showing, this resolved this problem)
- Added appendToBody="true" to p:dialog
- Added if (!args.validationFailed) to the oncomplete event of p:dialog
- Tried making the required fields NOT conditional (removed rendered attributes) to be sure this wasn't being caused by failed validation on non-rendered components (grasping at straws...)
EDIT: Here is a console dump from Chrome. Javascript error gets thrown when submitting the form with null required fields.
Uncaught SyntaxError: Unexpected token { jquery.js:14
bG.extend.parseJSON jquery.js:14
PrimeFaces.ajax.AjaxUtils.handleResponse primefaces.js:1
PrimeFaces.ajax.AjaxResponse primefaces.js:1
j.success primefaces.js:1
bZ jquery.js:14
b7.fireWith jquery.js:14
ca jquery.js:21
bZ
EDIT 2: Below are the only two JavaScript imports, both of which are in my template that is applied to the page via the ui:define and ui:composition mentioned above.
<h:outputScript library="primefaces" name="jquery/jquery.js" />
<script type="text/javascript" src="#{request.contextPath}/resources/scripts/jscript.js" />
The first import will force Primefaces to import jQuery into the page, even if there are no components on the page that utilize JavaScript. This is to allow my custom scripts in jscript.js to use jQuery reliably.
Other information:
JSF 2.1
Primefaces 3.4.2
Tomcat 6.0
Don't import jQuery.js manually as this is already done implicitly by PrimeFaces (it uses jQuery under the hood). You can remove that line.
Also you should see some examples of importing your custom js files with h:outputScript like this for example:
<h:outputScript library="scripts" name="jscript.js" />
but this is probably not reason of your problem, this is just hint for better JSF design.
A similar error showed up in Google Chrome, today, after I downloaded PrimeFaces 4.0 snapshot (2013-05-09) and tested my app.
Basically, I had to remove single quotes from data sent from bean to p:schedule via JSON. Since the error mentioned 'parse JSON' and "unexpected '" (unexpected single quote), I went to the datatable view of my data (instead of p:schedule) and recognized that some of the data had single quotes embedded. So, I removed the single quotes from the data, and that solved the issue for me.
Please click forum topic URL below.
PF 4.0 SNAPSHOT 2013-05-09: schedule not working
I've had the exact same problem at my application. The real problem was a duplicate jar problem.
I've had two primefaces jar in my application, one under the WEB-INF/lib directory, and the other under the ear/lib directory. Once I deleted the one under the WEB-INF, everything started to work as expected.
You could find the solution on the net via a search for the js exception.
Just saw a lot of questions envolving "update", "#all", "#form", but no one solved a situation here in my application.
I got a custom JSF tag called threadList with:
<h:form>
<h:panelGroup>
<p:commandButton action="#{Bean.action(catId, id)}" icon="ui-icon-weblibrary ui-icon-weblibrary-like" title="Start" update="#form" value="#{Bean.threadName}" />
</h:panelGroup>
</h:form>
This custom tag is inserted by another custom tag like this:
<ui:repeat value="#{Bean.threadList}" var="thread">
<ui:include src="threadList.xhtml">
<ui:param name="catId" value="..." />
<ui:param name="id" value="..." />
</ui:include>
</ui:repeat>
Sometimes this can be a result of an update in the second taglib and via ajax.
And here's the thing...
When I set update="#form" in the p:commandButton everything works fine but in my log I see a "Cannot find component with identifier "j_idt70:0:j_idt82" in view.";
When I set update=":#form" or update=":form" the "Cannot find component with identifier "j_idt70:0:j_idt82" in view." disappears, but the event doesn't update anything (even if the action runs with success);
Finally, when I give form and panelGroup an id and try update=":formId:panelId" or update=":#formId:panelId" or update=":formId" the message "Cannot find component with identifier "j_idt70:0:j_idt82" in view." appears and nothing is uptade.
The curious is that there's no in browser's source code. So, I don't know if this "ghost" j_idt70 is corrupting all the ids and update commands.
I tried all the things I learned in old questions in stack overflow before asking you again about this.
Thanks a lot for reading and the attention.
The code given so far works just fine for me on Mojarra 2.1.9 and PrimeFaces 3.3.
If you upgrade to the latest versions as well, then your problem should most likely be solved.
I am currently displaying a ticket number like so.
<h:outputText value="#{ticket.ticketNumber}" />
Instead of this I want a hyper-link to a URL.
The address will look similar to this: http://testserver.com/viewer.jsp?ticket=#{ticket.ticketNumber}
So, the new code might look something like this (note the code below doesn't work, just a concept).
<a4j:commandLink action="http://testserver.com/viewer.jsp?ticket=#{ticket.ticketNumber}"
value="#{ticket.ticketNumber}" />
command* controls are generally UICommand instances - for invoking server-side logic. Use an outputLink:
<h:outputLink
value="http://testserver.com/viewer.jsp?ticket=#{ticket.ticketNumber}">
<h:outputText value="#{ticket.ticketNumber}" />
</h:outputLink>