t:selectOneRadio with a4j:ajax no javascript rendered - jsf

I'm creating a dynamic form with radio buttons in front of each rows that need to update a cart when a different row is selected :
<t:inputText id="test">
<f:ajax event="click" onevent="alert('3');" />
</t:inputText>
<t:selectOneRadio id="rbtnQuantity" value="#{orderActions.selectedQuantity}" layout="spread">
<f:selectItems value="#{orderActions.quantities}" var="item" />
<f:converter converterId="integerConverter" />
<a4j:ajax event="click" oncomplete="renderPrices();" />
</t:selectOneRadio>
<rich:dataTable id="tblQuantities" styleClass="quantities" value="#{orderActions.formatQuantityPrices}" var="item" rowKeyVar="row">
<h:column>
<t:radio id="rbtnQuantity" for=":form:rbtnQuantity" index="#{row}" />
</h:column>
<h:column>
<h:outputText value="#{item.quantity}" />
</h:column>
<h:column>
<h:outputText value="#{item.price}">
<f:convertNumber type="currency" currencySymbol="$" />
</h:outputText>
</h:column>
<h:column>
<h:outputText value="#{item.price / item.quantity}">
<f:convertNumber type="currency" currencySymbol="$" />
</h:outputText>/u
</h:column>
</rich:dataTable>
The problem is that no radio button fire the ajax event, even no javascript code is rendered in the resuling code :
<table id="form:tblQuantities" class="rf-dt quantities">
<colgroup span="4">
</colgroup>
<tbody id="form:tblQuantities:tb" class="rf-dt-b">
<tr id="form:tblQuantities:0" class="rf-dt-r rf-dt-fst-r">
<td id="form:tblQuantities:0:j_idt296" class="rf-dt-c">
<label><input id="form:tblQuantities:0:rbtnQuantity" type="radio" name="form:rbtnQuantity" checked="checked" value="25" /> 25</label>
</td>
<td id="form:tblQuantities:0:j_idt297" class="rf-dt-c">25</td>
<td id="form:tblQuantities:0:j_idt309" class="rf-dt-c">118,75 $</td>
<td id="form:tblQuantities:0:j_idt310" class="rf-dt-c">4,75 $/u</td>
</tr>
[more similar rows...]
I've also included one t:inputText at top, see if it was the t:selectOneRadio usage that was the problem but no.
I'm using Mojarra, RichFaces 4.2.1, Tomahawk 1.1.14.

Since I've not been able to use a4j:ajax or f:ajax with t:selectOneRadio, I've used this workaround :
<a4j:jsFunction name="changeQuantity" oncomplete="renderPrices();">
<a4j:param assignTo="#{orderActions.selectedQuantity}" name="quantity" />
</a4j:jsFunction>
<t:selectOneRadio onclick="quantity = jQuery(this).val();changeQuantity(quantity);" id="rbtnQuantity" value="#{orderActions.selectedQuantity}" layout="spread">
<f:selectItems value="#{orderActions.quantities}" var="item" />
<f:converter converterId="integerConverter" />
</t:selectOneRadio>
It is working properly, but I would prefer to fix the problem if ever someone find the right solution or I.
EDIT :
Here is the final used code :
<a4j:jsFunction name="changeQuantity" oncomplete="renderPrices();">
<a4j:param assignTo="#{orderActions.selectedQuantity}" name="quantity" />
</a4j:jsFunction>
# Each row of the table :
<input type="radio" name="quantity" value="#{item.quantity}" checked="#{orderActions.selectedQuantity eq item.quantity ? 'checked' : ''}" onclick="changeQuantity(#{item.quantity});" />

Related

How to make elements in one line JSF

