Board index JavaServer Faces General p:ajaxStatus and h:commandButton

p:ajaxStatus and h:commandButton

Components, Ajax Framework, Utilities and More.


Posts: 11
Hi all,

First excellent job to the Primefaces team on this library. I often find the function needed and the use is simple.

I now need to print an ajaxstatus when making an action. As Shown in the showcase this code works perfectly with p:commandButtons.

<p:ajaxStatus onstart="statusDialog.show();" oncomplete="statusDialog.hide();" />
<p:dialog modal="true" widgetVar="statusDialog" header="Processing" draggable="false" close="false" style="width:250px;height:20px;">
<p:graphicImage value="/resources/images/ajaxloadingbar.gif" />
</p:dialog>

However, i've never managed to use p:commandButtons to navigation. So i use classic h:commandButtons for navigation.

<h:commandButton action="doSomeAction_action" value="someAction" />
correspond to
public String doSomeAction_action() {
//some code
return "/pages/nextPage.xhtml";
}

<p:commandButton actionListener="doSomeAjaxAction" value="someAjaxAction" />
corresponds to
public void doSomeAjaxAction_action(javax.faces.event.ActionEvent e){
//Some code without navigation to nextpage
}

So has i said i never managed to navigate with p:commandButtons. However thay extends "classic" commandButton. Am i making something wrong ?

The resulting problem is that i can't use this statusbar on my navigation buttons. And some of them have very long process time (functional complexity). So the user has no informations about the progress and sometimes clicks again.

So to sum up have 2 questions :
1. Is it possible to navigate with p:commandButtons. If yes, the second question has no use. If not :
2. how can i have the same feature (ajaxstatusbar) on h:commandButtons ?

Hope i"ve been clear enough.

Thanks to all for your time and answers.
Primefaces 2.2.1 / Mojarra 2.1.0
Tomcat 6.0.33
Using JDK 1.6.0_27-b07
Coding on Netbeans 7.0.1


Posts: 14905
Location: Cybertron

It depends on your environment, please take a moment to read;

viewtopic.php?f=3&t=1194
PrimeFaces Lead


Posts: 11
You're right i'am sorry. In my signature you'll find those useful informations.

Thanks for your help and time.
Primefaces 2.2.1 / Mojarra 2.1.0
Tomcat 6.0.33
Using JDK 1.6.0_27-b07
Coding on Netbeans 7.0.1


Posts: 66
ha! to answer faster than optimus ... :D

PF 2.1 has its own JS api and PF ajaxstatus shows only PF ajax calls. This changed (will change) in PF 2.2

So, your h:commandButton uses standard-jsf ajax api calls and p:ajaxStatus won't be called. However you can implement your own ajaxstatus. Here is an example from one of my projects:

<div id="ajaxStatus" style="display: none;"><h:graphicImage name="images/loading_big.gif" style="position: fixed; left: 470px; top: 135px; z-index: 99;" /></div>
   <script type="text/javascript">
      function ajaxStatusUpdate(data) {
         if (data.status=='begin') {
            jQuery("#ajaxStatus").css("display", "block");
         } else if (data.status == 'complete') {
            jQuery("#ajaxStatus").css("display", "none");
         } else if (data.status == 'success') {
            //do something after every ajax call;

         }
      }
   </script>


You have to add the function call to all of your f:ajax elements too:

<f:ajax render=":wbm-tabelle:rechnungTabelle :pagination" event="valueChange" onevent="ajaxStatusUpdate" />


Posts: 11
Hello,

Your code works and is quit like one thing i've tested but unfortunately it does not fill exactly the need which is that no button shall be pressed while processing an action.

However, you code gave me this idea :

1. Declaring this somewhere in the page
<p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>
<p:dialog modal="true" widgetVar="statusDialog" header="Please wait : processing" draggable="false" closable="false" resizable="false" width="290" height="80" position="center">
<p:graphicImage value="/resources/images/ajaxloadingbar.gif" width="255" />
</p:dialog>
2. Using like this for primefaces buttons (normal way to proceed)
<p:commandButton actionListener="#{productController.createProductAjaxP_action}" value="Create product Ajax P"/>
3. Using like this for classic jsf buttons (inspired by your code)
<h:commandButton action="#{productController.createProductAjaxE_action}" value="Create product Ajax H">
<f:ajax event="action" onevent="statusDialog.show()" />
</h:commandButton>

So this works thanks to you !
Also thanks to Optimus for his answer which made me modify me signature !

Have fun
Primefaces 2.2.1 / Mojarra 2.1.0
Tomcat 6.0.33
Using JDK 1.6.0_27-b07
Coding on Netbeans 7.0.1


Posts: 66
You could also disable all buttons with a jquery one-liner in my js function when ajax calls begins, something like this:

jQuery("input[type=submit]").attr("disabled", "true")

(untested, out of my head)

This would disable all submit-buttons on your page. If ajax calls ends you would need to enable them of course.

oh and f:ajax expects in its event attribut a JS DOM event name. "action" is no DOM event, look here: http://en.wikipedia.org/wiki/DOM_events. You don't need to specify the event though, as there is a standard event according to its parent component, in case of commandButton its "click".


Return to General