Ajax with CommandButton

Question

I have a page that has a preRender call that prepares everything to be displayed in the page. I'm not sure if it's relevant, but the page recieves a few params from the index.xhtml that precedes the experience.

I have a commandButton that I need to execute a server-side method (an update, to be precise). There is no need for a refresh on the page.

So I'm using ajax. Here's the button's, code

<h:commandButton value="Save">
    <f:ajax event="click" listener="#{bean.save}"/>
</h:commandButton>

So far, on the java side, here's the bean's save method

public void save(){
    log.debug("Save executed!");
}

I've added some logging to check what's being executed. When I click the button, the only thing that happens is that the preRender method is executed (and not entirely, just a part of it). Nothing else happens. Visually, the page is not refreshed or anything.

I suspect that when I click the button, the page is being refreshed and therefore, the preRender method (called Build()) is executed, but since there are no parameters (remember that the Build requires parameters passed through <f:param>), something bugs out.

Bottom line: I just need to execute the save method when clicking on the button without refreshing or redirecting anything.

Ideas?

--EDIT--

INDEX.XHTML

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:c="http://java.sun.com/jstl/core">
<ui:define name="body">
<h:link outcome="agreementDetail.xhtml" value="EA-15558">
                <f:param name="serviceId" value="EA-15558" />
                <f:param name="site" value="NIC" />
            </h:link>
 </ui:define>

</html>

AgreementDetail.XHTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:ui="http://java.sun.com/jsf/facelets"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:c="http://java.sun.com/jstl/core">

             <f:view>
                <f:event type="preRenderView" listener="#{agreement.build}"/>
            </f:view>
  <ui:define name="body">
    <f:view>
                    <h:form>
    <h:commandButton value="Save" action="#{agreement.save}">
                            <f:ajax/>
                        </h:commandButton><br/><br/>
    <h:dataTable value="#{agreement.licenseServerNames}" var="licenseServerName">
                            <h:column>
                                <h:inputText value="#{licenseServerName}"/>
                            </h:column>
                        </h:dataTable>
</h:form>
            </f:view>
  </ui:define>        


</html>

AgreementBean.java

@ManagedBean(name="agreement")
@RequestScoped
public class AgreementBean {

@ManagedProperty("#{param.serviceId}")
    private String serviceId;

    @ManagedProperty("#{param.site}")
    private String site;

private List<String> licenseServerNames; //GETTERS AND SETTERS OMITTED TO AVOID EXCESS CODE

@PostConstruct
    public void build(){
        logger.debug("START");
        methodOne();    
                logger.debug("END");        
    }

public void save(){
        logger.debug("SAVE!!!!!");
        for(String name : licenseServerNames){
            logger.debug("Servername = "+name);
        }
    }
}

Move the `#{bean.save}` method invocation as the action of your `` and remove everything in the ``, leave it clean. — Luiggi Mendoza, Aug 09 '13 at 19:34
I did, and nothing changed. The only thing that is executed is the preRendered method call, and again, that method is not completed. The logger has a "Start" and an "End" on the Build() method. All I get is a "Start" but no "End". — Nacho321, Aug 09 '13 at 19:48
Edit your question and provide a [SSCCE](http://sscce.org) of your problem for further analysis — Luiggi Mendoza, Aug 09 '13 at 19:49
Try changing your bean from `@RequestScoped` to `@ViewScoped` and try again. — Luiggi Mendoza, Aug 09 '13 at 21:08
I did. It won't load the page now. It says: "Caused by: javax.faces.FacesException: Property site references object in a scope with shorter lifetime than the target scope view" — Nacho321, Aug 09 '13 at 21:16
Ok, now the bean is in View Scope. I added a small javascript to verify that the Ajax is being executed, and it works fine. But the Save() bean method won't execute still. Any more ideas? — Nacho321, Aug 12 '13 at 16:22
I need the ajax because we don't want a full refresh in the user experience. In good theory, when pressing the button, a window should pop saying "Saved". So, Ajax is the option for that. :/ — Nacho321, Aug 12 '13 at 17:29

score 2 · Answer 1 · answered Aug 12 '13 at 20:30

This worked for me."Show" is a boolean that you can set upon successful save.

          <h:commandButton id="ajax" value="Save" action="{agreement.save}" >
                            <f:ajax execute="@form" render="@form" />
              </h:commandButton>
            <h:outputScript rendered="#{agreement.show}">alert("save");</h:outputScript>

Ajax with CommandButton

1 Answers1