How to make elements to render in one line like it is showed on image below:
Here is the code:
<h:outputLabel
value=" #{cdocmsgs['promo.action.name']} "
id="promo_action_name_id"/>
<h:selectOneMenu id="promotion" widgetVar="sub" tabindex="206"
styleClass="select-fix-average"
value="#{cdocBean.entity.promoActionName}" effect="fade"
required="#{cdocBean.entity.promotion}" requiredMessage="#{cdocmsgs['enter.promo']}">
<f:selectItem itemLabel="#{cdocmsgs['promoSelect']}"
itemValue="" />
<f:selectItems value="#{promoActionBean.DAO.resultList}"
var="item" itemLabel="#{item.name}" itemValue="#{item.name}" />
</h:selectOneMenu>
<h:outputText value="" />
<h:outputText value="" />
<h:outputLabel value=" #{cdocmsgs['source.of.info']} "
id="whenId"/>
<h:selectOneMenu id="source" widgetVar="sub"
styleClass="select-fix-average"
value="#{cdocBean.entity.source}" effect="fade" tabindex="206"
required="#{cdocBean.entity.promotion}" requiredMessage="#{cdocmsgs['enter.source']}">
<f:selectItem itemLabel="#{cdocmsgs['sourceSelect']}"
itemValue="" />
<f:selectItems value="#{adSourceBean.DAO.resultList}" var="item"
itemLabel="#{item.name}" itemValue="#{item.name}" />
</h:selectOneMenu>
I have placed h:panelGroup but it did not help.
You can use h:panelGrid like this:
<h:panelGrid columns="3" columnStyles="style1, style2, style3">
<jsfelement 1 />
<jsfelement 2 />
<jsfelement 3 />
<jsfelement 4 />
<jsfelement 5 />
<jsfelement 6 />
</h:panelGrid>
It will look like this:
element1 element2 element3
element4 element5 element6
And be rendered as a html table. You can of course style it as you like.
use a simple html would be one option.
or there are panelGrid and panelGroup in facelets to do that. usually the panlGroup is used inside the panelGrid to group multiple components into one cell.
an example: http://www.jsftoolbox.com/documentation/help/12-TagReference/html/h_panelGrid.html
You can achieve this by using a html table
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td><h:outputLabel value=" #{cdocmsgs['promo.action.name']} "
id="promo_action_name_id"/></td>
<td><h:selectOneMenu id="promotion" widgetVar="sub" tabindex="206"
styleClass="select-fix-average"
value="#{cdocBean.entity.promoActionName}" effect="fade"
required="#{cdocBean.entity.promotion}" requiredMessage="#{cdocmsgs['enter.promo']}">
<f:selectItem itemLabel="#{cdocmsgs['promoSelect']}"
itemValue="" />
<f:selectItems value="#{promoActionBean.DAO.resultList}"
var="item" itemLabel="#{item.name}" itemValue="#{item.name}" />
</h:selectOneMenu></td>
<td><h:outputText value="" /></td>
<td><h:outputText value="" /></td>
</tr>
</table>

How to reuse the (jsf) richfaces Modal panel dialog box?

