a4j:support .. action attributes

[dcosio]

I'm new to a4j and richfaces.. Im trying to use the support tag within a selectOneMenu to determine if I need display anothe part of the page.. Here is the code
################### code with support ###########
<h:panelGrid columns="1" styleClass="selectStyle">
<h:outputText styleClass= "pgItem" value="Select a Query"></h:outputText>
<h:selectOneListbox binding="#{reportsBean.selectedQuery}" value="#{reportsBean.query}" styleClass="pgDropDown" size="10" id="querySelect" required="true">
<a4j:support event="onclick" reRender="renderDates" ajaxSingle="false" actionListener="#{reportsBean.processSelectedQuery}" immediate="true"/>
<f:selectItems value="#{reportsBean.queries}"/></h:selectOneListbox>
</h:panelGrid>

############# code to be "turned on" based on select ######
<rich:panel id="datePanel" style="background:#F0F0F0;border:none;border-width:0">
<a4j:outputPanel layout="none">
<rich:panel id="renderDates" rendered="#{reportsBean.datesDisplayed }">

<h:panelGrid columns="2" style="border:none">
<h:panelGrid columns="1" styleClass="selectStyle">
<f:facet name="header">Start Date</f:facet>
<t:inputCalendar id="fDate" monthYearRowClass="yearMonthHeader" weekRowClass="weekHeader"
popupButtonStyleClass="standard_bold" currentDayCellClass="currentDayCell" value="#{reportsBean.fromDate}"
renderAsPopup="true" popupTodayString="Today" popupDateFormat="MM/dd/yyyy"
popupWeekString="Week" helpText="MM/DD/YYYY"/>
</h:panelGrid>

so my reportsBean.processSelectQuery show check to see if the "datePanel" should be displayed.. Using the actionListener doesn't seem to be correct since it doesn't take an AjaxEvent..

I was thinking I may need to wrap the date panel within a region and have the support trigger the region and the region trigger the datepanel..

thx

[sergeysmirnov]

"dcosio" wrote:

I was thinking I may need to wrap the date panel within a region and have the support trigger the region and the region trigger the datepanel..

I guess, you just misunderstood the purpose of a4j:region. Do not do it.

What are the special reason you have ajaxSingle="false" and immediate="true" ?
If you add <a4j:outputPanel ajaxRendered="true"><h:messages/></a4j:outputPanel> somewhere on the page, does it show something when you select from the list?

[dcosio]

I was using ajaxSingle="false" because I thought I saw a post that this should be set to false when using Select Menus. I set immediate="true" just because I was trying anything to see if it affected behavior..

I added the message(and logging).
I got a "Validation Error" ... for what I don't know.. This code works fine without the a4j stuff..

