I have an accordion panel with tabs containing name of students. I select on one of the tab and choose edit. I am calling a tab change listener and getting student object and trying to edit it works fine.
But My problem is when for the first time Accordion loads, even though I select on the tab,and click on edit, I will get not get student object. Its giving me null pointer exception. since Tab change event does not get called for the first time it loads. How do I solve this?
private StudBean formBean;
public StudBean getFormBean() {
if(formBean==null){
formBean= new StudBean();
}
return formBean;
}
public void onTabChange(TabChangeEvent event) {
formBean = (StudBean) event.getData();
}
public String edit(){
formBean = testDelegate.getDetails(formBean.getName(),formBean.getId());
return "/ui/EditStudent?faces-redirect=true";
}
<p:commandButton process="#this" value="edit" action="#{testBean.edit}" >
<p:accordionPanel value="#{testBean.students}" var="stud">
<p:ajax event="tabChange" listener="#{testBean.onTabChange}" immediate="true"/>
<p:tab title="#{stud.name}">
Related
I have two radio buttons on JSF2/PrimeFaces page, which I need to enable/disable an inputText field depending on the choice.
<h:form prependId="false">
<p:panelGrid id="notif">
<p:row id="notif1">
<p:column>
<h:outputText value="label" />
</p:column>
<p:column>
<p:selectOneRadio id="radiobuttons" value="#{state.radioStatus}" layout="pageDirection">
<f:selectItem itemLabel="enable" itemValue="enable" />
<f:selectItem itemLabel="disable" itemValue="disable" />
<p:ajax update="date" />
</p:selectOneRadio>
</p:column>
<p:column>
<p:inputText id="date" value="#{state.infoDate}" disabled="#{!state.checkStatus}" >
</p:inputText>
<p:inputText id="test" value="#{state.infoDateTest}">
</p:inputText>
</p:column>
</p:row>
</p:panelGrid>
</h:form>
Also this all is inside a tab, but there is no nested forms when checked the generated html. The fields seem to get the id of the tab, but they seem to be correct like this (Did not work when tried to use id notation 'tabView:date' for the ajax.)
The problem is that when entering the page, the 'actual' text field is disabled by default and should be enabled when the radio button is set to enable it. When the radio button status is updated, I can see the event is registered on the server side and the inputText field gets "visually" enabled (by default it is disabled as supposed to). However the field is not "focusable" after enabling it, so can't write to it.
The more bizarre it gets when I added the 'test' inputText field, which does not get it self enabled/disabled regarding to radio buttons. On a fresh page load you can write to it, but after changing the radio button status, it is not writable anymore (the text that was entered prior to ajax call, will remain, but is not editable).
However the radio buttons continue to work and will fire events on the server side.
Could someone point out what I may be doing incorrectly, or could this be a bug with PrimeFaces?
// Update
Like said, the managed bean works as supposed to, so I don't see any problems there, but here is the code (simplified and renamed for readability as the relevant parts are taken from a bigger context).
#ManagedBean(name = "state")
#SessionScoped
public class ExampleBean implements Serializable {
private static final String disable = "disable";
private static final String enable = "enable";
private String text;
private List<TestRow> rows = null;
private TestRow row = null;
private String radioStatus = "enable";
private String infoDate = "";
private String infoDateTest = "";
#PostConstruct
public void initEmpty() {
}
public String getRadioStatus() {
return this.radioStatus;
}
public void setRadioStatus(String radioStatus) {
this.radioStatus = radioStatus;
}
public String getInfoDate() {
return infoDate;
}
public void setInfoDate(String infoDate) {
this.infoDate = infoDate;
}
public String getInfoDateTest() {
return infoDateTest;
}
public void setInfoDateTest(String infoDateTest) {
this.infoDateTest = infoDateTest;
}
public boolean isCheckStatus() {
return this.radioStatus.equalsIgnoreCase(enable) ? true : false;
}
}
Unfortunately I was not able to figure out what is causing the actual problem. The basic thing seems to be that the inherited javascript (primefaces) is not working properly on this page (maybe because of some other js inherited). Finally I just made it a custom enable/disable js-function:
js.toggleDisableStatus = function(elementId) {
// Can't use jQuery $("#xx:yy"), the syntax is not accepted by jquery but
// used by JSF/PrimeFaces
var element = document.getElementById(elementId);
var attrValue = element.getAttribute('disabled');
if (attrValue === undefined || attrValue == null) {
element.disabled = true;
element.style.background = "#dddddd";
} else {
element.removeAttribute('disabled');
element.style.background = "";
}
};
This may be flawed but works for now. The radio buttons are selected by the persisted status (loaded in state) and the enable/disable state for the input-field is also set when initially loading the page. Generally I think this should work for this particular case.
<p:tabView widgetVar="addSystemWizard" style="width:980px;height:400px;" dynamic="true" activeIndex="#{testBean.messagesTab.activeIndex}" >
<p:ajax event="tabChange" listener="#{testBean.onTabChange}" update=":tabview:sysMsg"/>
<p:tab id="generalInfo" title="1. General Information"> `enter code here`
private TabView messagesTab;
public TabView getMessagesTab () {
if(messagesTab==null){
messagesTab= new TabView();
}
return messagesTab;
}
public void setMessagesTab(TabView messagesTab ) {
this.messagesTab = messagesTab;
}
public void onTabChange(TabChangeEvent event){
if(test.getName()==null || test.getName().equals("")){
FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_ERROR, event.getTab().getId() ,"please enter all required fields");
FacesContext.getCurrentInstance().addMessage(null, msg);
int idx=0;
messagesTab= (TabView) event.getComponent();
messagesTab.setActiveIndex(idx);
}
}
I am calling a tabchange event on tabview, I have name attribute im my page,if that attribute is blank or null I have to stay on same tab, otherwise I ahve to go next tab, basically performing validation.. I have posted the above code to do that, but its not working!
I found this blog post that describes how to use a p:remoteCommand and javascript to accomplish this.
Trying various approaches to the question above (with p:ajax event="tabChange" and so on), I came up with a clean and well working solution. The code below turns on the PrimeFaces TabView into a "wizard mode". That means, the user stays on the same tab when he / she is trying to switch tabs and has validation errors within the current tab. The main idea is to use p:remoteCommand for a deferred decision about tab switching. If no validation errors were present, the switching occurs by the TabView widget's method select.
XHTML:
<p:tabView ... widgetVar="tv_widget" styleClass="tv_selector">
...
</p:tabView>
<p:remoteCommand name="tv_remoteCommand" process="#(.tv_selector)" update="#(.tv_selector)" global="false"
oncomplete="handleTabChangeTV(xhr, status, args, tv_widget)"/>
<h:panelGroup id="tv_script" styleClass="tv_selector">
<script type="text/javascript">
$(function(){
bindOnClickTV(tv_remoteCommand, tv_widget);
});
</script>
</h:panelGroup>
Javascript:
function bindOnClickTV(rc, widget) {
// unbind PrimeFaces click handler and bind our own
widget.jq.find('.ui-tabs-nav > li').unbind('click.tabview').
off('click.custom-tabview').on('click.custom-tabview', function (e) {
var element = $(this);
if ($(e.target).is(':not(.ui-icon-close)')) {
var index = element.index();
if (!element.hasClass('ui-state-disabled') && index != widget.cfg.selected) {
// buffer clicked tab
widget.clickedTab = element.index();
// call remote command
rc();
}
}
e.preventDefault();
});
}
function handleTabChangeTV(xhr, status, args, widget) {
if (!args.validationFailed) {
widget.select(widget.clickedTab);
}
}
I have an application using PrettyFaces and PrimeFaces. One page is accessed using the URL pattern /#{ location : navigationBean.location }/#{ year : navigationBean.year }.
On that page I have a p:selectOneMenu containing possible values for location. If I change this menu I want the page to be refreshed with the same year and the new location.
I've tested this using AJAX to set the location in the navigationBean and then pressing a p:commandButton with the outcome pretty:view (view being the url-mapping id). This works but I want to get rid of the button.
I've tried the following, but sadly the return String in the method doesn't perform a navigation.
The JSF:
<p:selectOneMenu value="#{navigationBean.location}">
<p:ajax listener="#{navigationBean.navigate}"/>
<f:selectItems value="#{locationBean.locations}"/>
</p:selectOneMenu>
Backing bean:
public String navigate(AjaxBehaviorEvent event)
{
return (location != null) ? "pretty:view" : null;
}
The PrettyFaces config:
<url-mapping id="view">
<pattern value="/#{ location : navigationBean.location }/#{ /\\d{4}/ year : navigationBean.year }/"/>
<view-id value="/view.xhtml"/>
</url-mapping>
You can't return a navigation outcome from (ajax) action listeners. You can only return it from real action methods as used in <h:commandButton action>.
Use NavigationHandler#handleNavigation() instead.
public void navigate() {
FacesContext context = FacesContext.getCurrentInstance();
context.getApplication().getNavigationHandler()
.handleNavigation(context, null, (location != null) ? "pretty:view" : null);
}
I'm using a datalist with Ajax pagination and the first page loads fine, showing 5 results. It knows I've got 3 pages worth of results, but when I click through to the second/third pages, I get an empty list.
My model extends LazyDataModel and the first time my page loads, I can set a breakpoint on the load() method and I can see it's asking for results 1-5 which is great. But clicking on 'page 2' doesn't result in another call to the load method (although it does result in about 3 calls to my lazyDataModel field itself (just not the load method inside it).
New to this and despite reading a lot and trying out various things, I can't understand quite how it should work. The showcase example doesn't seem quite 'complete' to me.
Here's the most relevant bits of my code (I think). Sorry about the formatting:
#PostConstruct
public void LoadData() {
lazyModel = new LazyDataModel<MessageboardThread>() {
#Override
public List<MessageboardThread> load(int first, int pageSize, String sortField, SortOrder so, Map<String, String> map) {
List<MessageboardThread> result = new ArrayList<MessageboardThread>();
try {
result = mbDao.findAll(pageSize, first);
} catch (Exception ex) {
ex.printStackTrace();
}
return result;
}
};
getLazyModel().setRowCount(mbDao.count());
getLazyModel().setPageSize(pageSize);
}
This method DOES get executed every time I click on next/prev page
/**
* #return the lazyModel
*/
public LazyDataModel getLazyModel() {
return lazyModel;
}
And this is my xhtml file
<p:dataList value="#{messageboardBean.lazyModel}" var="thread" id="threads"
paginator="true" rows="5" effectSpeed="fast"
paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15" type="none"
paginatorPosition="bottom">
<f:facet name="header">
Conversations
</f:facet>
<p:column>
<h:outputText value="#{thread.title}" style="margin-left:10px" />
<br />
</p:column>
</p:dataList>
I'm stumped so really grateful for any help
PS I put a #PostContruct annotation there because it seemed to be a good place to do the setup but it could be wrong, I haven't seen it on any other examples, but then I couldn't get any other examples to work either.
Solved it. I forgot to wrap the dataList attribute in an h:form tag. It works fine now.
i'm really new to jsf.
I need to enable,disable, render or not render some buttons on a page depending on the logged user privileges. The page is bound to a request scoped managed bean , i bind the rendered or disabled attribute of the commandbutton to a "visible" property of the managed bean, and an actionlistener to a managedbean method which has the only purpose to navigate to another page.
If i bind one of the above properties to the visibile property, the navigation method doesn't get called, and the same page gets rerendered with the button disabled or not rendered.
The more urget need is the answer to "how do i disable or hide the button?" of course,
But , since i guess the problem is due to jsf page life cycle and the bean scope, i'd like also to be direct to some tutorial a bit more advanced than the hello world that can be found around.
below are part of the code.
Thank you in advance for any help
the xhtml page
<ui:define name="content">
<p:layoutUnit position="center" header="Dettaglio Pratica" scrollable="true">
<h:form id="formDettaglioPratica">
<!-- i've used javascript to redirect -->
<p:commandButton styleClass="commandButton" value="Modifica pratica" ajax="false"
rendered="#{praticaCtrl.visible}" onclick="navigateToChange();return false;"/>
<p:commandButton id="backButton" styleClass="commandButton" value="Torna alla lista"
onclick="navigateToHome();return false;"></p:commandButton>
<!-- never redirect to page defined in method checkIn -->
<p:commandButton id="checkinButton" styleClass="commandButton" value="Rilascia pratica" ajax="false"
actionListener="#{praticaCtrl.checkIn}" disabled="#{praticaCtrl.visible}"></p:commandButton>
<!-- printing output values -->
<h:inputHidden id="idPratica" value="#{praticaCtrl.idPratica}"></h:inputHidden>
<h:inputHidden id="idBox" value="#{praticaCtrl.box}"></h:inputHidden>
</h:form>
</p:layoutUnit>
</ui:define>
the relevant part of the managed bean
public boolean isVisible() {
return isVisible;
}
public void setVisible(boolean isVisible) {
this.isVisible = isVisible;
}
public void setUser(IUserProvider user) {
try{
if(pratica.getUtenteCheckOut() == null
|| (pratica.getUtenteCheckOut().getMatricola().equalsIgnoreCase(user.getUser().getMatricola()))
)
setVisible(true);
else
setVisible(false);
this.user = user;
}
catch(Exception ex)
{log.error(ex);}
}
public void checkIn(ActionEvent event)
{
try{
log.info(String.format("modifica della pratica %s", idPratica));
ajaxRedirect(String.format("../Box/ListaRichieste.xhtml?box=%s",box));
}
catch(Exception ex)
{
log.error(ex.getMessage(),ex);
}
}
this is the ajaxRedirect method,we don't use the navigation rules neither methods return string
protected void ajaxRedirect(String url) throws IOException {
FacesContext.getCurrentInstance().getExternalContext()
.redirect(url);
}
the answer for the described behaviour can be found at : http://forum.primefaces.org/viewtopic.php?f=3&t=13269&p=39996 ,which refers a BalusC answer on a similar question on stackoverflow : commandButton/commandLink/ajax action/listener method not invoked or input value not updated