p:commandButton not working inside a p:dataGrid

If you are having a trouble with p:commandButton that is not working inside a p:dataGrid, make sure you have a p:column as a child for the p:panelGrid as follows:

<p:panelGrid .. >

<p:column>
...
<p:commandButton ... />
...
</p:column>
</p:panelGrid>

if you forget the p:column, the button event is not executed.

Better ajax operations and callbacks in JSF with PrimeFaces

One of the nicest feature of PrimeFaces is you can add some parameters to your ajax calls ( callbacks ) and can decide on what to update while executing your actions on your managed beans.

Think of following common scenario, we want to create a new user object with a dialog and show it in a datatable when user clicks on save button and do all these stuff with Ajax. Let’s think you as a developer want to do this using a p:dialog as follows:

<p:dialog  widgetVar="userFormDialog" >

   <p:outputPanel id="editDialog">
      <h:panelGrid>
         <h:outputLabel for="userName" value="Username" />
         <p:inputText id="userName"  
                        value="#{userManagementBean.user.username}" />
					
         <h:outputLabel for="password" value="Password"/>
         <p:inputText autocomplete="false" id="password"
                       value="#{userManagementBean.user.password}"/>
									
      </h:panelGrid>
   </p:outputPanel>

   <p:commandButton value="Save!" 
                       actionListener="#{userManagementBean.save}"
                       process="editDialog" update="userTable messages" 
                       oncomplete="userFormDialog.hide();"/>
</p:dialog>
                  
<p:messages id="messages"/>

<p:outputPanel id="userTable">
      <p:dataTable value="#{userManagementBean.all}" var="user" >
	<p:column>
          <f:facet name="header">Username</f:facet>
          #{user.username}
	</p:column>
     </p:datatable>
</p:outputPanel>

so what this code does it, when user clicks on save, the dialog should be closed, a message should be shown for successful creating and the p:datatable which shows all the users should be updated.

what happens if user just clicks save button w/o entering any data? what happens if the userName that the user entered is already in the database and saving the new one fails? what happens if there is a pb somewhere? When something unusual occurs, the dialog should stay opened and a message should be shown to the user right? This is the situation where PrimeFaces useful RequestContext API becomes handy.

RequestContext API enables developers to do 2 simple things. 1st you can tell what you want to update in the xhtml based on conditions in actions that you define in your Managed Beans.To update a component from serverside, you can just write:

RequestContext.getCurrentInstance().
              addPartialUpdateTarget("my_component_id");

so when the Ajax request is finished, the component with the id ‘my_component_id’ will be also updated. 2nd you can send parameters to your xhtml so that you can use these values in your javascript code. To pass an object you can use the following code :

RequestContext.getCurrentInstance().addCallbackParam("user", user);

as you can pass objects here, you can access them in your javascript methods in the client side.

So let’s define the requirement more precisely and try to implement it. We want to open a dialog when we want to create a new user for the system, the username and password are required fields and when user does not enter any data to these fields and click save, the dialog should stay visible and messages shown inside the dialog. Also for performance wise, if there is a validation pb, we should not update the datatable but update messages only. if the save is successful, then messages and datatable component should be updated and user should be notified by a message and alert. So our xhtml code will be something like this :

<p:dialog  widgetVar="userFormDialog" >

   <p:outputPanel id="editDialog">
      <h:panelGrid>
         <h:outputLabel for="userName" value="Username" />
         <p:inputText id="userName" value="#{userManagementBean.user.username}"  
                               required="true"/>
          <p:message for="userName"/>
					
         <h:outputLabel for="password" value="Password"/>
         <p:inputText autocomplete="false" id="password" value="#{userManagementBean.user.password}"/>
         <p:message for="password"/>
							
      </h:panelGrid>
   </p:outputPanel>

   <p:commandButton value="Save!" actionListener="#{userManagementBean.save}" process="editDialog"
				oncomplete="handleSaveRequest(xhr, status, args)"/>
</p:dialog>

<h:outputScript target="head">
      function handleSaveRequest(xhr, status, args) {  
           if( args.notValid || args.validationFailed )  
              return;
           userFormDialog.hide();  
           alert('User with username ' +args.user.username+ ' is saved successfully');
   }  
