I am using JSF 2.0 with a Bootstrap 3 framework. Everything seems to be working fine, but I get problems when I want to populate forms in a Bootstrap modal from a RequestScoped CDI bean. It seems to me, after debugging, that the bean is instantiated when the page the modal is in loads, and not when the modal is opened. So, when I then open the modal, the bean does not exist anymore. Here is some of my code:
This is where I open the modal
<li><span class="glyphicon glyphicon-edit"></span> Rediger bruker</li>
This is the modal content, which is on the same page. farmer is the name of bean
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Endre bruker</h4>
</div>
<div class="modal-body">
<div class="well">
<ul class="nav nav-tabs">
<li class="active">Profil</li>
<li>Passord</li>
<li>Referanseperson</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="profile">
<h:form class="form-horizontal form-group">
<fieldset>
<div class="input-group">
<h:outputText id="email" class="form-control" value="#{farmer.theFarmer.email}"/>
Is there any way to prevent the bean from constructing when the page is loaded, but instead when the actual form is rendered?
Looked around on the internet for a long time, but I cannot seem to find anything that helps me.
You can make the component lazily loaded, so that the content is retrieved on a new HTTP request. Assuming you use something like primefaces, you can use p:fragment. If you use RichFaces you can use a rich:outputPanel. Just make sure both of these are set to be rerendered.
You can also use something low level like a JSF panelGrid, and rerender that based on an AJAX call.
Related
I am new to JSF, I having the difficulty to implement the partial refresh/rendering in my JSF 2.2, I'm using .xhtml page, I've searched through Internet for solutions but won't work. Was my practice wrong?
Here is my code:
<h:form>
<div class="container">
<div class="section">
<!-- Icon Section -->
<h:panelGroup id="result" styleClass="row">
<ui:repeat var="project" value="#{homeBean.displayProjectList}">
<div class="col s12 m6 l4">
<div class="card">
<div class="card-image">
<img src="resources/materialize/background1.jpg" />
<span class="card-title">#{project.title}</span>
</div>
<div class="card-content">
<p>#{project.summary}</p>
</div>
<div class="card-action">
More
</div>
</div>
</div>
</ui:repeat>
</h:panelGroup>
<div class="row center">
<h:commandButton styleClass="btn-large yellow lighten-2 black-text" value="SHOW MORE" actionListener="#{homeBean.showMore()}" >
<f:ajax render="result" />
</h:commandButton>
</div>
</div>
</div>
</h:form>
When the command button is pressed, I wish to refresh only the section covered in panelGroup id="result", it did update but I wish to refresh the section only instead of the entire page.
Greatly appreciate for your time and effort.
This looks good to me, should work. Are you sure the entire page is getting refreshed?
The <f:ajax> should do the trick.
I found the answer, for my case I am using JSF 2.2 by importing javax.faces-2.2.7.jar, I should set the following outputScript declaration in head tag
<h:outputScript library="javax.faces" name="jsf.js" target="head" />
and now works like charm.
Refer to :
Programatically adding Ajax Behaviour - “Mojarra is not defined”
remove the actionListener from h:commanButton and put listener in f:ajax and try
I am trying to open a popup using the below code in jsf.
Forgot password
<div class="modal fade" jsf:id="forgotPassword">
<div class="modal-dialog">
<form jsf:id="reset-password-form">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Request for new password</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="inputEmail">EmailId</label>
<div class="col-sm-9">
<input type="text" class="form-control" jsf:id="inputEmail"
jsf:value="#{myBean.passwordResetEmail}"
name="inputEmail" />
<h:message for="inputEmail" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button class="btn btn-primary"
jsf:action="#{myBean.resetPassword}">sendPassword</button>
</div>
</div>
</form>
</div>
</div>
I am facing some issues here.
When the user enters wrong email Id, the user shall be on same page and errors shall be shown. But I see, the popup closes automatically when the invalid emailId is entered.
I also want to display success messages as well.
Can any one help me how to do that.
When the user enters wrong email Id, the user shall be on same page and errors shall be shown. But I see, the popup closes automatically when the invalid emailId is entered.
You're indeed synchronously submitting the form and performing a full page reload. It's exactly that full page reload which causes an apparent "automatically close" of the dialog (it's actually not closed, it's just exactly like you're pressing F5 in browser directly after opening the dialog). You need to submit the form asynchronously and only perform a partial reload.
You can do that by simply enclosing <f:ajax> in the UICommand component, exactly like shown for <h:commandButton> in the average JSF tutorial (which your <button jsf:action> passthrough element ultimately get converted to).
<button ... jsf:action="#{myBean.resetPassword}">
<f:ajax execute="#form" render="#form" />
</button>
Both execute and render attributes indicate in this particular example that the entire form must be processed, and that only the form itself must be partially updated. As long as the form is inside the modal dialog, and not outside, then this will keep the modal dialog open (at least, in the HTML DOM tree).
I also want to display success messages as well.
Just add a (global) faces message in action method.
public void resetPassword() {
// ...
FacesMessage message = new FacesMessage("Some success message");
FacesContext.getCurrentInstance().addMessage(null, message);
}
<h:messages globalOnly="true" />
A null client ID indicates a global faces message and those will only be shown when globalOnly="true" is set.
I'm trying to combine JSF2.2 with bootstrap 3.2.0 components and got stuck when trying to use the button group with a dynamically generated list of labels. I traced the problem down to the ui:repeat tag being included in the generated html and thus preventing the correct css styling of bootstrap.
The xhtml code is:
<div class="btn-group">
<ui:repeat var="role" value="#{editUserView.allRoles}">
<button class="btn btn-success" type="button">#{role.name}</button>
</ui:repeat>
</div>
and the out put html is this:
<div class="btn-group">
<ui:repeat><button class="btn btn-success" type="button">Label1</button></ui:repeat>
<ui:repeat><button class="btn btn-success" type="button">Label2</button></ui:repeat>
<ui:repeat><button class="btn btn-success" type="button">Label3</button></ui:repeat>
<ui:repeat><button class="btn btn-success" type="button">Label4</button></ui:repeat>
<ui:repeat><button class="btn btn-success" type="button">Label5</button></ui:repeat>
</div>
Is there a way to prevent the JSF tag from the xmlns:ui="http://xmlns.jcp.org/jsf/facelets namespace being printed in the generated html WITHOUT having to write custom components?
Update
Just for curiosity, the buttons are being displayed as normal buttons (with spacing in between them) and not as desired in the group button all together style.
This is recognizable as Mojarra issue 2900 which was fixed in 2.2.2. It's currently already at 2.2.8. So, just upgrading Mojarra to latest version should do.
That said, the <ui:repeat> is not a taghandler, but a true UI component. I fixed your question title. The <c:forEach> is a true taghandler. See also JSTL in JSF2 Facelets... makes sense? for the difference.
I'm working with JSF and PrimeFaces and I am using Facelets as view technology. But I got an issue for which I can't find out the cause of the problem and the solution.
This is the Facelets template:
<div id="right">
<div id="top">
<ui:insert name="top"></ui:insert>
</div>
<div id="content">
<div id="content-top">
<ui:insert name="content-top"></ui:insert>
</div>
<div id="content-content">
<ui:insert name="content-content"></ui:insert>
</div>
</div>
</div>
I'm using <p:layout> and <p:tabView> in content-content. When I try to add for example <h:form> to content-top, then I lose content-content from my index. How is this caused and how can I solve this?
Problem resolved by removing form id
Hope that help's someone
I want to call a Servlet which exists in a different war from my war. When user clicks a button we need to call the post method of the servlet. To implement this I did see an existing example which is slightly different but works in that case.
I am using jsf, so in the jsp there is a h:form with another html form inside of it. Below is the code:
<h:form>
<div id="gform" class="column span-20 append-1">
<h:outputText value="Text." /><br/><br/>
<h:commandLink id="addPaymentButton" styleClass="button" onclick='autorenew();return false;'> <span><h:outputText value="Payment Option"/></span> </h:commandLink>
<a id="noThanksButton" href="#"><span><h:outputText value="No Thanks"/></span></a><br/><br/><br/>
<h:outputText style="color:grey" value="Some text" />
<div> </div>
</div>
<form id="hiddenSubmit" method="post" action="https://localhost.myapp.com/myapp/LoginRouter" >
<input type="hidden" name="redirectUrl" value="/myapp/customers/addNewSavedCCInfo.faces"/>
<input type="hidden" name="jump_message" value="IAmJumpingToCC"/>
<input type="hidden" name="jump_url" value="/premiumServices/myPage.htm"/>
<input id="hiddenSubmitButton" type="submit" name="submit" style="display: none" value='' />
</form>
</h:form>
<script language="javascript">
function autorenew(){
window.alert('In js fnt');
document.hiddenSubmit.getElementById('hiddenSubmitButton').click();
window.alert('In js fnt COMPLETE');
return false;
}
So when the button is clicked, javascript is executed which submits the form to the servlet. However I can see in firebug that the second form which I need to submit does not appear. I am not sure how I can call the post method of a servlet class in a different war. Any ideas welcome, I am really stuck!
Thanks.
As per the HTML specification it's forbidden to nest <form> elements. The (mis)behaviour is browser dependent. Some browsers will send all parameters, some browsers will send only the data of the parent form, other browsers will send nothing.
You want to have a single form here. You can perfectly replace the <h:form> by a plain vanilla HTML <form> with the desired action pointing to the servlet in question.