First of all I am new to AJAX and JSF so excuse my ignorance.
I am troubleshooting an issue on one of our existing applications.
Basically we want to rerender certain input fields if another has a value in it.
The code looks as follows
<rich:column valign="top" align="center">
<f:facet name="header">QTY Locos <br/>Staged</f:facet>
<h:inputText id="qtyLocos" value="#{dataItem.qtyLocosStaged}" width="80px" disabled="#{dataItem.rejected or !stagingDetailBean.editable}" styleClass="inputValidNumber">
<rich:jQuery selector="#qtyLocos" timing="onload" query="numeric" />
<a4j:support event="onchange" limitToList="true" reRender="facesMessagePanel, locoType, teleRequired, crewQualification" />
</h:inputText>
</rich:column>
<rich:column valign="top" styleClass="inputValid" id="locoType" align="center">
<f:facet name="header">Loco Type</f:facet>
<h:selectOneMenu value="#{dataItem.locoType}" disabled="#{dataItem.qtyLocosStaged eq 0 or dataItem.rejected or !stagingDetailBean.editable}">
<f:selectItem itemValue="" itemLabel="" />
<f:selectItem itemValue="6E" itemLabel="6E" />
<f:selectItem itemValue="6E1" itemLabel="6E1" />
<f:selectItem itemValue="7E" itemLabel="7E" />
</h:selectOneMenu>
</rich:column>
<rich:column valign="top" styleClass="center" id="teleRequired">
<f:facet name="header">Telemeter<br/>Required</f:facet>
<h:selectBooleanCheckbox value="#{dataItem.telemeterRequired}" disabled="#{dataItem.qtyLocosStaged eq 0 or dataItem.rejected or !stagingDetailBean.editable}"/>
</rich:column>
On certain browsers when you enter a value in the input field id=qtyLocos the drop down list and tick box becomes active as the criteria for disabled is now false.
But it happens in certain browsers that when you enter a value and the onchange event kicks in it physically removes the HTML tags for the drop down and the tick box. So my page renders completely incorrect.
Is anyone aware of issues with certain versions of chrome and ajax that could explain this behavior?
Some more info regarding this issue. The column headers dont disappear they are still visable. Just the inputs are missing, shifting all the fields after these fields to the left (and then not aligning with its column name anymore)
Ok this problem is getting weirder by the moment. This ONLY happens on machines that are on the company domain. Any machine that doesnt log onto the domain this does not happen. Can company policies influence how these things gets rendered?
Related
I am new to JSF and doing some sample login application. I need username,password only with tooltips.
I have added below extra jsf element rich:toolTip element added as below and my question is, how to hide this extra element.
I want to hide this element without removing from jsp.
When I inspected the source code from browser, UI is getting broken and added some extra space.
sample.jsp
<h:panelGrid>
<h:outputText value="username"/>
<h:inputText value="username">
<rich:toolTip value="enter uname" event="onmouseover"
direction="bottom-right" layout="block"/>
</h:inputText>
<h:outputText value="password"/>
<h:inputText value="password">
<rich:toolTip value="enter password" event="onmouseover"
direction="bottom-right" layout="block"/>
</h:inputText>
<rich:toolTip value="how to hide this element" event="onmouseover"
direction="bottom-right" layout="block"/>
</h:panelGrid>
Could anyone help on this?
I have a focus problem with the elem <p :selectOneMenu>.
I use <p:focus> to focus on the failed validation fields.
This is a part of my xhtml code:
<h:form>
<p:focus/>
[Some other panel and inputText]
<p:selectOneMenu id="workCategory"
value="#{personDto.category}"
filter="true" filterMatchMode="contains"
required="true" style="min-width: 0px !important;">
<f:selectItem itemValue="#{null}"
itemLabel="please select something"
noSelectionOption="true" itemDisabled="true"/>
<f:selectItems value="#{clientController.categoryList}"
var="category" itemValue="#{category}"
itemLabel="#{category.label}}"/>
<p:ajax event="change"
listener="#{clientController.doSomeJob(personDto.category)}"
partialSubmit="true" process="#this, #(.csrf)"
/>
</p:selectOneMenu>
<p:message for="workCategory" display="text"/>
</h:form>
When the validation fails, the focus will be on the first element whose validation failed, which means that the page scrolls until this element. This works fine for the other elements of my page, such as inputText, switchButton … However it doesn’t seem to work for <p:selectOneMenu> because when it is the first element that failed validation, the page does not scroll until its position.
I checked that the <p:selectOneMenu> receives the class “ui-state-focus” when the focus event is triggered on it. Despite having “ui-state-focus” when the validation failed, it does not scroll as expected.
I tried to replace <p:selectOneMenu> with <h:selectOneMenu>. It works fine for <h:selectOneMenu> but doesn’t for <p:selectOneMenu>.
Why is it happening and how can I solve this issue? I need because I cannot change so lightly to <h:selectOneMenu> since the whole application could be affected.
I am using prime-faces 5 and jsf, I've created dynamic 2D arraylist table based on Tester and Date, first time its showing values correctly with date. But next time onwards its showing different tester name in single row.
The above showing first row correctly showing tester name but 2nd and 3rd showing different values. But i want to display same tester name in each row level.
MY XHTML:
<div align="left" class="width100">
<div class="DTHeader">
<h:form id="frmres">
<h:panelGrid columns="2"
style="padding-top:35px;padding-left:30px;">
<h:outputText class="lighttxt1" value="Schedule Date" />
<p:calendar id="button" value="#{schedulerbean.sch.scheDate}"
styleClass="cal schdate" label="Schedule Date" showOn="button"
pattern="dd/MM/yyyy HH:mm" showButtonPanel="true"
required="true">
</p:calendar>
<h:outputText value="TCU Goal" class="lighttxt1" />
<h:panelGrid columns="1" >
<p:inputText id="tcu" label="The Value given in TCU is"
style="border: 1px solid #A8A8A8 !important;background: transparent !important;"
styleClass="txtbig" value="#{schedulerbean.sch.tcu}"
keypadOnly="true" required="#{tcselectionbean.mancnt} != 0}" />
<h:outputText value="(Total Tcu:#{schedulerbean.tottalTCU})" class="lighttxt1" />
</h:panelGrid>
<h:outputText value="Select Squad" styleClass="txtblack14" />
<p:selectOneMenu value="#{schedulerbean.sch.squadparam}"
panelStyleClass="panel" styleClass="DTDD ddwidth1">
<f:selectItem itemLabel="All Tester" itemValue=""
styleClass="txtblack14" />
<f:selectItems value="#{schedulerbean.squadLst}" var="squadval"
itemLabel="#{squadval}" itemValue="#{squadval}"
styleClass="txtblack14" />
</p:selectOneMenu>
</h:panelGrid>
<h:panelGrid columns="1">
<p:commandButton
actionListener="#{schedulerbean.resourcePlanWithPossibleEnddate}"
value="Calculate" styleClass="blubtn"
update=":frmres:reservtable" />
<h:panelGroup id="reservtable">
<table class="bor bortd" style="margin-left:32px;">
<thead>
<tr>
<th>Tester Name / Dates</th>
<c:forEach var="resdate" items="#{schedulerbean.resDateList}">
<th>#{resdate}</th>
</c:forEach>
</tr>
</thead>
<c:forEach var="reserv" items="#{schedulerbean.resList}">
<tr>
<td>
<h:selectBooleanCheckbox value="#{schedulerbean.testerCheckboxmap[reserv.testerName]}"
styleClass="lighttxt1" />#{reserv.testerName}</td>
<c:forEach var="resdate1" items="#{schedulerbean.resDateList}">
<td class='c#{reserv.reserveType.get(resdate1)}'>
#{reserv.testerName} #{reserv.tcuMap.get(resdate1)}</td>
</c:forEach>
</tr>
</c:forEach>
</table>
</h:panelGroup></h:panelGrid>
<p:commandLink styleClass="bluelinknew"
action="#{schedulerbean.setSchedulestep('step3')}"
update=":schmenufrm" value="Next" style="float:right;"
onclick="javascript:changets('schedule');" />
</h:form>
</div>
</div>
How can i achieve this?
You are misusing the forEach JSTL tag. The tag is only in effect when the component tree is built, and the component tree is not re-built for post-backs and AJAX requests.
bwright's suggestion to use a <p:dataTable> is good, but you could also use <ui:repeat> if you don't want to render an HTML table.
https://rogerkeays.com/jsf-c-foreach-vs-ui-repeat
The most important thing to understand about the JSTL tags in JSF is
that they do not represent components and never become a part of the
component tree once the view has been built. Rather, they are tags
which are actually responsible for building the tree in the first
place. Once they have done their job they expire, are no more, cease
to be, etc etc.
...
When is the view built?
Now that you understand that tag handlers are only effective when the
tree is built, the next logical question should be well, when is tree
built?
The short answer is that a new view is built for every request which
is not a postback. During a postback, the view is reconstructed from
saved state. Quite confusing, and not very obvious I know, but there
you have it.
...
My list doesn't change size after deleting or adding an item
When your view was built you only had, say, 5 items. If you post back
to this view and add or delete an item, your view still has 5
h:outputText components in it since it was restored from saved state.
In this simple case, you should use ui:repeat and your tree will
always contain one h:ouputText component which is iterated over with
differing values of ${item}.
If you rely on using c:forEach to dynamically include different form
components you could run into difficulty. Always try to think about
what the resulting tree looks like and remember it doesn't change on a
postback.
See also
https://rogerkeays.com/jsf-c-foreach-vs-ui-repeat (quoted above)
JSTL in JSF2 Facelets... makes sense?
below you see some part of my code, i just want to select the first value in a form and the rest should be updated via ajax, for example if you select PK than, MccName, MccVorname,MccDepartment should be shown via ajax after this selection.
This should also be possible in other forms indepently,
<h:panelGrid columns="4">
<h:form id="formmcc10">
<h:outputText value="Pls select PK: " />
<p:selectOneMenu value="#categorymcc.mcccatname}" id="mcccat"
immediate="true" valueChangeListener="#categorymcc.processScat}">
<f:selectItem itemLabel="#categorymcc.mcccatname}"itemValue="" />
<f:selectItems value="#categorymcc.categoryName}" />
<p:ajax update="formmcc10:mccscat1 formmcc10:mccscat2 formmcc10:mccscat3" event="change" />
</p:selectOneMenu><h:outputText value="Mcc Name" />
<p:selectOneMenu value="#{categorymcc.submcccatname}"id="mccscat1">
<f:selectItemsvalue="#{categorymcc.subCategoryName}" />
</p:selectOneMenu>
<h:outputText value="Mcc Vorname" />
<p:selectOneMenu value="#{categorymcc.subsubmcccatname}"id="mccscat2">
<f:selectItems value="#{categorymcc.subSubCategoryName}" />
</p:selectOneMenu>
<h:outputText value="Mcc Department:" />
<p:selectOneMenu value="#{categorymcc.abteilung}" id="mccscat3">
<f:selectItems value="#{categorymcc.abteilungCategoryName}" />
</p:selectOneMenu>
</h:form>
</h:panelGrid>
This could be anything, but I encountered one interesting problem like that recently. I tried to output a bean property like #{myBean.otherBean.name} and it worked when I loaded the page by normal request, but it didn't work with AJAX. When I tried #{myBean.otherBean.id}, it worked in both cases.
The problem was, that backend system didn't fill all data for otherBean on AJAX request, it filled only id (probably for better performance). I had to prepare a getOtherBeanById method and when I called that, AJAX started to work as expected.
I'm not an expert on this field, perhaps someone has a more precise explanation for that.
I'm currently using JSF 1.2, and Richfaces 3.3.3.
I get a quite strange bug with a combobox in a rich:datatable :
The first time I click and select a value, it's working, and via ajax:support, it updates the page as required. But then, if I try to change the value in the combobox, it seems "blocked"... field is not editable, and the arrow not "clickable". If I click on another field of the page, then come back, it usually works better (but not always).
Here is the code :
<rich:column style="border:none;" id="KitCol">
<f:facet name="header">
<h:outputText value="Kit"/>
</f:facet>
<rich:comboBox id="kit" value="#{deployItem.kit}"
directInputSuggestions="true" defaultLabel="Enter kit name >
<f:selectItems value="#{deployItem.kits}" />
<a4j:support event="onchange" action="#{deployItem.kitChanged}"
reRender="deployActions, deployTable">
<f:setPropertyActionListener value="true" target="#{deployController.atLeastOneItem}" />
</a4j:support>
</rich:comboBox>
</rich:column>
Would somebody have an idea about how to solve this issue ?
Thanks in advance.