With a simple form when i submit I see 2 request being made for this.
<h:form id="form1">
<a4j:commandButton value="Send" id="cm1" onclick="sendData(193)"/>
<a4j:jsFunction name="sendData">
<a4j:param name="param1" assignTo="#{outageManagementAction.deleteEngineId}" />
</a4j:jsFunction>
</h:form>
The code generated by JSF is following...
<form id="form1" name="form1" method="post" action="/moutagev1/faces/pages/xOutageEdit.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="form1" value="form1" />
<input id="form1:cm1" name="form1:cm1" onclick="jsf.util.chain(this,event,"sendData(193)","RichFaces.ajax(\"form1:cm1\",event,{\"incId\":\"1\"} )");return false;" value="Send" type="submit" /><span id="form1:j_idt257" style="display: none;"><script type="text/javascript">sendData=function(param1){RichFaces.ajax("form1:j_idt257",null,{"parameters":{"param1":param1} ,"incId":"1"} )};</script></span><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="8425501786648002013:2772799535475824519" autocomplete="off" />
</form>
Any Idea why this is happening...
Well, one request is the standard post of the <h:form> the second one is the custom <a4j:jsFunction> which is chained together with the submit when the click happens.
One solution would be to suppress the standard submit by changing the type of the button like this: <a4j:commandButton type="button" />.
Another alternative would be to not use <a4j:jsFunction> at all. Instead use this:
<f:setPropertyActionListener target="#{outageManagementAction.deleteEngineId}" value="193" />
Related
Im trynig to create a simple multiselect box but for some reason its not visible properly.
Here is my code:-
HTML
<input type="text" id="addRow" />
<input type="button" id="btn" value="Add" />
<form id="form1">
<div style="padding:20px">
<select id="chkveg" multiple="multiple"></select>
<br />
<br />
</div>
</form>
https://jsfiddle.net/04Lgnkqs/
After creating the select you should call the plugin on your select. something like this
$('#chkveg').multiselect();
Refer here
In my application you can upload a zip file. Now I'd like to incorporate ajax. How can I get ajax to work with zip files?
Right now, my code looks like this:
<h:form id="form" enctype="multipart/form-data" prependId="false"
pt:class="form-inline" pt:role="form"
rendered="#{consoleController.getAdmin() != null}">
<div class="form-group">
<label class="sr-only" for="file">File:</label>
<h:inputFile id="file" value="#{uploadController.file}" />
</div>
<h:commandButton id="button" value="Upload"
action="#{uploadController.upload}" class="btn btn-default">
<f:ajax execute="file" render="#all" />
</h:commandButton>
</h:form>
I get the following error in form of a modal window in Chrome:
malformedXML: Toplevel node must be one of: changes, redirect, error,...
I was having the same problem every time I tried to render(using ajax) forms of the type enctype="multipart/form-data".
Instead of using render="#all", try to render manually the forms you want except the form "form".
Ex: render=":form2 :form3 : form4"
I am new in jsf using 2.2.12 version.
I have some problem in performing actions
1). I am getting a list of things and I need to show that list in as autocomplete. I did enough google and I found this things is for primefaces not able to find some helpful in jsf.
2). I have form with multiple fields(input box,password and checkbox). I need to validate some form fields like password and conform password matching and email structure etc. I am able to perform validation by custom validator. Now my requirement is if validation fails on form fields then ajax should not be submitted by clicking on submit button of form. The form is submitted by ajax request also.
Below is my form code.
<div class="email-signup" id="email-signup">
<h:form id="signupForm">
<div class="form-group">
<h:inputText value="#{userRegister.userName}" placeholder="username" class="input-text full-width" />
</div>
<div class="form-group">
<h:inputText value="#{userRegister.firstName}" placeholder="first name" class="input-text full-width" />
</div>
<div class="form-group">
<h:inputText placeholder="last name" value="#{userRegister.lastName}" class="input-text full-width" />
</div>
<div class="form-group">
<h:inputText id="email" value="#{userRegister.email}" validatorMessage="Wrong formatted email entered" class="input-text full-width" placeholder="email address">
<!-- <f:validator validatorId="emailValidator"/> -->
<f:validateRegex pattern="^\w+#[a-zA-Z_]+?\.[a-zA-Z]{2,3}$" />
<f:ajax event="blur" render="emailMessage" />
</h:inputText>
<h:message id="emailMessage" for="email" style="color:red"/>
</div>
<div class="form-group">
<h:inputSecret id="password" value="#{userRegister.password}" class="input-text full-width" placeholder="password">
</h:inputSecret>
</div>
<!--<h:outputLabel for="confirm" value="Confirm password" />-->
<div class="form-group">
<h:inputSecret id="confirm" binding="#{confirm}" class="input-text full-width" placeholder="confirm password"/>
</div>
<div class="form-group">
<div class="checkbox">
<h:outputLabel>
<h:selectBooleanCheckbox/> Tell me about Chameleon news
</h:outputLabel>
</div>
</div>
<div class="form-group">
<p class="description">By signing up, I agree to Chameleon's Terms of Service, Privacy Policy, Guest Refund Policy, and Host Guarantee Terms.</p>
</div>
<h:commandButton value="SIGNUP" class="full-width btn-medium">
<f:ajax execute="signupForm" render="outputMessage" valueChangeListener="#{userRegister.getCallUserRegisterService}" onevent="showSignUpMessage" />
<h:outputText class="signup_message" id="outputMessage" value="#{userRegister.message !=null ? userRegister.message : ''}"/>
</h:commandButton>
</h:form>
</div>
Please have a look on above problems.
First of all I do not recommend to use JSF as frontend framework with ajax. We have project with JSF2.2 + primefaces and we are dealing with a lot of JSF lacks. JSF wasn't designed for ajax and it have more and more problems when you are trying to create a single page application with it.
If you have to use jsf - you must now that components libraries are your friends :). For autocomplete you can use eg:
primefaces autocomplete
rich faces
ice faces
You can of course write your own component but you already have in opensource libraries - I recommend PrimeFaces.
Your second problem
The best way is to use already existing command button in primefaces which has attribute ajax which defines if your action should be invoked by ajax or by standard request.
<p:commandButton value="Non-Ajax Submit" id="nonAjax" actionListener="#{buttonView.buttonAction}" ajax="true" />
If set ajax to true then your action will be performed by ajax request and if validation fails in the response you will get validation errors. You have also notice that command button have attribute "update" which should contain list of elements which should be updated after action proceed eg
<p:commandButton value="Non-Ajax Submit" id="nonAjax" actionListener="#{buttonView.buttonAction}" ajax="true" update="#form"/>
after this action whole form will be updated
Say I have a simple cfform that looks like this:
<cfform id="fruitForm" method="post" action="">
<cfinput type="radio" name="fruit" id="fruit_apple" value="Apple" /><label for="fruit_apple">Apple</label><br />
<cfinput type="radio" name="fruit" id="fruit_orange" value="Orange" /><label for="fruit_orange">Orange</label><br />
<cfinput type="radio" name="fruit" id="fruit_pear" value="Pear" /><label for="fruit_pear">Pear</label><br />
<cfinput type="submit" name="submitFruit" id="submitFruit" value="Submit" />
</cfform>
How can I use the built-in cfform validation to ensure that at least one radio button in this group is selected? I've tried adding a validate="required" to each of the radio buttons but it doesn't work. Is there any simple way to "require" one of the buttons to be selected using cfform validation?
Do yourself a favor and don't use cfform for validation. Write your own server and client side validation, but according to the cfinput documentation if you add a required="true" attribute to each radio button ColdFusion will do the client side validation for you.
Note: The user can bypass this validation and still submit a form without checking a radio button. You need to have server side validation as well.
<cfform id="fruitForm" method="post" action="">
<cfinput type="radio" name="fruit" id="fruit_apple" value="Apple" required="true" /><label for="fruit_apple">Apple</label><br />
<cfinput type="radio" name="fruit" id="fruit_orange" value="Orange" required="true" /><label for="fruit_orange">Orange</label><br />
<cfinput type="radio" name="fruit" id="fruit_pear" value="Pear" required="true" /><label for="fruit_pear">Pear</label><br />
<cfinput type="submit" name="submitFruit" id="submitFruit" value="Submit" />
</cfform>
This works for me:
<cfform action="abc.cfm" method="post">
<cfinput type="radio" required="yes" message="pick something" name="x" value="1">radio 1
<cfinput type="radio" required="yes" message="pick something" name="x" value="">radio 2
<input type="submit" />
</cfform>
In fact, you don't even need the message attribute. It will still validate.
How do I add the spring security login form to an existing page?
For example, let's say I have the following test.jsp page (which is not a spring login form page):
<html>
<head>Existing Page</head>
<body>
<div id="login-form"></div>
</body>
</html>
I would like to add the login form configured in my spring-security.xml inside the login-form div.
Typically I believe people just put the form right in the page (i.e. within the div you have there.) Something like:
<form id="blah" action="/j_spring_security_check">
<input type="text" name="j_username" />
<input type="text" name="j_password" />
<input type="submit" name="submit" value="login" />
<input type="reset" name="reset" />
</form>
Then use your css to make it fit the look and feel of the rest of your application.