Using ajax with JSF

Question

I have some trouble using ajax with JSF. Indeed I'm trying what I'm to do is very simple, but I can't figure it out. I have method that return a String, and I want to print this String only when I click on the button. This method takes 2 argument that I want to pass to the method with 2 inputBox. Here the code I provided so far but it's not finished and I don't if I'm doing it well :

<h:commandButton id="submit" value="Submit"> 
            <f:ajax event="click" />
        </h:commandButton>
        <h:outputText id="result" value="#{cSVobjectCtrl.getJson(48.866667, 2.33333)}" />

The problem with this code is that I get directly the string before I click on the button. What should I change to make this code work the way I want.

EDIT 1 :

<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>JsonValue</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
       <script>
         var show = function(){
         document.getElementById('result').style.display = 'block';
        }
        </script>
    </h:head>

    <h:form>


        <h:commandButton id="submit" value="Submit" onclick="show();" > 
     <f:ajax event="click" render="result"/>
</h:commandButton>
<h:outputText id="result" value="#{cSVobjectCtrl.getJson(48.866667, 2.33333)}" 
              style="display:'none'"/>

    </h:form>


</html>

But the problem still remains. The String is displayed before I click on the button.

Maciej Kowalski · Accepted Answer · 2017-01-21T00:17:07.917

1

This is the solution that have worked for me:

JSF Page

<h:commandButton id="submit" value="Submit">
        <f:ajax event="click" render="resultGroup" listener="#{cSVobjectCtrl.doRender}"/>
</h:commandButton>

<h:panelGroup id = "resultGroup" layout="block" >
    <h:panelGroup rendered="#{cSVobjectCtrl.rendered}">
         <h:outputText id="result" value="#{cSVobjectCtrl.getJson(48.866667, 2.33333)}}" />
    </h:panelGroup>
</h:panelGroup>

Backing Bean

@ManagedBean
@ViewScoped // this is important
public class CSVobjectCtrl{

   private boolean rendered = false;

   public boolean isRendered() {
        return rendered;
    }

    public void setRendered(boolean rendered) {
        this.rendered = rendered;
    }

    public void doRender(AjaxBehaviorEvent event){
        rendered = true;
    }
}

On the side, in an ajax event you have to explicitly specify which component to refresh / render (if you wont nothing is):

render - Evaluates to Collection. The clientIds of components that will participate in the "render" portion of the Request Processing Lifecycle. If a literal is specified the identifiers must be space delimited. Any of the keywords "@this", "@form", "@all", "@none" may be specified in the identifier list. If not specified, the default value of "@none" is assumed. For example, @this clientIdOne clientIdTwo.

edited Jan 21 '17 at 00:17

answered Jan 20 '17 at 23:32

Maciej Kowalski

25,605
12
54
63

Thx for the answern but i still have the same problem. I edited my code maybe i did something wrong ? – Omegaspard Jan 20 '17 at 23:36
style="display:none" .. none without quotes – Maciej Kowalski Jan 20 '17 at 23:39
Ok i have wrapped the output in a panelGroup and work on showing / hiding the panel itself. Try it out – Maciej Kowalski Jan 20 '17 at 23:44
isn't this a little bit of a hack ? This exemple plays on the css attribute, this only hide and show the content of the outPutText. Before I click on the button i don't want the cSVobjectCtrl.getJson(48.866667, 2.33333) to be executed. But maybe it's not possible ? – Omegaspard Jan 20 '17 at 23:44
Ok, let me try another test in that case – Maciej Kowalski Jan 20 '17 at 23:47
Did it. Final solution in the post – Maciej Kowalski Jan 21 '17 at 00:20
Thanks a lot ! It worked ! Could you provide me some explanation about why it wasn't working before ? What is the AjaxBehaviorEvent ? The viewscoped ? – Omegaspard Jan 21 '17 at 00:22
Based on the spec http://docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/facelets/f/ajax.html , this is the required method signature processAjaxBehavior(javax.faces.event.AjaxBehaviorEvent event). You dont need to use the event but it has to be there as a parameter – Maciej Kowalski Jan 21 '17 at 00:26

Using ajax with JSF

1 Answers1