Primefaces p: textEditor does not show well after display none

Question

Primefaces p: textEditor does not show well after display none

Navigation

#1 by (1 votes)

0

I am using JSF 2.2 with Primefaces 6.2.

My problem is that the container that has a p:textEditor of primefaces has the property display: none; at the beginning, when the change with JavaScript to inline shows me a pair of select , without more, as if the JavaScript of the component had not been rendered.

If someone has an idea to solve it or knows what is the problem ...

Thanks in advance!

EDITION

Code .xhtml (is in a 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>

JavaScript code

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";
    }
}

CSS Code

#mail_send{
    display: none;
}

At first the editor is with the display none, then I play with a button to "show it" and "hide it"

java javascript css primefaces jsf

asked by montes18295 12.06.2018 в 14:49

source

1 answer

add different classes in a foreach How to demand a specific amount of characters in a field? [closed]

score 1 · Accepted Answer

I will not tell you, do not do this or that, but I will give you a solution.

In your Bean create a variable, with its get and set

private Boolean mostrarTextEditor;

public Boolean getMostrarTextEditor() {
    return mostrarTextEditor;
}

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

In a method, starting to load the Bean for the first time sets this variable to false.

mostrarTextEditor = false;

Create a method in the bean to change the value of this variable.

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

Add text to your textEditor by invoking the Boolean variable that you created in the Bean.

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

And on your button you call the created method and update (update) the component through the form id.

<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>

It's proven, I hope I helped you. Blessings.