0

Estoy utilizando JSF 2.2 con Primefaces 6.2.

Mi problema es que el contenedor que tiene una etiqueta p:textEditor de primefaces tiene la propiedad display: none; en un principio, cuando la cambio con JavaScript a inline me muestra un par de select, sin más, como si no se hubiese renderizado el JavaScript del componente.

Si alguien tiene alguna idea para solucionarlo o sabe a que es debido este problema...

Gracias por adelantado!

EDICIÓN


Código .xhtml (esta en un ui:composition)

<div class="col-g-12">
                <p:textEditor 
                    id="textEditorSendMail" 
                    placeholder="#{msg.management_mail_send_content}" 
                    value="#{managementMailBean.textNewMail}">
                    <f:facet name="toolbar">
                        <span class="ql-formats">
                            <button class="ql-bold"></button>
                            <button class="ql-italic"></button>
                            <button class="ql-underline"></button>
                            <button class="ql-strike"></button>
                        </span>
                        <span class="ql-formats">
                            <select class="ql-font"></select>
                            <select class="ql-size"></select>
                        </span>
                    </f:facet>
                </p:textEditor>
            </div>

Código JavaScript

function show_send_message(event) {
    if (event.target.parentNode.id == "formMailToolbarMessageActions:btnNewMail") {
        document.getElementById("mail_show").style.display = "none";
        document.getElementById("mail_send").style.display = "inline";
    } else {
        document.getElementById("mail_show").style.display = "inline";
        document.getElementById("mail_send").style.display = "none";
    }
}

Código CSS

#mail_send{
    display: none;
}

En un principio el editor esta con el display none, después juego con un botón para "mostrarlo" y "esconderlo"

7
  • 1
    Buenas. Quizás deberías añadir a tu pregunta el código fuente mas relevante (el xhtml en donde tienes problemas por empezar). Por otro lado, yo evitaría utilizar javascript en un framework como jsf. Prefiero que la lógica de presentación este contenida en los managed beans. Pero bueno, completa tu pregunta y seguro podremos ayudar el 12 jun. 2018 a las 13:07
  • Perdona, ya está el código puesto. @AlejandroGiorgi el 12 jun. 2018 a las 19:22
  • Ojo, que JSF en un framework server side... muy pocas cosas se hacen en el cliente, o al menos se evitan hacer. JSF debe mantener el estado de los componentes por cada pedido y si vos modificas esto por javascript cuando el server te responda de nuevo, va a volver al estado original. ¿Probaste con el atributo rendered? el 13 jun. 2018 a las 20:03
  • @AlejandroGiorgi Ahora mismo tengo algo parecido, llamo a un método vació con remoteCommand, y al terminar le digo que actualice el editor, de esta forma me aparece bien, pero me gustaría encontrar la forma de hacerlo limpio y no la "chapuza" que tengo ahora. el 14 jun. 2018 a las 6:40
  • @AlejandroGiorgi También comentar que no utilizo JavaScript más que para mostrar u ocultar elementos en los que no tengo necesidad de procesar en un momento dado, como es el caso que expongo en la pregunta, pero me resulta raro que primefaces no provea de herramientas para este tipo de casos. Por mucho que investigo no encuentro nada. De todas formas gracias por la ayuda. Si en pocos días no se le ocurre a nadie una forma más limpia pondré la solución que utilizo ahora como respuesta por si alguién tiene la misma duda en un futuro. Un saludo. el 14 jun. 2018 a las 6:43

1 respuesta 1

1

No te diré no hagas esto ni lo otro, mas bien te daré una solución.

En tu Bean crea una variable, con su get y set

private Boolean mostrarTextEditor;

public Boolean getMostrarTextEditor() {
    return mostrarTextEditor;
}

public void setMostrarTextEditor(Boolean mostrarTextEditor) {
    this.mostrarTextEditor = mostrarTextEditor;
}

En un método iniciar al cargar el Bean por primera vez setea esta variable a false.

mostrarTextEditor = false;

Crea un metodo en el bean para cambiar el valor de esta variable.

public void mostrarOcultarTextEditor(){
    if (mostrarTextEditor)
        mostrarTextEditor = false;
    else
        mostrarTextEditor = true;
}

A tu textEditor agregale un rendered invocando a la variable booleana que creaste en el Bean.

<p:textEditor id="textEditorId" rendered="#{managementMailBean.mostrarTextEditor}"/>

Y en tu botón llamas al método creado y actualizas(update) el componente a través del id del form.

<h:form id="formTextEditor">
   <p:commandButton value="Mostrar/Ocultar Text Editor" immediate="true" ajax="true" actionListener="#{managementMailBean.mostrarOcultarTextEditor()}" icon="fa fa-eye" update="formTextEditor"/>
   <p:textEditor id="textEditorId" rendered="#{managementMailBean.mostrarTextEditor}"/>
</h:form>

Esta probado, espero haberte ayudado. Bendiciones.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.