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"
Related
I don't know how to custom validate primefaces p:fileUpload.
My code xhtml is:
<h:form id="agruparCVForm" styleClass="validacionform" enctype="multipart/form-data">
<p:messages id="messages" showDetail="false" autoUpdate="true" closable="true" escape="false"/>
<fieldset>
<div class="col">
<div class="dtPadding_bottom">
<p class="parrafoMargintop1em textSmall">
<h:outputText value="#{comunidadesBundle.textoAdjuntarDocumentoAsociar}" escape="false"/>
</p>
<p:fileUpload value="#{agruparComunidadController.comunidadAAgrupar.documentoAutorizacion}" mode="simple" skinSimple="true" required="true"/>
</div>
</div>
</fieldset>
<div class="float-cleaner marginTopBottom2em"></div>
<!-- Botones-->
<div class="ftr">
<h:commandButton value="#{comunidadesBundle.guardarCambiosBtn}" title="#{comunidadesBundle.guardarCambiosBtn}" action="#{agruparComunidadController.agrupar}" styleClass="buttonContrast azul textSmaller MarginBottom2em floatRMobile"/>
</div>
</h:form>
The action="#{agruparComunidadController.agrupar}" never gets called as the jsf validation is performed before getting the standard message from the api.
The question is how can I put a customized error message?
I'm new to primefaces and I don't know how it gets valiated.
I need to validate this field when the form get's submitted. So it should check if the field is empty and display the custom message instead of the standard message choose:.....
Thank you in advance.
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
My main form is the following:
<h:form id="frmSearch" styleClass="m-bottom">
<div class="form-group">
<label>Funcionário</label>
<h:inputText id="funcionario" value="#{escalaTrabalhoBean.entityToSearch.funcionario.pessoa.nome}" readonly="true" styleClass="form-control" />
<h:commandButton id="btnFuncionario" styleClass="btn btn-default" value="Buscar funcionário" onclick="$('#modBuscaFuncionario').modal('show')" type="button" />
</div>
</h:form>
And I want to update the value of field "funcionario" after I call a function with ajax, which is inside a modal window:
<h:form id="frmSearchBuscaFuncionario">
<h:commandLink id="btnSelecionar" title="Selecionar" actionListener="#{escalaTrabalhoBean.selectFuncionario(obj)}">
<i class="fa fa-pencil-square-o"></i>
<p:ajax oncomplete="$('#modBuscaFuncionario').modal('hide');" update="frmSearch:funcionario" />
</h:commandLink>
</h:form>
This code: update="frmSearch:funcionario" is not working, and I got this error: javax.faces.FacesException: Cannot find component with identifier "frmSearch:funcionario".
Any suggestions?
When you access the components outside of your current h:form use : at the beginning of the Id of the component.
In your example:
update=":frmSearch:funcionario"
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" />
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.