make appear a component with ajax

lolveley · 25 Jan 2011, 23:58

yes, I can't do that.

here is my files :

index.xhtml
---------------

<?xml version='1.0' encoding='UTF-8' ?>
<!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:p="http://primefaces.prime.com.tr/ui"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <p:panel header="Hello From">
            <p:linkButton href="http://www.primefaces.org/labs" value="Prime Faces"/>
        </p:panel>
        
        <br/>
        
        <h:form id="form1">
            
            <h:commandButton id="cb1" value="cliquez-moi!">
                <p:ajax actionListener="#{bean.magie}" update="form1:it1"/>
            </h:commandButton>
            <h:outputText id="it1" rendered="#{bean.ok}" value="ça marche"></h:outputText>
            
        </h:form>
        
        
        
    </h:body>
</html>

and Bean.java
-----------------

Code: Select all

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

package beans;

import javax.inject.Named;
import javax.enterprise.context.SessionScoped;
import java.io.Serializable;

/**
 *
 * @author lolveley
 */
@Named(value="bean")
@SessionScoped
public class Bean implements Serializable{

    /** Creates a new instance of Bean */
    public Bean() {
        ok=false;
    }

    boolean ok;

    public boolean isOk() {
        return ok;
    }

    public void setOk(boolean ok) {
        this.ok = ok;
    }
    
    
    public String magie(){
        
        ok=true;
        return("");
        
    }

can you help me to make this funny thing possible?

olivier

ps : I use netbeans with jsf 2.1

kwintesencja · 26 Jan 2011, 02:10

You cant update a component with the rendered atribute.try that this:

<h:form id="form1">

<h:commandButton id="cb1" value="cliquez-moi!" >
<p:ajax actionListener="#{bean.magie}" update="panel"/>
</h:commandButton>
<p:outputPanel id="panel">
<h:outputText id="it1" rendered="#{bean.ok}" value="ça marche"></h:outputText>
</p:outputPanel>
</h:form>

kukeltje · 26 Jan 2011, 04:07

or use a p:commandLink/button. It contains the ajax functionality.

lolveley · 27 Jan 2011, 04:31

hello,

thanks.

but it doesn't work, the button appears but no change happens when clicking on it.

here is my index.xhtml file :
--------------------------------

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?>
<!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:p="http://primefaces.prime.com.tr/ui"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <p:panel header="Hello From">
            <p:linkButton href="http://www.primefaces.org/labs" value="Prime Faces"/>
        </p:panel>
        
        
        <h:form id="form1">
            <h:commandButton id="cb1" value="cliquez-moi!">
                <p:ajax actionListener="#{bean.magie}" update="form1:it1"/>
            </h:commandButton>
            <h:panelGroup id="it1">
                <h:outputText rendered="#{bean.ok}" value="ça marche"/>
            </h:panelGroup>
        </h:form>
        
        
        
        
    </h:body>
</html>

olivier

lolveley · 27 Jan 2011, 04:47

it's done!

with this code :

Code: Select all

<h:form id="form1">
            <p:commandButton actionListener="#{bean.magie}" ajax="true" update="form1:it1"
                             value="Click me" >
            </p:commandButton>
            <h:panelGroup id="it1">
                <h:inputText rendered="#{bean.ok}" id="it2"/>
            </h:panelGroup>
        </h:form>

olivier

make appear a component with ajax

Who is online