The log shows this.
debug[11:49:50,192]: Have Event [object Object] with properties: target: [object HTMLOptionElement], srcElement: undefined, type: click
debug[11:49:50,192]: NEW AJAX REQUEST !!! with form :_idJsp0
debug[11:49:50,192]: Append select-one control _idJsp0:querySelect with value [ACTIVETIMEFRAME] and value attribute [null]
debug[11:49:50,192]: Append hidden control _idJsp0_SUBMIT with value [1] and value attribute [1]
debug[11:49:50,192]: Append hidden control javax.faces.ViewState with value [rO0ABXVyABNbTGphdmEubGFuZy5PYmplY3Q7kM5YnxBzKWwCAAB4cAAAAAN0AAEzcHQAHC9wYWdlcy9nZW51bmV0UmVwb3J0TWFpbi5qc3A=] and value attribute [rO0ABXVyABNbTGphdmEubGFuZy5PYmplY3Q7kM5YnxBzKWwCAAB4cAAAAAN0AAEzcHQAHC9wYWdlcy9nZW51bmV0UmVwb3J0TWFpbi5qc3A=]
debug[11:49:50,192]: parameter _idJsp0:_idJsp7 with value _idJsp0:_idJsp7
debug[11:49:50,192]: Start XmlHttpRequest
debug[11:49:50,208]: Reqest state : 1
debug[11:49:50,208]: QueryString: AJAXREQUEST=_viewRoot&_idJsp0%3AquerySelect=ACTIVETIMEFRAME&_idJsp0_SUBMIT=1&javax.faces.ViewState=rO0ABXVyABNbTGphdmEubGFuZy5PYmplY3Q7kM5YnxBzKWwCAAB4cAAAAAN0AAEzcHQAHC9wYWdlcy9nZW51bmV0UmVwb3J0TWFpbi5qc3A%3D&_idJsp0%3A_idJsp7=_idJsp0%3A_idJsp7&
debug[11:49:50,208]: Reqest state : 1
debug[11:49:50,302]: Reqest state : 2
debug[11:49:50,302]: Reqest state : 3
debug[11:49:50,302]: Reqest state : 4
debug[11:49:50,302]: Reqest end with state 4
debug[11:49:50,302]: Response with content-type: text/xml;charset=UTF-8
debug[11:49:50,302]: Full response content: <?xml version="1.0"?> Validation Error<!-- MYFACES JAVASCRIPT -->
debug[11:49:50,302]: Update page by list of rendered areas from response _idJsp0:_idJsp16
debug[11:49:50,302]: search for elements by name 'script' in element #document
debug[11:49:50,302]: getElementsByTagName found 1
debug[11:49:50,317]: in response with src=/GenunetReports/faces/a4j.res/org.ajax4jsf.framework.ajax.AjaxScript
debug[11:49:50,317]: Such element exist in document
debug[11:49:50,317]: search for elements by name 'link' in element #document
debug[11:49:50,317]: getElementsByTagName found 1
debug[11:49:50,317]: in response with src=/GenunetReports/faces/a4j.res/css/panel.xcss/DATA/eAFbJaehBAADeAET
debug[11:49:50,317]: Such element exist in document
debug[11:49:50,317]: Attempt to update part of page for Id: _idJsp0:_idJsp16
debug[11:49:50,317]: call getElementById for id= _idJsp0:_idJsp16
debug[11:49:50,317]: Replace content of node by replaceChild()
debug[11:49:50,317]: search for elements by name 'script' in element span
debug[11:49:50,317]: getElementsByTagName found 0
debug[11:49:50,317]: Scripts in updated part count : 0
debug[11:49:50,317]: Update part of page for Id: _idJsp0:_idJsp16 successful
debug[11:49:50,317]: call getElementById for id= ajax-update-ids
debug[11:49:50,317]: Hidden JSF state fields: [object HTMLSpanElement]
debug[11:49:50,317]: Namespace for hidden view-state input fields is undefined
debug[11:49:50,317]: search for elements by name 'input' in element span
debug[11:49:50,317]: getElementsByTagName found 2
debug[11:49:50,333]: Replace value for inputs: 2 by new values: 2
debug[11:49:50,333]: Input in response: jsf_sequence
debug[11:49:50,333]: Input in response: javax.faces.ViewState
debug[11:49:50,333]: Found same input on page with type: hidden
debug[11:49:50,333]: search for elements by name 'INPUT' in element span
debug[11:49:50,333]: getElementsByTagName found 0
debug[11:49:50,333]: Replace value for inputs: 2 by new values: 0
debug[11:49:50,333]: call getElementById for id= _A4J.AJAX.focus
debug[11:49:50,333]: No focus information in response

[dcosio]

I made some changes to my backing bean and the jsf code. I changed the backing bean isDateDisplayed() to check to see what the query is and setting the true/false value accordingly.. this is triggered and works.. The problem Im having now is the date fields don't display.. It's seems like the form is being submitted and the page gets messed up..

I think Im using the support tag correctly now.

******************* Select pulldown*******************
<h:panelGrid columns="1" styleClass="selectStyle">
<h:outputText styleClass= "pgItem" value="Select a Query"></h:outputText>
<h:selectOneListbox binding="#{reportsBean.selectedQuery}" value="#{reportsBean.query}" styleClass="pgDropDown" size="10" id="querySelect" required="true">
<a4j:support event="onclick" reRender="renderDates"/>
<f:selectItems value="#{reportsBean.queries}"/></h:selectOneListbox>
</h:panelGrid>

******************* Date field *******************
<rich:panel id="datePanel" style="background:#F0F0F0;border:none;border-width:0">
<a4j:outputPanel layout="none">
<rich:panel id="renderDates" rendered="#{reportsBean.datesDisplayed }">

