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() }" />
Related
How to pass JavaScript value "165432" to the JSF inputHidden tag in the form which after rendering the form will be ex: myForm:j_idt96:0:type.
By clicking the Submit button the onClick events triggers the javasctipt functionOne.
I want to pass "165432" to the inputHidden and then get that value in the Java Bean.
function functionOne(){
......
document.getElementById("myForm:j_idt96:0:type").value ="165432";
}
<h:form id="myForm">
<ui:repeat value="#{bean.list}" var="item">
<h:inputHidden id="type" value="#{item.type}" />
</ui:repeat>
<h:commandButton value="Submit" action="#{bean.submit_complete}" onclick="functionOne();">
<a4j:ajax execute="#form" render="pnlResult" />
</h:commandButton>
</h:form>
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 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
Problem:
I have a button with an action and an ajax call to a js function but the javascript function is not executed. But when I remove the <h:form> it will work perfectly. Anybody has an idea why this happens, and how to fix it?
I would really like to use a form.
Code:
Working:
<h:commandButton id="dice" alt="Würfel" image="resources/img/wuerfel0.png" action="#{spiel.dice()}" tabindex="4" title="Würfel">
<f:ajax render="gameinfo" onevent="animate" />
</h:commandButton>
Not working:
<h:form>
<h:commandButton id="dice" alt="Würfel" image="resources/img/wuerfel0.png" action="#{spiel.dice()}" tabindex="4" title="Würfel">
<f:ajax render=":gameinfo" onevent="animate" />
</h:commandButton>
</h:form>
I also tried to realize it with a commandLink, same problem!
How can we get the selected value of PrimeFaces <p:selectOneMenu> using JavaScript/jQuery?
I am trying to get it this way, but it does not go inside if condition, which means that the ID of the element is not correct.
<h:head>
<script>
function showDialog() {
alert("insdie function");
if($('#someSelect').val() == 'India') {
dlg.show();
alert("after function");
}
alert("outside function");
}
</script>
</h:head>
<h:body>
<h:form>
<p:panel>
<h:panelGrid columns="2">
<p:selectOneMenu
id="someSelect"
value="#{testController.countryName}"
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{addPatientProfileBB.patStatusSelect}"
itemLabel="#{testController.countryName}"
itemValue="#{testController.countryNameId}" />
<p:ajax process="someSelect" update="dialog" oncomplete="showDialog()"/>
</p:selectOneMenu>
</h:panelGrid>
<p:dialog id="dialog" header="Login" widgetVar="dlg">
<h:form>
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="username" value="Username:" />
<p:inputText id="username" required="true" label="username" />
</h:panelGrid>
</h:form>
</p:dialog>
</p:panel>
</h:form>
</h:body>
JSF runs on webserver and generates HTML which get sent to webbrowser. JavaScript/jQuery runs on webbrowser and doesn't see anything of the JSF source code, but only its HTML output.
Open the page in browser, rightclick and View Source (or here on PrimeFaces showcase site). You'll see that the actual <select> element has the ID of the parent <h:form> prepended and the word _input suffixed (because the <p:selectOneMenu> basically generates a <div><ul><li> to achieve the fancy look'n'feel which isn't possible with a plain <select>, thus it's been hidden away).
So, if you give the parent form a fixed ID (so that JSF doesn't autogenerate one), then the following JSF code
<h:form id="form">
<p:selectOneMenu id="someSelect" ...>
will generate the HTML <select> as follows:
<select id="form:someSelect_input">
You need to use exactly that ID instead to grab the element from DOM.
$("#form\\:someSelect_input");
or
$("[id='form:someSelect_input']");
See also:
How to select JSF components using jQuery?
Unrelated to the concrete problem, you've there another problem with that <p:dialog>. It contains another <h:form> and thus you're effectively nesting forms which is illegal in HTML! Put that entire <p:dialog> outside the form like so:
<h:form>
<p:selectOneMenu ... />
</h:form>
<p:dialog>
<h:form>
...
</h:form>
</p:dialog>
try changing
if($('#someSelect').val() == 'India') {
into
if($("select[name$='someSelect_input'] option:selected").val() == 'India') {
EDIT
you can improve the selector by changing
name$='someSelect_input'
into
name='yourFormName\\:someSelect_input'
I my friends. i found the following solution.
<h:head>
<script>
function showDialog() {
alert(PF('selectWV').getSelectedValue());
if (PF('selectWV').getSelectedValue() == "b") {
PF('buttonWV').jq.show();
} else {
PF('buttonWV').jq.hide();
}
}
</script>
</h:head>
<h:body>
<h:form>
<p:panel>
<h:panelGrid columns="2">
<h:form>
<p:selectOneMenu style="width:150px" id="id" widgetVar="selectWV">
<f:selectItem itemLabel="Select" itemValue="a"></f:selectItem>
<f:selectItem itemLabel="Other" itemValue="b"></f:selectItem>
<p:ajax process="id" update="dos" oncomplete="showDialog()"/>
</p:selectOneMenu>
<p:commandButton value="Register" widgetVar="buttonWV"
style="display: none" />
</h:form>
</h:panelGrid>
</p:panel>
</h:form>
</h:body>