I am trying to trigger a method in the backing bean on load.
Whenever the link is clicked it throws a NPE , any idea why?, I've included snippets of my code below.
Error: listener="#{userController.validate}": java.lang.NullPointerException: javax.el.ELException
<h:form id="reg">
<h:outputLabel value="Promo" /> :
<h:inputText id="promocode" value="#{userController.promocode}">
<f:ajax render=":promoimage" event="blur" listener="#{userController.validate}"/>
</h:inputText>
<h:commandLink id="dummyclick" value="link">
<f:ajax event="click" render=":promoimage" listener="#{userController.validate}"/>
</h:commandLink>
</h:form>
#ManagedBean(name = "userController", eager= true)
#SessionScoped
public class UserController implements Serializable {
public void validate(AjaxBehaviorEvent event){
........
}
}
<script type="text/javascript">
document.getElementById("reg:dummyclick").click();
</script>
I removed the ajax call and it worked, it was probably pointless in this case. I'd still like to know why it is throwing an NPE though.
<h:commandLink id="dummyclick" value="link" action="#{userController.showPromo}">
</h:commandLink>
.......
<script type="text/javascript">
document.getElementById("reg:dummyclick").click();
</script>
Why you using command link, instead of that use command button and if you set required="true" for inputtext, it will automatically check validation on same button.
Related
I have an JSF 2.2 page which contain forms and a <h:commandButton> to call the method, after the submit button, the method called successfully and all instructions works fine
Problem:
After the button submit, I got an empty page and the URL in the browser is still unchanged
What I want is that after the submit, the page stays the same and shows a growl message.
managedBean.java
#ManagedBean(name="consignmentShipBean")
#ViewScoped
public class ConsignmentShipBean implements Serializable{
public void send(){
//some instructions to do
FacesContext context = FacesContext.getCurrentInstance();
context.addMessage(null, new FacesMessage("Successful", "__") );
}
}
page.xhtml
<p:growl id="growl" globalOnly="true" autoUpdate="true"/>
<h:form>
...
<h:commandButton value="Send" actionListener="#{consignmentShipBean.send}" />
</h:form>
UPDATE
the result after the button submit:
You have to perform an Ajax request, not an usual request. Use a standard button or a PrimeFaces one for it:
<h:commandButton value="Send" actionListener="#{consignmentShipBean.send}" >
<f:ajax update="growl"/>
</h:commandButton>
Or
<p:commandButton value="Send"
actionListener="#{consignmentShipBean.send}" update="growl" />
I keep getting javax.el.PropertyNotFoundException: Target Unreachable, identifier 'i' resolved to null on my PrimeFaces application, when I click on commandButtonwhich is supposed to delete the image but I just can't seem to find the reason. I checked this answer but nothing there is my problem. When I remove or not click on the commandButton the application works, and the var="i" works perfectly for all the other DOM/PF elements, so I'm just stuck here.
Thanks in advance.
Here's my code:
<h:form>
<div id="visor-imagenes">
<p:contentFlow value="#{imageHandler.personalImgList}"
var="i" id="contentFlow"
styleClass="contentWrapp">
<p:graphicImage value="#{fileUploadMB.image}"
styleClass="content"
onclick="clickFlow(this, event)">
<f:param name="id" value="#{i.id}"/>
<h:inputHidden value="#{i.imageDescription}"/>
<p:commandButton icon="ui-icon-trash"
action="#{imageHandler.deleteImage(i.id)}"
update="contentFlow">
</p:commandButton>
</p:graphicImage>
<div class="caption">#{i.imageName}</div>
</p:contentFlow>
</div>
</h:form>
bean:
public void deleteImage(String i) {
this.imgFacade.deleteImage(i);
}
I tried using <f:param, <f:setPropertyActionListener for the i value in commandButton but non of these worked.
setting the commandButton out of the <p:graphicImage throws same error:
<p:contentFlow value="#{fileUploadMB.personalImgList}" var="i" id="contentFlow" styleClass="contentWrapp">
<p:commandButton icon="ui-icon-trash"
action="#{fileUploadMB.deleteImage}"
update="contentFlow">
<f:param name="id" value="#{i.id}"/>
</p:commandButton>
<p:graphicImage value="#{fileUploadMB.image}" styleClass="content" onclick="clickFlow(this, event)">
<f:param name="id" value="#{i.id}"/>
<h:inputHidden value="#{i.imageDescription}"/>
</p:graphicImage>
<div class="caption">#{i.imageName}</div>
</p:contentFlow>
also, I have done overriding to the onClick event for the image, since default clicking redirected to image file.
<script>
function clickFlow(item, e) {
if ($(item).parent().hasClass('active')) {
e.stopImmediatePropagation();
var text = $(item).siblings("input[type=hidden]").attr('value');
$('.image-linker:first-child').attr('href', $(item).attr('src'));
$('.image-linker:first-child').attr('title', text);
$('.image-lightboxer:first-child').attr('src', $(item).attr('src'));
$('.image-linker:first-child').click();
}
}
</script>
the <h:inputHidden value="#{i.imageDescription}" is what allows to fill the lightbox title="" attribute dinamically.
I don't think so but, Could the onClick event being overridden have any effect on this issue?
The <p:contentFlow> is not an UIData component. It is thus not capable of saving and restoring the iteration state during a component tree visit (as required during decode of UICommand component). You'd basically need to print image's unique identifier as a HTTP request parameter during render response.
<p:commandButton icon="ui-icon-trash"
action="#{imageHandler.deleteImage}"
update="contentFlow">
<f:param name="id" value="#{i.id}"/>
</p:commandButton>
public void deleteImage() {
String i = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("id");
this.imgFacade.deleteImage(i);
}
I am seeing different behaviors of and in a page containing multiple forms.
Here is my backing bean:
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
#ManagedBean
#ViewScoped
public class MultiFormBean
{
String inputText1 = "";
String inputText2 = "";
#PostConstruct
public void initializeBean(){
System.out.println("PostConstruct Called ------------------");
}
public String getInputText1()
{
return inputText1;
}
public void setInputText1(String inputText1)
{
this.inputText1 = inputText1;
}
public String getInputText2()
{
return inputText2;
}
public void setInputText2(String inputText2)
{
this.inputText2 = inputText2;
}
public void doSubmit1() {
inputText2 = inputText1;
}
public void doSubmit2() {
inputText1 = inputText2;
}
}
When i use the following xhtml , clicking Submit1 and Submit2 any number of times won't call #PostConstruct more than once:
<h:body>
<h:form id="firstForm" prependId="false">
<h:panelGroup layout="block" id="renderTarget1"/>
<h:inputText id="first_input" value="#{multiFormBean.inputText1}"/>
<h:commandButton id="click1" action="#{multiFormBean.doSubmit1}" value="submit1" type="submit"
onclick="javascript:jsf.ajax.request(this, event, {execute:'firstForm', render:'renderTarget1 secondForm'}); return false;">
</h:commandButton>
</h:form>
<h:form id="secondForm" prependId="false">
<h:panelGroup layout="block" id="renderTarget2"/>
<h:inputText id="second_input" value="#{multiFormBean.inputText2}"/>
<h:commandButton id="click2" action="#{multiFormBean.doSubmit2}" value="submit2" type="submit"
onclick="javascript:jsf.ajax.request(this, event, {execute:'secondForm', render:'renderTarget2 firstForm'}); return false;">
</h:commandButton>
</h:form>
</h:body>
But the following xhtml would call #PostConstruct more than once:
<h:body>
<h:form id="firstForm" prependId="false">
<h:panelGroup layout="block" id="renderTarget1"/>
<h:inputText id="first_input" value="#{multiFormBean.inputText1}"/>
<a4j:commandButton id="click1" action="#{multiFormBean.doSubmit1}" value="submit1" type="submit" execute="#form" render="renderTarget1,secondForm"/>
</h:form>
<h:form id="secondForm" prependId="false">
<h:panelGroup layout="block" id="renderTarget2"/>
<h:inputText id="second_input" value="#{multiFormBean.inputText2}"/>
<a4j:commandButton id="click2" action="#{multiFormBean.doSubmit2}" value="submit2" type="submit" execute="#form" render="renderTarget2,firstForm"/>
</h:form>
</h:body>
Please can anyone help me use the <a4j:commandButton> instead of <h:commandButton>
Also i see that i cannot call the method doSubmit2() with a4j commandButton
I think that problem here is in bug inside JSF2 and Richfaces4. From 4 version Richfaces started using JSF embedded ajax capabilities. And There is a bug with using multiple forms on page with ajax requests. The problem there that richfaces renders special hidden input with the id of currently rendered view state. This id is changed when new view is rendered. And it is also submitted with every request to show that it belongs to some specific view. So when you have multiple forms on the same page after first ajax request the view state is getting the wrong place and it can be not submitted again second time. Sometimes behavior looks like very very wierd with no logical description.
PostConstruct is called twice because server thinks that two requests belong to different views(view state is not sumbitted) and as far as bean is view scoped it is created twice. After clicking aroung ajax can completelly stop working with this because server woukd not recognize the view(probably what you see when you can not click second submit button).
In the first place I recommend you to use latest available version of JSF and Richfaces. This bug (and many more) may be already fixed there.
myBean is in request scope.
<h:form id="indexFormID">
<a4j:outputPanel ajaxRendered="true" layout="block">
<h:inputText id="inputForHD" value="#{myBean.inputParam}"></h:inputText>
<a4j:commandLink value="Submit" action="#{myBean.myMethod}" reRender="renderSuccess" process="indexFormID:inputForHD"></a4j:commandLink>
</a4j:outputPanel>
<h:panelGroup id="renderSuccess">
<h:panelGroup rendered="#{myBean.someBoolean}">
//Some other JSF components go here
</h:panelGroup>
</h:panelGroup>
</h:form>
MyBean class definition:
private String inputParam;
//Getters and setters are there
public String myMethod()
{
log.debug("~ Value of inputParam" +this.getInputParam()); //This is printing null value for inputParam
//when commandLink is clicked
return null;
}
Why my inputParam is not getting set with the input parameters?
Ok I found few issues with your approach:
<h:inputText id="inputForHD" value="#{myBean.inputParam}"></h:inputText>
You are already mapping the inputParam attribute with this bean, why have a new Id "inputForHD"
Use the inputParam itself, if you want to use inputForHD, you can pick the same from request Parameter map like.
String inputForHD = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("indexFormID:inputForHD");
Also as I mentioned previously wrap the output panel inside the and a4j panel e.g.
<h:panelGroup id="renderSuccess">
<h:panelGroup rendered="#{helloWorld.someBoolean}">
//Some other JSF components go here
<h:inputText id="inputForHDasdasd" value="#{helloWorld.inputParam}"></h:inputText>
</h:panelGroup>
</h:panelGroup>
This is working fine, let know if any issues.
I want to change the inputTexts' values when I choose another Skin from my selectOneMenu.
Everything is doing well, my Converter gives back the right Object from the menu, but the inputTexts are not updated.
<h:form>
<h:selectOneMenu id="dropdownSkin"
value="#{helloBean.currentSkin}" defaultLabel="Select a skin.."
valueChangeListener="#{helloBean.skinValueChanged}" immediate="true"
onchange="this.form.submit()" converter="SkinConverter" >
<f:selectItems value="#{helloBean.mySkinsSI}" var="c"
itemValue="#{c.value}" />
</h:selectOneMenu>
<br />
<h:inputText id="name" value="#{helloBean.currentSkin.title}"></h:inputText>
<br />
<h:inputText id="tcolor" value="#{helloBean.currentSkin.titleBar.textColor}"></h:inputText>
<br />
<h:inputText id="bcolor" value="#{helloBean.currentSkin.titleBar.backgroundColorStart}"></h:inputText>
</h:form>
Here is what my Bean looks like. I debugged it and the Object currentSkin is set correctly. Now i need to know how to update the textfields content.
#ManagedBean
#SessionScoped
public class HelloBean implements Serializable {
private static final long serialVersionUID = 1L;
private List<ExtendedSkin> mySkins;
private List<SelectItem> mySkinsSI;
private ExtendedSkin currentSkin;
public void skinValueChanged(ValueChangeEvent e) {
currentSkin = (ExtendedSkin) e.getNewValue();
FacesContext.getCurrentInstance().renderResponse();
}
public List<ExtendedSkin> getMySkins() {
mySkins = XMLParser.readExtendedSkins();
return mySkins;
}
public List<SelectItem> getMySkinsSI() {
mySkinsSI = new LinkedList<SelectItem>();
for (ExtendedSkin s : getMySkins()) {
mySkinsSI.add(new SelectItem(s, s.getTitle()));
}
return mySkinsSI;
}
public void setMySkinsSI(List<SelectItem> myItems) {
this.mySkinsSI = myItems;
}
public ExtendedSkin getCurrentSkin() {
if (currentSkin == null) {
currentSkin = getMySkins().get(0);
}
return currentSkin;
}
public void setCurrentSkin(ExtendedSkin currentSkin) {
this.currentSkin = currentSkin;
}
}
The problem here is that the converter is doing its work filling the helloBean.currentSkin object, but the values in the <h:inputText> that are bounded to this helloBean.currentSkin: title, textColor and backgroundColorStart will be send to the server and replace the actual values that were loaded by the converter. In other words:
The converter is executed and builds the helloBean.currentSkin based on the selected value.
The <h:inputText id="name"> empty value is sent to server and will be injected in helloBean.currentSkin.title. Same behavior for the other 2 <h:inputText>s.
The view will be loaded using the selected helloBean.currentSkin and it will load the helloBean.currentSkin.title with the empty value. Same behavior for the other 2 <h:inputText>s.
There are two possible solutions to this problem:
Move the <h:inputText>s outside the form, so the empty values won't be send to the server. When loading the view, it will maintain the values loaded in the converter.
<h:form>
<h:selectOneMenu id="dropdownSkin"
value="#{helloBean.currentSkin}" defaultLabel="Select a skin.."
valueChangeListener="#{helloBean.skinValueChanged}" immediate="true"
onchange="this.form.submit()" converter="SkinConverter" >
<f:selectItems value="#{helloBean.mySkinsSI}" var="c"
itemValue="#{c.value}" />
</h:selectOneMenu>
</h:form>
<br />
<h:inputText id="name" value="#{helloBean.currentSkin.title}"></h:inputText>
<!-- rest of Facelets code... -->
Since you're loading the helloBean.currentSkin while changing the selected value on your dropdownlist, you can add ajax behavior using <f:ajax> tag component inside the <h:selectOneMenu> and update the fields in a cleaner way. I would opt for this solution.
<h:form>
<!-- Note that there's no need of the onchange JavaScript function -->
<h:selectOneMenu id="dropdownSkin"
value="#{helloBean.currentSkin}" defaultLabel="Select a skin.."
valueChangeListener="#{helloBean.skinValueChanged}" immediate="true"
converter="SkinConverter" >
<f:selectItems value="#{helloBean.mySkinsSI}" var="c"
itemValue="#{c.value}" />
<f:ajax process="#this" render="name tcolor bcolor" />
</h:selectOneMenu>
<br />
<h:inputText id="name" value="#{helloBean.currentSkin.title}" />
<h:inputText id="tcolor" value="#{helloBean.currentSkin.titleBar.textColor}" />
<br />
<h:inputText id="bcolor"
value="#{helloBean.currentSkin.titleBar.backgroundColorStart}" />
</h:form>
You can learn more about <f:ajax> in online tutorial like this one.
Since you're going to use an ajax call in your page, you should change your managed bean scope from #SessionScoped to #ViewScoped. More info about this here: Communication in JSF 2