</h:outputScript>
                  
<p:messages id="messages"/>

<p:outputPanel id="userTable">
	<p:dataTable value="#{userManagementBean.all}" var="user" >
		<p:column>
		 <f:facet name="header">#{lbl['username']}</f:facet>
					#{user.username}
		</p:column>
	</p:datatable>
</p:outputPanel>

as you can see here at line 18, we defined a new js method to handle the response from the server. In this method ( starting at line 22 ) we check whether there is a validation error ( args.validationFailed is default set to true by PrimeFaces API ) or we had an error and send a parameter ( args.valid is set to true on server side with backing bean ). We also notified the user with an alert box and tell the user that a new user object is saved successfully by writing the username in the message. RequestContext API allows you to pass objects to js side with serializing them as JSON.

our backing bean will be like this :

@ViewScoped
@ManagedBean
public class UserManagementBean{
	private User user = new User();
	private List<User> users;

	public void save() {
		try{
			// some service to save user
 			// userService.save(user);
			addMessage( "User is Saved!");
			RequestContext.getCurrentInstance().
					addCallbackParam("user", user);
 			RequestContext.getCurrentInstance().
					addPartialUpdateTarget("userTable");
		}catch (SomeException e) {
			RequestContext.getCurrentInstance().
					addCallbackParam("notValid", true);
			addErrorMessage("Problem Occured!");
		}
		RequestContext.getCurrentInstance().
					addPartialUpdateTarget("messages");
	}

	public List<User> getAll() {
		return users;
	}

        // getter setter
}

As you can see that RequestContext API enables developers to decide on what to update and send parameter in Ajax request easily. You can do easier testing with RequestContext API as you can test whether the parameters and partial update request are done when there is an exception occurs or save operation is successful.

Starting a new project with Agile v1

Hi,

we just started working on a new project with a client which is re-implementing the client’s current e-commerce page with Java which is currently written on asp. We will be using Agile Methodologies to implement the project with the help of . In our first meeting with the client, we first tried to get the user stories from the clientand tried to identify the roles. What we tried to do is, creating user stories and doing some estimations on them. This way we tried to estimate how long the project may take to implement and informed the client about this estimation.

What we will do next is meet with client again, prioritize the stories and do a release and iteration plan to start the project and start with iteration 0.

We will be using PrimeFaces 3.0 – JSF 2.0 – Spring 3.0 – Hibernate 3.6 and will be doing it Agile as time will be a important aspect side of the project.

I will be posting images/status of the project next days hopefully.

client side datatable pagination in jsf

Hi,

if  you want to add simple client side pagination to a datatable in JSF, it is very simple to do so.

suppose you have this regular h:datatable in your page:

<h:dataTable id="datatable" var="item" value="#{someBean.all}">

<h:column>
<f:facet name="header">
<h:outputText value="my header"/>
</f:facet>
<h:outputText value="#{item.someField}" escape="true"/>
</h:column>

</h:datatable>

just use jQuery and use this plugin: http://neoalchemy.org/tablePagination.html

include the plugins and jQuery’s js in your page and just add this to your page:

jQuery(document).ready(function() {
jQuery('#datatable').tablePagination();
});

and that is all. It works for 1.2 and 2.0.

btw this thing is useful if you are not using PrimeFaces. PrimeFaces ease your custom needs very quickly. this solution is for a situation where you cannot use PrimeFaces some how.

Object doesn’t support this property or method datatable

Hi,

if you have “Object doesn’t support this property or method” error when using primefaces datatable in Internet Explorer, it is quite likely that you assign the same name for id and widgetVar for the datatable like:

<p:dataTable id=”documents” widgetVar=”documents”

so if you change one them like widgetVar to “documentsVar” it will be fixed.

Firefox does not have this problem btw.

Force users to enter only digits in JSF

Hi,

if you want to force user to enter only digits while entering a numeric data like age, amount etc. you can use PrimeFaces’ inputMask component as follows:

<p:inputMask id="age" label="Age" value="#{bean.age} placeHolder=" " mask="?99"/>

This component with ?99 mask forces users to enter ages from 0 to 99

Easy, huh?

You can see other possible masked inputs from here : http://primefaces.org:8080/prime-showcase/ui/inputMask.jsf