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

尝试使用ajax请求来呈现标签而不刷新整个页面。到目前为止，每次我点击命令按钮，整个页面都会刷新，我似乎无法弄清楚我做错了什么。为什么这个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>

来源

2014-10-19 Timeflies

为什么不删除'事件= “点击”'部分，让JSF使用H的'默认事件：commandButton'？ – 2014-10-20 06:31:41

显示更多的代码，你可能有嵌套窗体或其他问题，也可以尝试用'execute =“@ form”替换'execute =“checkStatusForm”'' – Daniel 2014-10-20 06:45:10

@Daniel抱歉没有意识到公共回购会需要它，但它必须是因为它是通过大学的github。找到解决方法感谢您的帮助。 – Timeflies 2014-10-21 15:21:19

页面刷新，因为你不使用JSF标准标签（H：头，H：体）。因此，您应该将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

来源

2014-10-21 02:57:25 wittakarn

非常感谢您的帮助。我会在今天晚些时候做出这些更改并尝试一下！ – Timeflies 2014-10-21 12:43:03

不客气。 – wittakarn 2014-10-21 13:40:25

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

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

来源

2014-10-19 18:28:16 Omar

嗯感谢您的帮助..尝试它，但不幸的是仍然似乎刷新整个页面。 – Timeflies 2014-10-19 18:47:56

给予“渲染”属性'@ all'。 – Omar 2014-10-19 20:32:01

啊，仍然没有运气。不知道我错了哪里。认为这只是一个语法问题。 – Timeflies 2014-10-19 20:51:52

您需要使用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; 
    } 
}

来源

2014-10-20 04:30:20 wittakarn

感谢您的帮助，但仍然不适合我。尝试使用操作（来源：https：//github.uc.edu/foucheje/LibraryManagementSystem），整个页面仍然刷新。想知道它是否与另一层有关？ – Timeflies 2014-10-20 22:31:24

该链接不是公开回购@Timeflies，它需要登录。 – wittakarn 2014-10-21 01:10:46

@Timeflies您的链接已损坏。 – wittakarn 2014-10-21 02:18:21

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

回答

相关问题