In my application I have implemented an employee search functionality using the RichFaces 3.3 modal panel on Facelets. I'm trying to make this reusable across my application, so I have added the following code in facelet-taglib_1_0.xml
<tag>
<tag-name>employeeSearch</tag-name>
<source>employee-search.xhtml</source>
</tag>
The xhtml page contains the following components
search input field
search button
result datatable
I have also mapped a backing bean.
My issue is that I'm not able to get the value from the search input field
I wonder whether the approach given above is correct or if there's any better approach for this?
Thanks for your reply Arjan...i tried but result not binding in result datatable list. my code is here.
EmployeeSearchBean is request scope.
Calling reusable tag code :
<foo:employeeSearch orgSearchId="empHistSearch" bean="#{EmployeeSearchBean}" action="findEmployee" renderedVal="#{empHist.editable}" />
Model panel code :
<a4j:jsFunction name="submit" action="#{bean[action]}" />
<rich:modalPanel id="orgUnitSearchPanel_empHistSearch" autosized="true" width="450">
<f:facet name="header">
<h:outputText value="#{messages.mepit_OE_Search}" />
</f:facet>
<f:facet name="controls">
<h:panelGroup>
<h:graphicImage value="/pics/buttons/fenster_schliessen.gif" id="hideOrgUnitSearchPanel_#{orgSearchId}" styleClass="hidelink" />
<rich:componentControl for="orgUnitSearchPanel_#{orgSearchId}" attachTo="hideOrgUnitSearchPanel_#{orgSearchId}" operation="hide" event="onclick" />
</h:panelGroup>
</f:facet>
<table class="dispinputTable" cellspacing="2" cellpadding="0">
<tr>
<td style="width: 75px;">
<h:outputText value="#{messages.mepit_OE}" />
</td>
<td>
<h:inputText id="empHist_oeExecutingName" value="#{EmployeeSearchBean.empSearchCriteria}" styleClass="text" size="60" />
</td>
<td>
<a4j:commandButton styleClass="mepitButtons" onclick="submit();" value="#{dbMessages.db_search}" title="#{dbMessages.db_search}" reRender="orgUnitDT#{orgSearchId}" />
</td>
</tr>
<tr>
<td colspan="3" >
<rich:extendedDataTable width="425px" height="150px"
id="orgUnitDT#{orgSearchId}" cellspacing="0" cellpadding="0" border="0"
styleClass="inhalt" var="oeLst" value="#{EmployeeSearchBean.employeeList}" rowClasses="row0, row1">
<rich:column width="370px;" align="left">
<f:facet name="header">
<h:outputText value="#{messages.mepit_OE}" />
</f:facet>
<h:outputText id="empHist_OE" value="#{oeLst.name}" />
</rich:column>
<rich:column width="55px;">
<f:facet name="header">
<h:outputText value="#{messages.mepit_select}" />
</f:facet>
<h:commandLink value="" styleClass="edit">
<f:setPropertyActionListener value="#{oeLst}" target="#{SkillPM.executingOrgUnit}" reRender="empHist_orgUnit" />
</h:commandLink>
<h:commandLink styleClass="edit" onclick="#{rich:component(mepit:concat(orgSearchId,'orgUnitSearchPanel'))}.hide(); submit(); return false;" />
</rich:column>
</rich:extendedDataTable >
</td>
</tr>
</table>
</rich:modalPanel>
One thing that's immediately open for improvement is that you should not add your own tags to what looks like the standard facelets taglib file. Leave that file alone and create your own file.
If you pass a value binding to your tag, and bind your search input field to this, then it should work:
<foo:employeeSearch myValue="#{yourBackingBean.someValue}"/>
And then in employee-search.xhtml:
<h:inputText value="#{myValue}" />
Feel free to use some other name instead of myValue. The point is that the attribute name you use on your custom tag should match what the input text component binds to.

rich:suggestionbox submits partial string

I use jsf 1.2, richfaces 3.3.2 .
For some reason my suggestionbox submits the value i typed (a.k.a suggestion string) and not what i clicked in the suggested list that opens. How do i fix this?
<h:panelGroup>
<a4j:region renderRegionOnly="false" >
<h:panelGrid columns="2" border="0" cellpadding="0" cellspacing="0">
<h:inputText value="#{ManualReportControl.street}" id="streetNames" style="width:120px;" >
<a4j:support event="onchange" reRender="streetGis" ></a4j:support>
</h:inputText>
<h:graphicImage value="/images/icons/arrow.png"
onclick="#{rich:component('suggestionBoxStreet')}.callSuggestion(true)"
alt="" />
</h:panelGrid>
<rich:suggestionbox id="suggestionBoxStreet" for="streetNames"
suggestionAction="#{ManualReportControl.autocomplete}"
var="street"
minChars="2" >
<h:column>
<h:outputText value="#{street}" />
</h:column>
</rich:suggestionbox>
</a4j:region>
</h:panelGroup>
Got it!
I moved a4j:support from inputText to suggestionBox and now it works.
The code:
<h:panelGroup id="streetNames">
<a4j:region renderRegionOnly="false" >
<h:panelGrid columns="3" border="0" cellpadding="0" cellspacing="0">
<coral:inputString value="#{ManualReportControl.street}" id="streetName" style="width:120px;" tabindexreal="13"/>
<h:graphicImage value="/images/icons/arrow.png"
onclick="#{rich:component('suggestionBoxStreet')}.callSuggestion(true)"
alt="" />
</h:panelGrid>
<rich:suggestionbox id="suggestionBoxStreet" for="streetName"
suggestionAction="#{ManualReportControl.autocomplete}"
var="street"
minChars="2" selfRendered="true" >
<h:column>
<h:outputText value="#{street}" />
</h:column>
<a4j:support event="onselect" reRender="streetGis" ></a4j:support>
</rich:suggestionbox>
</a4j:region>
</h:panelGroup>
Probably happening because onchange event is fired before the selection is made.

Cannot 'hide' rich:fileUpload

Im trying to create a page that uses the rich:fileUpload, to (surprisingly) upload an image, once the upload is completed I want to 'hide' the rich:fileUpload component and display the jQuery plugin jCrop so that the image can be cropped before saving. once the image is saved from the crop selected, the two components should toggle their viewability again.
However, I dont appear to be able to get the rich:fileUpload to 'hide'. the jCrop component displays fine, as does the jCrop functionality. but no matter what I try rich:fileUpload is still displayed on the screen. Actually if I add rendered="#{!uploadAndCrop.newImage}" to the rich:panel that the rich:fileUpload is in, nothing seems to update. I have to remove this for the jCrop component to appear.
My code is below, it is a little messy as ive tried so many different things. Would be extremely grateful if someone could point me in the right direction with this, or advise a better way of doing it.
Thanks
<ui:define name="head">
<link href="stylesheet/jquery.Jcrop.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="scripts/jquery.Jcrop.js"></script>
<script language="Javascript">// <![CDATA[ //
{
var $J = jQuery.noConflict();
}
//]]> //</script>
</ui:define>
<ui:define name="body">
<h:form>
<h:panelGrid columns="2" columnClasses="top,top">
<h:panelGroup id="uploadgroup">
<a4j:outputPanel id="uploadpanel">
<rich:panel rendered="#{!uploadAndCrop.newImage}">
<rich:fileUpload fileUploadListener="#{uploadAndCrop.listener}"
maxFilesQuantity="#{uploadAndCrop.uploadsAvailable}" id="upload"
immediateUpload="#{uploadAndCrop.autoUpload}"
acceptedTypes="jpg, gif, png, bmp"
allowFlash="#{uploadAndCrop.useFlash}" listHeight="80px">
<ui:remove>
onfileuploadcomplete="Richfaces.showModalPanel('croppanel');">
</ui:remove>
<a4j:support event="onuploadcomplete"
reRender="info, uploadgroup, cropgroup" />
</rich:fileUpload>
<h:outputText value="#{uploadAndCrop.newImage}" id="newimage" />
<a onclick="Richfaces.showModalPanel('croppanel');" href="#">Show
ModalPanel</a>
</rich:panel>
</a4j:outputPanel>
</h:panelGroup>
<h:panelGroup id="info">
<rich:panel bodyClass="info" rendered="#{!uploadAndCrop.newImage}">
<f:facet name="header">
<h:outputText value="Uploaded Image Preview" />
</f:facet>
<rich:dataGrid columns="1" value="#{uploadAndCrop.files}"
var="file" rowKeyVar="row">
<rich:panel bodyClass="rich-laguna-panel-no-header">
<h:panelGrid columns="2">
<a4j:mediaOutput element="img" mimeType="#{file.mime}"
createContent="#{uploadAndCrop.paint}" value="#{row}"
style="width:156x; height:71px;" cacheable="false">
<f:param value="#{uploadAndCrop.timeStamp}" name="time" />
<s:conversationId />
</a4j:mediaOutput>
</h:panelGrid>
</rich:panel>
</rich:dataGrid>
</rich:panel>
<rich:spacer height="3" />
<br />
<a4j:commandButton action="#{uploadAndCrop.clearUploadData}"
reRender="info, upload" value="Clear Uploaded Image" />
</h:panelGroup>
<h:panelGroup id="cropgroup">
<rich:panel rendered="#{uploadAndCrop.newImage}">
<f:facet name="header">
<h:outputText value="Crop Image" />
</f:facet>
<a4j:outputPanel id="crop" layout="inline">
<rich:jQuery selector="#cropbox" timing="immediate"
query="Jcrop()" />
<a4j:mediaOutput element="img"
mimeType="#{uploadAndCrop.tempImageStore.mime}" id="cropbox"
createContent="#{uploadAndCrop.paintCrop}" value="null"
style="width:312; height:142px;" cacheable="false">
<f:param value="#{uploadAndCrop.timeStamp}" name="time" />
<s:conversationId />
</a4j:mediaOutput>
<rich:spacer height="3" />
<br />
<a4j:commandButton action="#{uploadAndCrop.clearUploadData}"
reRender="info, upload" value="Crop" />
</a4j:outputPanel>
</rich:panel>
</h:panelGroup>
</h:panelGrid>
<h:commandButton id="save" value="Save"
action="#{uploadAndCrop.save}">
<f:param name="cmsCompanyIdCom" value="" />
</h:commandButton>
<s:button id="cancelEdit" value="Cancel" propagation="end"
view="/CmsCompany.xhtml">
<f:param name="cmsCompanyIdCom" value="" />
</s:button>
</h:form>
<ui:remove>
<rich:modalPanel id="croppanel" width="350" height="240">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Crop Image"></h:outputText>
</h:panelGroup>
</f:facet>
<f:facet name="image">
<ui:remove>
<h:panelGroup>
<h:outputText value="close" />
<rich:componentControl for="croppanel" attachTo="close"
operation="hide" event="onclick" />
</h:panelGroup>
</ui:remove>
</f:facet>
<rich:panel rendered="#{uploadAndCrop.newImage}">
<ui:remove>
<f:facet name="header">
<h:outputText value="Crop Image" />
</f:facet>
</ui:remove>
<a4j:outputPanel id="crop" layout="inline">
<a4j:mediaOutput element="img"
mimeType="#{uploadAndCrop.tempImageStore.mime}" id="cropbox"
createContent="#{uploadAndCrop.paintCrop}" value="null"
style="width:312; height:142px;" cacheable="false">
<f:param value="#{uploadAndCrop.timeStamp}" name="time" />
<s:conversationId />
</a4j:mediaOutput>
<ui:remove>
<rich:spacer height="3" />
<br />
<a4j:commandButton action="#{uploadAndCrop.clearUploadData}"
reRender="info, upload" value="Crop" />
</ui:remove>
</a4j:outputPanel>
</rich:panel>
<a onclick="Richfaces.hideModalPanel('croppanel');" href="#">Hide
ModalPanel</a>
</rich:modalPanel>
</ui:remove>
</ui:define>
I dont know how is your uploadAndCrop.newImage method, but you can just use a boolean and sets it to false on the fileUploadListener.
But reRender the <a4j:outputPanel id="uploadpanel">, not the <rich:fileUpload> or the group.
<a4j:outputPanel id="uploadpanel" rendered="#{bean.fileUpRendered}">
(...)
<rich:fileUpload...
<a4j:support event="onuploadcomplete"
reRender="info, uploadpanel, cropgroup" />
</rich:fileUpload>
(...)
</a4j:outputPanel>
Bean:
Boolean fileUpRendered;
(...)
public void listener(UploadEvent event) throws Exception {
try {
(...)
fileUpRendered = false;
catch (...) { (...) }
}
//Get set
public get/set fileUpRendered() { }...

How to create draggable component with RichFaces?

I try to make draggable components and to do this I am based on this example:
http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport.jsf
and i started with this example but the component does not give any indication that is draggable:
<!---------------- Indicator -------->
<rich:dragIndicator id="indicator" />
<h:form>
<table border="0">
<tr>
<td valign="top"><rich:panel>
<rich:tree>
...
</rich:tree>
</rich:panel></td>
<td valign="top"><rich:panel id="afficherTest">
<rich:dataGrid value="#{afficherTestBean.listTest}" var="test"
columns="2" elements="6" width="600px">
<rich:panel style="cursor: move">
<!---------------draggable Zone-------------------->
<rich:dragSupport dragIndicator=":indicator"
dragType="#{test.nomTest}" dragValue="#{test.nomTest}">
<rich:dndParam name="label" value="#{test.nomTest}" />
</rich:dragSupport>
<f:facet name="header">
<h:outputText value="#{test.categorie}"></h:outputText>
</f:facet>
<h:panelGrid columns="2">
<h:outputText value="Nom Test:" styleClass="label"></h:outputText>
<h:outputText value="#{test.nomTest}" />
<h:outputText value="Description Test:" styleClass="label"></h:outputText>
<h:outputText value="{test.description}" />
<a4j:commandLink value="Ajouter"></a4j:commandLink>
</h:panelGrid>
</rich:panel>
<f:facet name="footer">
<rich:datascroller></rich:datascroller>
</f:facet>
</rich:dataGrid>
</rich:panel></td>
</tr>
</table>
</h:form>
</html>
please help me to create draggable component,i need your help ):'

Resources