CODEWITHSUNDEEP
ajaxjsf
Timeflies
Timeflies

Reputation: 125

Why is this Ajax Call not Working?

Trying to use an ajax request to render a label without refreshing the entire page. So far every time I click the command button the whole page refreshes still and I can't seem to figure out what I am doing wrong.

Search By Title..

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

Upvotes: 0

Views: 395

Answers (3)

wittakarn
wittakarn

Reputation: 3164

The page refresh because you do not use JSF Standard tags(h:head, h:body). Thus, you should change the index.xhtml to below example.

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

See also: Adding HTML Head and Body Tags

Upvotes: 1

wittakarn
wittakarn

Reputation: 3164

You need to use event="action" instead of event="click". The event="action" is namely the default event the is listening on when nested in an h:commandButton component.

An example is shown below.

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");
    }
}

domain

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;
    }
}

Upvotes: 0

Omar
Omar

Reputation: 1440

Try to process only the desired field rather than the whole form, in the execute attribute:

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

Upvotes: 0

Related Questions