<h:panelGrid columns="2" style="border:none">
<h:panelGrid columns="1" styleClass="selectStyle">
<f:facet name="header">Start Date</f:facet>
<t:inputCalendar id="fDate" monthYearRowClass="yearMonthHeader" weekRowClass="weekHeader"
popupButtonStyleClass="standard_bold" currentDayCellClass="currentDayCell" value="#{reportsBean.fromDate}"
renderAsPopup="true" popupTodayString="Today" popupDateFormat="MM/dd/yyyy"
popupWeekString="Week" helpText="MM/DD/YYYY"/>
</h:panelGrid>

[ilya_shaikovsky]

It isn't allowed to update the components that depends on rendered attribute dynamically.

use please outputPanel component around the panel you need to update and reRender this panel.

[dcosio]

I found this post http://jboss.com/index.html?module=bb&op=viewtopic&t=110503 and duplicated it for my use.. But, It's causes the page to referesh.. If I can't have a backing bean reference for my rendered attribute then how to I show/hide the components.. Here is my jsf and backing bean code

<h:panelGrid columns="1" styleClass="selectStyle">
 <h:outputText styleClass= "pgItem" value="Select a Query"></h:outputText>
 <h:selectOneListbox binding="#{reportsBean.selectedQuery}" value="#{reportsBean.query}" valueChangeListener="#{reportsBean.queryListener}" immediate="true" styleClass="pgDropDown" size="10" id="querySelect" required="true">
 <a4j:support event="onchange" immediate="true" reRender="dateOuterPanel,dateInnerPanel"/>
 <f:selectItems value="#{reportsBean.queries}"/></h:selectOneListbox>
 </h:panelGrid>
 </h:panelGrid>

 <h:panelGrid columns="1">
 <a4j:outputPanel id="dateOuterPanel">
 <a4j:outputPanel layout="none">
 <a4j:outputPanel id="dateInnerPanel" rendered="#{reportsBean.datesDisplayed }">
 <h:panelGrid columns="2" style="border:none">
 <h:panelGrid columns="1" styleClass="selectStyle">
 <t:outputLabel for="fDate" value="Start Date" />
 <t:inputCalendar id="fDate" monthYearRowClass="yearMonthHeader" weekRowClass="weekHeader"
 popupButtonStyleClass="standard_bold" currentDayCellClass="currentDayCell" value="#{reportsBean.fromDate}"
 renderAsPopup="true" popupTodayString="Today" popupDateFormat="MM/dd/yyyy"
 popupWeekString="Week" helpText="MM/DD/YYYY"/>
 </h:panelGrid>

 <h:panelGrid columns="1" styleClass="selectStyle">
 <t:outputLabel for="tDate" value="End Date" />
 <t:inputCalendar id="tDate" monthYearRowClass="yearMonthHeader" weekRowClass="weekHeader"
 popupButtonStyleClass="standard_bold" currentDayCellClass="currentDayCell" value="#{reportsBean.toDate}"
 renderAsPopup="true" popupTodayString="Today" popupDateFormat="MM/dd/yyyy"
 popupWeekString="Week" helpText="MM/DD/YYYY" />
 </h:panelGrid>
 </h:panelGrid>
 </a4j:outputPanel>
 </a4j:outputPanel>
 </a4j:outputPanel>
 </h:panelGrid>

public void queryListener(ValueChangeEvent evt)
 {
 UISelectOne comp = (UISelectOne) evt.getSource();
 if(comp.getValue()!= null)
 {
 String value = comp.getValue().toString();
 if(Constants.ACTIVETIMEFRAME.equals(value) || Constants.ALLAUCTIONS.equals(value) || Constants.ALLARCHIVEAUCTIONS.equals(value ) ||
 (Constants.DELISTED+Constants.USERREQUEST).equals(value) )
 {
 this.setDatesDisplayed(true);
 }
 else
 {
 this.setDatesDisplayed(false);
 }

 }

 }

 public boolean isDatesDisplayed()
 {
 return datesDisplayed;
 }

 public void setDatesDisplayed(boolean datesDisplayed)
 {
 this.datesDisplayed = datesDisplayed;
 }

