Disable a p: inputText through cursor focus in another p: inputText

Question

Disable a p: inputText through cursor focus in another p: inputText

Navigation

#1 by (0 votes)
#2 by (-1 votes)

1

Hello! I'm having difficulty doing a validation. It is the following ... I have a form made inside the components Primefaces 4.0 that has the fields "Cellular" and "Telephone". My intention is for the form to start with these two enabled fields, but when the mouse cursor focuses on one of them, the other is disabled, causing only "Cell" or "Phone" to be populated by the user.

I thought about using ajax events (focus, blur and keyup), but so far I have not achieved a good result. Well, here's my view:

<h:form>
    <h:panelGrid columns="2">

        <h:outputText value="Telefone: " />
        <p:inputText id="out1" value="#{listenerView.telefone}">
            <p:ajax event="focus" update="out2"
                listener="#{listenerView.handleKeyEvent}"
                disabled="#{listenerView.telefoneNulo}" immediate="true"/>
        </p:inputText>


        <h:outputText value="Celular: " />
        <p:inputText id="out2" value="#{listenerView.celular}">
            <p:ajax event="focus" update="out1"
                listener="#{listenerView.handleKeyEvent}"
                disabled="#{listenerView.celularNulo}" immediate="true" />
        </p:inputText>


    </h:panelGrid>
</h:form>

And my MB (listenerView.java):

public class listenerView {

private String telefone;
private String celular;
private boolean telefoneNulo;
private boolean celularNulo;

public boolean isTelefoneNulo() {
    return telefoneNulo;
}

public void setTelefoneNulo(boolean telefoneNulo) {
    this.telefoneNulo = telefoneNulo;
}

public boolean isCelularNulo() {
    return celularNulo;
}

public void setCelularNulo(boolean celularNulo) {
    this.celularNulo = celularNulo;
}

public String getTelefone() {
    return telefone;
}

public void setTelefone(String telefone) {
    this.telefone = telefone;
}

public String getCelular() {
    return celular;
}

public void setCelular(String celular) {
    this.celular = celular;
}

public void handleKeyEvent() {
    if (telefone == null) {
        telefoneNulo = true;
    } else {
        if (celular == null) {
            celularNulo = true;
        }
    }
}

}

Any idea what I'm doing wrong? Thank you.

ajax jsf primefaces

asked by anonymous 07.04.2016 / 03:50

2 answers

-1

If you use jquery it's pretty simple:

$("#out1, #out2").focus(function(){
 $("#out1, #out2").attr("disabled","disabled");
 $(this).removeAttr("disabled");
});

08.04.2016 / 00:59

PHP connection problems with MySQL (Access denied for user) [closed] Insert Multiple Routes in api Google Maps Maps

score 0 · Accepted Answer

Alessandra,

The disabled property is actually part of p:inputText . Another thing: immediate is needed? If not, remove it. Just put the handleKeyEvent to the event of keyup of inputText . So just the user type or delete something from the input, which other field will be enabled or not.

Following code is working:

ListenerView class:

import javax.faces.bean.ManagedBean;

@ManagedBean(name = "listenerView")
public class ListenerView {

    private String telefone;
    private String celular;
    private boolean desabilitarCelular;
    private boolean desabilitarTelefone;

    public String getTelefone() {
        return telefone;
    }

    public void setTelefone(String telefone) {
        this.telefone = telefone;
    }

    public String getCelular() {
        return celular;
    }

    public void setCelular(String celular) {
        this.celular = celular;
    }

    public boolean isDesabilitarCelular() {
        return desabilitarCelular;
    }

    public void setDesabilitarCelular(boolean desabilitarCelular) {
        this.desabilitarCelular = desabilitarCelular;
    }

    public boolean isDesabilitarTelefone() {
        return desabilitarTelefone;
    }

    public void setDesabilitarTelefone(boolean desabilitarTelefone) {
        this.desabilitarTelefone = desabilitarTelefone;
    }

    public void handleKeyEvent() {
        if (telefone != null && telefone.length() > 0) {
            desabilitarCelular = true;
        } else if (celular != null && celular.length() > 0) {
            desabilitarTelefone = true;
        }
    }
}

Excerpt from form:

<h:form>
    <h:panelGrid columns="2">

        <h:outputText value="Telefone: " />
        <p:inputText id="telefone" value="#{listenerView.telefone}" disabled="#{listenerView.desabilitarTelefone}">
            <p:ajax event="keyup" update="celular" listener="#{listenerView.handleKeyEvent}" />
        </p:inputText>


        <h:outputText value="Celular: " />
        <p:inputText id="celular" value="#{listenerView.celular}" disabled="#{listenerView.desabilitarCelular}">
            <p:ajax event="keyup" update="telefone" listener="#{listenerView.handleKeyEvent}" />
        </p:inputText>


    </h:panelGrid>
</h:form>

Abcs!