I have a Button called Add oncilck of add panel needs to be displayed and within the panel there is a cancel button onclick of cancel the panel should be closed my problem is onclicking the add button the panel is coming for a moment and disapperaring. actually i have incuded template_2.xhtml which has .. if i remove from template_2.xhtml the panel is working fine but these warnings are coming like this The form component needs to have a UIForm in its ancestry. Suggestion: enclose the necessary components within i want both of things to work fine and warnings should not come .Here is my codei know the problem that i am using 2 times form in 1 xhtml page but not able to overcome that help me out
`
<h:commandButton value="Add" id="show" action="#" onclick="panelwv.show()" ></h:commandButton>
<h:form>
<p:panel id="panel" widgetVar="panelwv" visible="false" header="Add Dependents">
<h:panelGrid id="myPanel" columns="3" cellpadding="5" styleClass="text-input">
<h:outputText value=""/>
<h:outputLabel value="Name" style="font-family: cursive;font-size: 18px;font-weight:normal;"/>
<h:inputText id="name" value="#{depco.depapp.dep.name}" styleClass="border" label="First Name" />
<h:outputText value=""/>
<h:outputLabel value="Relationship" style="font-family: cursive;font-size: 18px;font-weight:normal;"/>
<h:inputText id="rel" value="#{depco.depapp.dep.relationship}" styleClass="border" label="Relationship" />
<h:outputText value=""/>
<h:outputLabel value="Date of Birth" style="font-family: cursive;font-size: 18px;font-weight:normal;"/>
<p:calendar id="dob" value="#{depco.depapp.dep.dob}" showOn="button" label="Date of Birth" />
<h:outputText value=""/>
<h:outputLabel value="Emp Id" />
<h:selectOneMenu value="#{depco.depapp.dep.empId}" >
<f:selectItems value="#{coemp.empapp.itemsAvailableSelectOne}" var="emp" itemLabel="#{emp.empId}" itemValue="#{emp.empId}" />
<f:converter converterId="employeeConverter" />
</h:selectOneMenu>
<h:outputText value=""/>
<h:commandButton value="Save" action="#{depco.createDepAction()}"/>
<h:commandButton action="#" id="hide" onclick="panelwv.hide()" value="cancel"/>
</h:panelGrid>
</p:panel>
</h:form>
`
Your Example is working fine for me, [using Primefaces 3.5 JSF 2.1.13].
It might be the problem with the buttons you used.
Usually h:commandButton will not do a Ajax submit, it submits the form untill you specify f:ajax explicitly, so that might be the reason the panel is coming and disappearing.
Use p:commandButton which does a ajax submit by default.or else use f:ajax with the h:commandButton.
Since you are not calling any ManagedBean's property or method from your h:commandButtons, you can even use h:button.
JSF menu and submenu tags should be included within form tag .so i just mage a separate jsf file with some name(say xyz.xhtml) and i just included the xyz.xhtml in actual jsf page using
Related
I have these JSF inputHidden, I need that at the time of confirmation button , they are disabled via JS or JQuery. Can someone tell me how to do it?
I use them only to take values from the backend, after which I do not need them anymore.
<h:inputHidden id="Xlist" rendered="true" value="#{praticheDettaglioController.listaXUbicazionePratichePendenti}" />
<h:inputHidden id="Ylist" rendered="true" value="#{praticheDettaglioController.listaYUbicazionePratichePendenti}" />
Use inputText with type="hidden" and disabled="true" instead like :
<p:inputText id="Xlist" value="..." type="hidden" disabled="true"/>
<p:inputText id="Ylist" value="..." type="hidden" disabled="true"/>
You could also use h:outputText with display:none style which would be rendered as a <span> element and would not be posted back at all:
<h:outputText id="Xlist"
value="#{praticheDettaglioController.listaXUbicazionePratichePendenti}"
style="display:none;"/>
<h:outputText id="Ylist"
value="#{praticheDettaglioController.listaYUbicazionePratichePendenti}"
style="display:none;"/>
A furhter alternative is to have your values assigned to simple javascript variables:
<h:outputScript>
var Xlist = '#{praticheDettaglioController.listaXUbicazionePratichePendenti}';
var Ylist = '#{praticheDettaglioController.listaYUbicazionePratichePendenti}';
</h:outputScript>
This way, you can read them anywhere in javascript.
In my xhtml, inside a <h:form> tag I have multiple panels, a4j:jsFunction and rich:popupPanel and a rich:panel. In my rich:panel I have a few text areas. Then, in another panel, inside a rich:popupPanel I have an a4j:commandButton that calls a a4j:jsFunction. What I want is when the a4j:commandButton is clicked, all data from rich:panel to be submitted. The following code is not submitting anything.
<h:form id="createId">
<h:panelGrid columns="1">
<rich:panel
style="border-width: 1px; border-color: #6B489D; padding:30px">
<rich:panel style="width:100%" >
<fieldset>
<table ...>
...some outputText, inputText...
</table>
</fieldset>
</rich:panel>
<rich:popupPanel id="confirmEditPane" autosized="true">
<a4j:commandButton value="Cancel" onclick="#{rich:component('confirmEditPane')}.hide(); return false;" />
<h:outputText value=" " />
<h:outputText value=" " />
<a4j:commandButton value="Edit" onclick="edit(); return false;" />
</rich:popupPanel>
</h:form>
Try adding the attribute domElementAttachment="form" to your popuppanel.
I managed to resolve this by adding <p:ajas event="valueChange"/> inside every panel containing textboxes and now everytime I change the value inside a textbox it gets sent to the server. Thank you for your contribution.
I am using Javascript in an xhtml file of jsf for datepicker. It works fine in Firefox, but not on IE 11.
<h:panelGrid id="expirationPanel">
<h:selectOneRadio id=" "layout=" " style="height:75px;" value="#{ManagedBean.xxxx}">
<f:selectItem itemValue="no" itemLabel=""/>
<f:selectItem itemValue="yes" itemLabel=""/>
<a4j:support event="onclick" action="#{ManagedBean.yyyy}" immediate="true" oncomplete="reRenderexPanel()"/>
</h:selectOneRadio>
<h:panelGrid id="expdPanel" columns="1" style="height:70px;">
<div style="margin-top:8px;">
<h:panelGrid id="zzzz" columns="1" style="height:22px;">
<h:outputText value="#{bundle.cet_never}" style="color:black;font-size:12px;" />
</h:panelGrid>
</div>
<h:panelGrid id="ex" columns="2" style="height:40px;">
<r:calendar value="#{ManagedBean.ed}" id="ed" datePattern="yyyy-MM-dd" showApplyButton="false" locale="en_US" enableManualInput="true" converter="dateConverter"
disabled="#{ManagedBean.ieDisabled()}">
<f:validator validatorId="checkvaliddate" />
<f:attribute name="butClick" value="createUserForm:expirationDate:butClick" />
</r:calendar>
<h:message for="exDate" />
</h:panelGrid>
</h:panelGrid>
</h:panelGrid>
There are two radio buttons when I am changing the radio button then it does not work after refresh it works in IE11.
I see two possible reasons for your not refreshing problem :
The immediate attribute set to true cause the JSL lifecycle to skip the validation and the update model phase.
Can't you let the jsf framework itself to update your expirationPanel component using reRender instead of doing it by the js oncomplete ?
<a4j:support event="onclick" action="#{ManagedBean.yyyy}" reRender="expirationPanel"/>
I have a p:inputText component of PrimeFaces and I have set required="true" and requiredMessage="$$$$$$$$" also. After Displaying the $$$$$$$$$ message, these message and the highlighting of the input Text field MUST disappear for me.ie upon clicking a RESET button. How can I make the Required Message and highlighting of the p:inputText disapper up on clicking the reset button for eg:.
<h:outputLabel for="username" value="Username: "
styleClass="cssLabelclasslogin" />
<p:inputText id="username" label="Username" required="true"
requiredMessage="Username is Required"
value="#{loginBean.username}" styleClass="loginFormcsstextBox">
</p:inputText>
The functionality you are looking for can be acheived with the p:resetInput component.
<p:commandButton value="Reset" update="username" process="#this" >
<p:resetInput target="username" />
</p:commandButton>
Also see:
Primefaces - ResetInput
I have this maskinput definition:
<ui:define name="additional-javascript">
<h:outputScript name="jquery.maskedinput-1.3.min.js" library="javascript" />
<script>
jQuery(function($){
$("[id='register_form:cnpj']").mask("99.999.999/9999-99");
});
</script>
</ui:define>
In this form:
<h:form id="register_form">
<div class="four columns alpha">
CNPJ : <h:message id="m_cnpj" for="cnpj" styleClass="red" />
<h:inputText id="cnpj" value="#{clientec.cb.cliente.cnpj}" styleClass="cnpj">
<f:ajax event="blur" render="m_cnpj" />
</h:inputText>
</div>
<div class="twelve columns alpha"></div>
//.. other input fields
</h:form>
Which works pretty fine, but if the user fills something wrong in the form and submit it, the mask in this input field don't work anymore.
Why is that ?
Anyone knows why ? It seems a little weird to me because the HTML don't change a thing after submit the form.
That will happen if the input component itself is re-rendered upon form submit. A re-render will cause the original HTML element in the HTML DOM to be replaced by the new HTML element from the ajax response. Even though they may represent exactly the same, the new HTML element does not have the jQuery mask attached anymore. Basically, you need to re-execute the jQuery mask on it. However, the jQuery function as you've declared there runs only on DOM ready (on page load). It is not re-executed on subsequent ajax requests.
You have basically 2 options:
Do not include the input component in re-render of the form submit. Let the form submit re-render only the message components instead of #form, for example.
<h:form>
<h:inputText id="input1" ... />
<h:message id="m_input1" ... />
<h:inputText id="input2" ... />
<h:message id="m_input2" ... />
<h:inputText id="input3" ... />
<h:message id="m_input3" ... />
<h:commandButton ...>
<f:ajax ... render="m_input1 m_input2 m_input3" />
</h:commandButton>
</h:form>
Re-run the jQuery function on complete of the form submit. There are several ways to achieve this. Basically, either move the <script> to inside the <h:form> (assuming that you're using #form in re-render)
<h:form>
<h:inputText id="input1" ... />
<h:message id="m_input1" ... />
<h:inputText id="input2" ... />
<h:message id="m_input2" ... />
<h:inputText id="input3" ... />
<h:message id="m_input3" ... />
<h:commandButton ...>
<f:ajax ... render="#form" />
</h:commandButton>
<script>$("[id='register_form:cnpj']").mask("99.999.999/9999-99");</script>
</h:form>
or define a JSF ajax event handler which runs on complete and hook it to <f:ajax onevent>. E.g.
<f:ajax ... render="#form" onevent="function(data) { if (data.status == 'success') applyMask() }" />