JSF2 commandButton; AJAX or non AJAX, it refreshed the whole page

Question

this is a simple example which demonstrates the case.

you have a form with a Panel and two commandButton, one is AJAX the other is not. by clicking on any of them, an InputText will be created in the backing bean and added to the Panel.

My managed bean:

@ManagedBean

public class DynamicPanel {

private Panel dynmaic;



public Panel getDynmaic() {
    return dynmaic;
}

public void setDynmaic(Panel dynmaic) {
    this.dynmaic = dynmaic;
}

public String adddynamic(){

    InputText text = new InputText();        
    dynmaic.getChildren().add(text);
    text.setValue(text.getId()+" Size= "+ dynmaic.getChildren().size());
    return null;
}

public String removeall(){
    this.dynmaic.getChildren().clear();
    return null;
}
}

My XHTML page

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core">
<h:head>
    <title>Facelet Title</title>
</h:head>
<h:body>
    <h:form>
        <p:panel id="dynamic" binding="#{dynamicPanel.dynmaic}">

        </p:panel>

        <h:commandButton value="Add with AJAX" id="ajaxBtn" >
        <f:ajax onevent="onClick" execute="#{dynamicPanel.adddynamic()}" render="dynamic" />
         </h:commandButton>

        <h:commandButton value="Add" action="#{dynamicPanel.adddynamic}" />
        <h:commandButton value="remove all" action="#{dynamicPanel.removeall}" />   
    </h:form>


</h:body>
</html>

my faces-config.xml is empty.

Now, I have three issues with the code above. Could someone please clarify it to me, I'm new to JSF2.

the first is, why both command buttons behave the same? clicking on ether one would refresh the whole page.

the second issue is, why clicking on the non AJAX commandButton adds two Inputfieds at a time?

the third is, why changing the scope of the managed bean to @SessionScoped will give an error once you load the page? ( somehow just loading the page, the form issues an ajax request without me clicking on the commandButton. Why is that?

Refer the below link. I am not understanding why are specifying execute="#{dynamicPanel.adddynamic()}" why not "dynamic" as value. http://mkblog.exadel.com/2010/04/learning-jsf-2-ajax-in-jsf-using-fajax-tag/ — Chetan, Dec 24 '12 at 07:13

score 0 · Answer 1 · edited Dec 24 '12 at 09:26

0

Try the following, that should work better.

<h:commandButton value="Add with AJAX" id="ajaxBtn" >
    <f:ajax onevent="click" execute="ajaxBtn"
                            render="dynamic"
                            listener="#{dynamicPanel.adddynamic()}"
     </h:commandButton>

As far as I know, for f:ajax execute attribute the id of the components should be given, and you should call methods such as addDynamic() in listener attribute.

When you click on the non-ajax button, it posts the whole form which also includes your ajax command. so basically your addDynamic() function is called twice, one through ajax command and the second through non-ajax command..

edited Dec 24 '12 at 09:26

Pr0gr4mm3r

6,170
1
18
23

answered Dec 24 '12 at 09:14

cubbuk

7,800
4
35
62

For session scope or conversation scope beans your backing bean should implement Serializable interface. Please take a look at the following post: http://stackoverflow.com/questions/3372687/jsf-backing-bean-should-be-serializable – cubbuk Dec 24 '12 at 09:19
I will try it out and report back – xedus Dec 24 '12 at 10:03
@Pr0gr4mm3r it is not working the first click on the Ajax button works fine, the second click yeld an error status:500. ( I implemented serializable interface and changed the scope of the backing bean to @SessionScoped) – xedus Dec 24 '12 at 10:46
It is because your addDynamic() function returns null, it should return the view id of the page that you want to reload. Btw "onevent" attribute on the f:ajax should be "event", my mistake. – cubbuk Dec 24 '12 at 11:37
I think returning null is not the issue here as I don't want to navigate away from the same page I'm on. – xedus Dec 24 '12 at 13:08
is it possible that you get an exception in the adddynamic function? – cubbuk Dec 24 '12 at 14:02

JSF2 commandButton; AJAX or non AJAX, it refreshed the whole page

1 Answers1