We Keep Coding

a4j:commandButton not submitting

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.

Enable/disable panel on click of button in jsf/primefaces?

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

jsf - ajax javascript call not working due to a <h:form>

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!

MaskInput don't work after submit form in JSF

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() }" />

getElementById().value does not set the hidden input

I am facing with an interesting situation. I am trying to set myValue from myBean as hidden input by using a javaScript code, but it does not work. I debugged and saw that it calls the getMyValue() method from myBean, and then does nothing. It does not give an error or warning and does not set the value. Any help please.
Thanks in advance. Code is below:
<h:body>
<script type="text/javascript">
function setHiddenValue(){
document.getElementById('myForm:hidden2').value = 3.0;
}
</script>
<h:form id="myForm">
<h:inputHidden id="hidden2" value="#{myBean.myValue}" />
<h:commandButton value="submit" action="..." onclick="setHiddenValue();" />
</h:form>
</h:body>

Isn't button submiting the form instead of doing onclick action? Please try the same but using
<button onclick="setHiddenValue();">submit</button>
instead of
<h:commandButton value="submit" action="..." onclick="setHiddenValue();" />
or alternatively use:
<h:commandButton value="submit" action="..." onclick="setHiddenValue(); return false;" />