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.
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!
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() }" />
I'm having some trouble whenever I want to add some text to my div tag, here's my code:
<html>
<body>
<div id="comments">
</div>
<form name="forma">
<textarea name="commentUser" id="commentUser" cols="40" rows="5">
Comments here...
</textarea><br>
<input type="submit" value="Ready!" onClick="writeComment()" />
</form>
<script type="text/javascript" >
function writeComment()
{
var comment = document.forma.commentUser.value;
alert(comment);
document.getElementById('comments').innerHTML=comment;
}
</script>
</body>
</html>
It does what it has to do correctly, but then it switches back to the text box only and the comment I just wrote disappears. Any idea of what's going on here?
Thank you so much for your time.
It is because you are submitting the form.
Quick fix:
<input type="submit" value="Ready!" onClick="writeComment()" />
to
<input type="button" value="Ready!" onClick="writeComment()" />
In addition, you are able to prevent the default action of an input. Basically telling the browser the you are going to handle the action with preventDefault:
function writeComment(e) {
var comment = document.forma.commentUser.value;
alert(comment);
document.getElementById('comments').innerHTML = comment;
e.preventDefault();
return false;
}
What's happening is your form is submitting, the page is refreshing, and the div is going back to its pre-JavaScript-set content.
Try swapping the type='submit' to 'button' on the button.
When you click on the submit button the form is submitted, causing the whole page to reload. You need to return false from the onclick of the submit button to prevent it:
<input type="submit" value="Ready!" onclick="writeComment(); return false;" />
Or, if you don't want the button to ever submit the form change type="submit" to type="button".
PS. It's bad practice to use the onclick attribute. Instead bind a handler to the click event using pure JS.
This is because you use not just a regular button but a submit button which by default submits the form to the server. You can see that your comment is submitted via URL as you didn't specify the method(GET and POST and GET is default).
Simply write:
onclick="writeComment();return false;"
Returning FALSE prevents from default behaviour - submitting the form.
Its making another request to the server, which is causing the page to be rendered again.
Just return false from writeComment.
You'll have to prevent your form from submitting:
<input type="submit" value="Ready!" onClick="writeComment(); return false;" />
change this
<input type="submit" value="Ready!" onClick="writeComment()" />
to this:
<input type="submit" value="Ready!" onClick="writeComment(); return false;" />
try <input type="button" value="Ready!" onClick="writeComment()" />
you should switch
<input type="submit" value="Ready!" onClick="writeComment()" />
for
<input type="button" value="Ready!" onClick="writeComment()" />
Or another option is to convert your submit into a button and take it out of the form, buttons can now exist outside of forms and from the code you pasted I don't see why you have to use a form, this will mean that your page isn't reloaded when you click on the "Ready" button.
I have the following snipet in a page. I cannot for the life of me figure out why the form is not submitting when clicking the button1 element. I get an error in IE syaing that this object does not support this property or method. I put the document.poform in an alert, and it alerts a form object. I get the feeling that I am missing something super obvious maybe??
<pre>
<?
var_dump($_POST);
?>
</pre>
<form action="" method="post" name="poform">
<input name="test" type="text" />
<input name="button" type="button" value="button1" onclick="document.poform.submit();" />
<input name="submit" type="submit" value="button2" />
</form>
Since you have an <input> named submit, document.poform.submit is that <input>, not the submit() method.
Use a different name.
Change type="button" to type="submit"