Button action called upon second click - button

I have 2 command buttons and one select one menu. I need to call a bean method depending on the buttons selected and the currently selected item in the menu.
<h:form id="form1">
<h:outputLabel value="menu:" />
<h:commandButton value ="en" action="#{bean.exec}" >
<f:setPropertyActionListener target="#{bean.menu}" value='en' />
</h:commandButton>
<h:commandButton value ="fr" action="#{bean.exec}" >
<f:setPropertyActionListener target="#{bean.menu}" value='fr' />
</h:commandButton>
<h:outputLabel value="id:" />
<h:selectOneMenu value="#{bean.id}">
<f:selectItems value="#{bean.idlist}" />
<f:ajax listener="#{bean.exec}" render ="form1" />
</h:selectOneMenu>
</h:form>
However, although the first button updates my properties and calls the action method, the second button gives me the following message
WARNING: FacesMessage(s) have been enqueued, but may not have been displayed
and the view doesn't get updated on the fist click. However, immediately on the second click, the properties get updated and so does the view.
How is this caused and how can I solve it?

I did see the log, however I dont understand the error: this is what it shows: form1:j_idt124: Validation Error: Value is not valid What value and where?
It's easier to identify the value if you give all input components an ID and attach a <h:message> to them as follows:
<h:outputLabel for="id" value="id:" />
<h:selectOneMenu id="id" value="#{bean.id}">
<f:selectItems value="#{bean.idlist}" />
<f:ajax listener="#{bean.exec}" render ="form1" />
</h:selectOneMenu>
<h:message for="id" />
This way you will get form1:id as label instead of form1:j_idt124. Alternatively, you can also specify the label of the input component:
<h:selectOneMenu label="id" ... />
As to the "Value is not valid" error, you will get this error when the selected value does not match any one of the available values during processing the form submit. This can in turn happen when the property behind #{bean.idlist} has incompatibly changed during processing the form submit. This can in turn happen when the bean is request scoped. Putting the bean in the view scope should fix it.
See also:
Validation Error: Value is not valid

Related

Content element inside Toolbar component doesn't work

I'm trying to build a table with button on table's header. I'm guiding from here.
This is my code:
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:t="sap.ui.table"
height="100%"
controllerName="xxxxx"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="CONFIGURACIÓN DE LA CUENTA" navButtonPress="onCancel" showNavButton="true">
<content>
<f:SimpleForm id="form_requerimiento_datos_generales" minWidth="1024"
maxContainerCols="2" editable="true" layout="ResponsiveGridLayout"
labelSpanL="4" labelSpanM="4"
emptySpanL="0" emptySpanM="0" columnsL="2" columnsM="2"
validateFieldGroup="onValidateFieldGroup">
<f:content>
<core:Title text="Suscripciones"/>
<t:Table
rows="{/Subscriptions?$filter=UserSystem eq '1'}"
selectionMode="None"
visibleRowCount="7">
<t:toolbar>
<content>
<Title id="title" text="Listado de Suscripciones" />
<ToolbarSpacer/>
<Button
icon="sap-icon://add"
tooltip="Agregar Suscripciones"
press="addSuscription"/>
</content>
</t:toolbar>
<t:columns>
<!--columns-->
</t:columns>
</t:Table>
</f:content>
</f:SimpleForm>
</content>
</Page>
</core:View>
I have following error message:
Uncaught Error: failed to load 'sap/m/content.js' from https://sapui5.netweaver.ondemand.com/resources/sap/m/content.js: 0 - NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'https://sapui5.netweaver.ondemand.com/resources/sap/m/content.js'.
I don't know why I get this error. I think that It's in this part of code:
<t:toolbar>
<content>
<Title id="title" text="Listado de Suscripciones" />
<ToolbarSpacer/>
<Button
icon="sap-icon://add"
tooltip="Agregar Suscripciones"
press="addSuscription"/>
</content>
</t:toolbar>
I don't know why content label is not accepted inside toolbar label (In example this works). When I take off content label of my page. I don't get error messages.
I would like to know what doing for to solve my problem.
Thanks for help me!
UPDATE 1
I solved already my problem but Now I have another problem. I have a problem with CSS of table header (This is overlapped with table body):
The label <t:toolbar> is the aggregation name and it expects a toolbar inside it.
So, ideally <t:toolbar> is followed by a sap.m.Toolbar control.
As to why it is throwing: sap/m/content error is because, it is expecting a control after the <t:toolbar>. Also, since your default namespace is sap.m so it looks for control ( in this case you have specified content) in the default namespace.There is no such control as sap.m.content. Thus, an error.
If you will check your guiding source, you will see they have an <m:Toolbar> after <toolbar> aggregation
Here is the updated code:
<t:toolbar>
<Toolbar>
<content>
<Title id="title" text="Listado de Suscripciones" />
<ToolbarSpacer/>
<Button
icon="sap-icon://add"
tooltip="Agregar Suscripciones"
press="addSuscription"/>
</content>
</Toolbar>
</t:toolbar>

how to make richfaces popup the popuppanel upwards

