JSF2 commandButton; AJAX或非AJAX,它刷新了整个页面

时间:2012-12-24 07:03:43

标签: java ajax jsf jsf-2

这是一个演示案例的简单例子。

你有一个带有Panel和两个commandButton的表单,一个是AJAX,另一个不是。通过单击它们中的任何一个,将在辅助bean中创建一个InputText并添加到Panel。

我的托管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;
}
}

我的XHTML页面

<?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>

我的faces-config.xml为空。

现在,我在上面的代码中遇到了三个问题。有人可以向我澄清一下,我是JSF2的新手。

首先,为什么两个命令按钮的行为相同?点击以太,将刷新整个页面。

第二个问题是,为什么单击非AJAX commandButton一次添加两个Inputfied?

第三个是,为什么在加载页面后将托管bean的范围更改为@SessionScoped会出错? (不知何故只是加载页面,表单发出一个ajax请求,而我没有点击commandButton。为什么会这样?

1 个答案:

答案 0 :(得分:0)

尝试以下方法,这应该会更好。

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

据我所知,对于f:ajax execute属性,应该给出组件的id,你应该在listener属性中调用addDynamic()等方法。

当您点击非ajax按钮时,它会发布整个表单,其中还包含您的ajax命令。所以基本上你的addDynamic()函数被调用两次,一个通过ajax命令,第二个通过非ajax命令。