[ilya_shaikovsky]

Seems like you missunderstand me. It's no problem to use bean binded "rendered" for dynamically displaying the components. You just musn't reRender is directly. You code with outputPanel with none layout is ok. The last one seems have too complex outputPanels structure (some of them aren't needed)

And what about sergeys questions about immediate and messages? Please at first make your code as simple as possible for testing purposes(remove unnessessary outputPanels except the required one and immediate attributes but add h:messages as Sergey told you). If it will not works after - paste it again.

Thanks for your patient.

[ilya_shaikovsky]

simplier example of common problems is

http://www.jboss.com/index.html?module=bb&op=viewtopic&p=4058809#4058809

[dcosio]

Im not sure i understand what you are saying.. the new code example I submitted above is exactly as how Sergey said to do it in this post
http://www.jboss.com/index.html?module=bb&op=viewtopic&p=4052203#4052203



I have the message tag in my code.. but since the page reloads(which is the problem) I can see any output.. I know the calendar component is rendering because I can see it briefly before the page does a reload. There is something with the ajax sumit that is causing it to really submit the page.. I changed my valuechangelistener to return null instead of being a void to see if that would make a difference. As for the outputPanels.. I have it as Sergey says to do it. I also tried these two(using only 2 outputPanels)

<a4j:outputPanel layout="none" >
<a4j:outputPanel id="dateInnerPanel" rendered="#{reportsBean.datesDisplayed }">
<h:panelGrid columns="2" style="border:none" >
...
</h:panelGrid>
</a4j:outputPanel>
</a4j:outputPanel>

AND like this

<a4j:outputPanel layout="none" >
<a4j:outputPanel id="dateInnerPanel">
<h:panelGrid columns="2" style="border:none" rendered="#{reportsBean.datesDisplayed }">
...
</h:panelGrid>
</a4j:outputPanel>
</a4j:outputPanel>

How do I get the message popup.. If I can get the popup I can get the output to you..

Thanks
Dan

[dcosio]

Hi all.. Im hoping someone can give me some pointers as to how to get this too work..


thx
Dan

[dcosio]

I just ran a quick test and removed the tomahawk calendar Im using and inserted a simple text field and it works the way I expected. so the issue seems to be with a4j and the calendar

This is the entire calendar panel. I would be glad to run some test to get debug info.. I really do need to use the calenar. I can do what I want with simple javascript but I wanted to start using a4j and have the code be consistant.

<a4j:outputPanel layout="none" >
<a4j:outputPanel id="datePanel">
<h:panelGrid columns="2" style="border:none" rendered="#{reportsBean.datesDisplayed }" >
<h:panelGrid columns="1" styleClass="selectStyle">
<t:outputLabel for="fDate" value="Start Date" />
<t:inputCalendar id="fDate" monthYearRowClass="yearMonthHeader" weekRowClass="weekHeader"
popupButtonStyleClass="standard_bold" currentDayCellClass="currentDayCell" value="01/01/2007"
renderAsPopup="true" popupTodayString="Today" popupDateFormat="MM/dd/yyyy"
popupWeekString="Week" helpText="MM/DD/YYYY"/>
</h:panelGrid>

<h:panelGrid columns="1" styleClass="selectStyle">
<t:outputLabel for="tDate" value="End Date" />
<t:inputCalendar id="tDate" monthYearRowClass="yearMonthHeader" weekRowClass="weekHeader"
popupButtonStyleClass="standard_bold" currentDayCellClass="currentDayCell" value="01/02/2007"
renderAsPopup="true" popupTodayString="Today" popupDateFormat="MM/dd/yyyy"
popupWeekString="Week" helpText="MM/DD/YYYY" />
</h:panelGrid>
</h:panelGrid>
</a4j:outputPanel>
</a4j:outputPanel>


Thx
Dan

[dcosio]

I did a test and removed the tomahawk calendar and replaced them with text boxes.. This seems to work the way I want. So there seems to be a problem with a4j and the tomahawk calendar..

[ishabalov]

This is exactly the problem why we will have our own calendar in next release (in a few weeks). It is already in code base, we are fixing bugs.

I hear about the cases when a4j and tomahawk calendar works together, however, it always give us some troubles.