The link contains an example of richfaces 4 popuppanel:
richfaces popuppanel example
Here is the code:
<rich:toolbar height="26px" id="tb">
<rich:toolbarGroup location="right">
<h:outputLink value="#">
<rich:componentControl event="click" operation="show" target="ls">
<a4j:param name="event" value="event" noEscape="true" />
<rich:hashParam>
<a4j:param noEscape="true" name="top"
value="jQuery(#{rich:element('tb')}).offset().top + jQuery(#{rich:element('tb')}).height()" />
<a4j:param noEscape="true" name="left"
value="jQuery(#{rich:element('tb')}).offset().left + jQuery(#{rich:element('tb')}).width() - p_width" />
</rich:hashParam>
</rich:componentControl>
Search
</h:outputLink>
</rich:toolbarGroup>
</rich:toolbar>
<rich:popupPanel header="Enter Search Terms" id="ls" autosized="true" modal="false" moveable="false" resizeable="false" followByScroll="false" >
<h:panelGrid columns="3">
<h:outputText value="Search:" />
<h:inputText />
<h:outputLink onclick="#{rich:component('ls')}.hide(event); return false;" value="#">Search
</h:outputLink>
</h:panelGrid>
</rich:popupPanel>
<h:outputScript type="text/javascript" target="body">
p_width = #{rich:component('ls')}.width();
</h:outputScript>
But the popup is appearing in random places, i.e. sometimes under the bar, and then have to scroll and sometimes above. Is it possible to make sure it always appears right above the bar while being attached to it?
The top and left parameters set the position of the panel, change them to where you want the panel to be, or call the method directly:
RichFaces.component('panelId').show(null, {top: "800px", left: "500px"})
You're using the part of the example that specifically sets the panel under the bar so it shouldn't be surprising when the panel appears there.

Same space between 2 inputText boxes using JSF and CSS

I want to create a JSF form where users can write their name and surname and validate them using JSF validators. The problem is that I would like to set the same space between the 2 inputText boxes in the form, in both cases, when the typed data is correct according to the validator, and when it is not correct. So if between the 2 inputText boxes there are X pixels if the user has not typed anything, when typed name is not correct, the error showing message should be displayed between the 2 inputText boxes and the pixels between them should be also X px. I suppose this is a CSS issue, but I am unable to get it, so any help would be appreciated.
Here is my code
<h:form>
<p:panel id="panelregister">
<h:panelGrid columns="1">
<!--Name-->
<p:inputText id="name" label="name" size="32" maxlength="9"
value="#{mManagedBean.name}">
<f:validator validatorId="packagevalidators.NameValidator"/>
</p:inputText>
<p:watermark for="name" value="Name (*)" />
<p:message for="name"/>
<!--Surname-->
<p:inputText id="surname" label="surname" required="true" size="32" maxlength="9"
value="#{mManagedBean.surname}"
requiredMessage="Must enter a surname">
<f:validator validatorId="packagevalidators.SurnameValidator"/>
</p:inputText>
<p:watermark for="surname" value="Surname (*)" />
<p:message for="surname" />
<p:commandButton value="Submit" action="#{mManagedBean.save}" ajax="false" />
</h:panelGrid>
</p:panel>
</h:form>
You are using h:panelGrid which renders as HTML <table>.
p:message will be rendered as div and by default that div won't have any content so it won't take any space you provide.
One way to do this is to use a h:panelGroup around it and give pre defined height of p:message
Example:
<h:panelGroup layout="block" style="height:27px">
<p:message for="name" />
</h:panelGroup>

Checkbox disabled=false whithout having focus

Consider the following situation:
There exists a column in a table with label "X". X contains a checkbox, which can be checked or unchecked. To be more precise here is the code:
<h:form id="form">
<rich:dataTable id="table"
<rich:column>
<f:facet name="header">
<h:outputLabel value="X" />
</f:facet>
<h:selectBooleanCheckbox id="x" readonly="true"
disabled="true"
value="#{some condition}"
styleClass="#{foo() ? 'inputChanged' : '' center" />
.
.
.
The problem i got is:
It is not quite clear to decide wether the checkbox is checked or not. The problem is, that the checkbox has to be disabled, else it gets focussed and one can click the check box. Even though this does not have any impact on the data in the backend, i don't want this to happen. The costumer told me, that you cant decide quite well, if the checkbox is marked or not.
Is there a way to get the checkbox not disabled while a user can't make any changes? Or do you have any other idea how to make this more visible to a costumer?
The following worked:
input[type=checkbox]:not(:checked) {
outline:2px solid red;
}
This way, you can override the style of an unchecked checkbox so that it has a red border.

insert markup into h:outputText to enhance some words jsf

I would like to insert a <span> into the value of this outputText :
<h:outputText id="jesuis1" value="la quantité nécéssaire : #{editCommandController.myCom.nbreExemplaire*editCommandController.myCom.nbrePage}" />
my goal is to enhance this {editCommandController.myCom.nbreExemplaire*editCommandController.myCom.nbrePage} by css but it generated an error
do you have any idea
You need the escape attribute!
<h:outputText escape="false" value="#any text including el that
evaluates to html tags"/>
or you could use
<h:outputFormat escape="true" value="text with {0} tags>
<f:param value="#{bean.htmlExpression}" />
</h:outputFormat>

Resources