Question

尝试使用ajax请求呈现标签而不刷新整个页面。到目前为止，每次单击命令按钮，整个页面仍然刷新，我似乎无法弄清楚我做错了什么。

按标题搜索..

<h:commandButton class="addButton" 
                 id="checkStatusButton" 
                 value ="Check Status" 
                 action = "#{itemWeb.findItem}">
    <f:ajax execute="checkStatusForm" 
            event="click" 
            render="statusLabel"/>
</h:commandButton>

<h:outputText id="statusLabel" 
              value="#{itemWeb.foundItem.status}">
</h:outputText>

Answer 1

页面刷新，因为您不使用JSF标准标记（h：head，h：body）。因此，您应该将index.xhtml更改为以下示例。

<!-- 
Index.html setup
Holds the form for input data
-->
<!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:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <link href='http://fonts.googleapis.com/css?family=Roboto' 
              rel='stylesheet' type='text/css'></link>
        <link href='resources/css/main.css' 
              rel='stylesheet' type='text/css'></link>
        <title>
            <ui:insert name="title"
                       Library Management System
        </ui:insert>
    </title>
    <!-- 
   Quick style setup..
    -->
</h:head>

<h:body>
    <h:form id="checkStatusForm">
        <div class="group">
            <h:inputText id="searchCheckInput" 
                         value="#{itemWeb.searchString}">
            </h:inputText>
            <label>Search By Title..</label>
            <span class="highlight"></span>
            <span class="bar"></span>
        </div>
        <h:commandButton class="addButton" 
                         id="checkStatusButton" 
                         value ="Check Status" 
                         action ="#{itemWeb.findItem}">
            <f:ajax execute="checkStatusForm" 
                    event="action" 
                    render="statusLabel"/>
        </h:commandButton>
        <h:outputText id="statusLabel" 
                      value ="#{itemWeb.foundItem.status}">
        </h:outputText>
    </h:form>
</h:body>

</html>

另请参阅：Adding HTML Head and Body Tags

Answer 2

尝试在execute属性中仅处理所需的字段而不是整个表单：

<h:commandButton class="addButton" id="checkStatusButton" value ="Check Status" action = "#{itemWeb.findItem}">
    <f:ajax execute="searchCheckInput" event="click" render="statusLabel"/>
</h:commandButton>

Answer 3

您需要使用event="action"代替event="click"。 event="action"是嵌套在h:commandButton组件中时正在侦听的默认事件。

示例如下所示。

XHTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

    <f:view contentType="text/html">

        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>ajax-call</title>
            </f:facet>
        </h:head>

        <h:body>
            <h:form id="checkStatusForm">
                <h:inputText id="searchCheckInput" 
                             value="#{itemWeb.searchString}">
                </h:inputText>
                <label>Search By Title..</label>

                <br/>

                <h:commandButton class="addButton" 
                                 id="checkStatusButtonListener" 
                                 value ="Check Status (Listener)" 
                                 actionListener="#{itemWeb.findItemListener}">
                    <f:ajax execute="checkStatusForm" 
                            event="action" 
                            render="statusLabel"/>
                </h:commandButton>

                <h:commandButton class="addButton" 
                                 id="checkStatusButton" 
                                 value ="Check Status" 
                                 action="#{itemWeb.findItem}">
                    <f:ajax execute="checkStatusForm" 
                            event="action" 
                            render="statusLabel"/>
                </h:commandButton>
                <br/>
                <h:outputText id="statusLabel" 
                              value ="#{itemWeb.foundItem.status}">
                </h:outputText>
            </h:form>
        </h:body>
    </f:view>
</html>

managedbean

package com.wittakarn.view;

import com.wittakarn.model.Item;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.event.ActionEvent;

/**
 *
 * @author Wittakarn
 */
@ViewScoped
@ManagedBean(name = "itemWeb")
public class ItemWeb implements Serializable{
    private String searchString;
    private Item foundItem;

    public ItemWeb(){
        foundItem = new Item();
    }

    public String getSearchString() {
        return searchString;
    }

    public void setSearchString(String searchString) {
        this.searchString = searchString;
    }

    public Item getFoundItem() {
        return foundItem;
    }

    public void setFoundItem(Item foundItem) {
        this.foundItem = foundItem;
    }

    public void findItem(){
        foundItem.setStatus("status A");
    }

    public void findItemListener(ActionEvent event){
        foundItem.setStatus("status B");
    }
}

域

package com.wittakarn.model;

import java.io.Serializable;

/**
 *
 * @author Wittakarn
 */
public class Item implements Serializable{
    private String status;

    public String getStatus() {
        return status;
    }

    public void setStatus(String status) {
        this.status = status;
    }
}

为什么这个Ajax调用不起作用？

3 个答案: