xpages javascript code for hiding a button

Question

I have a button on my custom control which I want to make it visible in a computed way, so I tried:

currentDocument.isEditable() && getComponent("djTextarea5").value!=""

or

currentDocument.isEditable() && dojo.byId("djTextarea5").value!=""

at the Visible property, but I doesn't work. My DjTextarea5 is not binded on any field from a datasource.

I tried at the rendered property:

<xp:button value="My Hidden Button" id="button1"
            styleClass="lotusFormButton">

            <xp:this.rendered><![CDATA[#{javascript:currentDocument.isEditable() && getComponent("djTextarea5").value}]]></xp:this.rendered>
            <xp:eventHandler event="onclick" submit="true"
                refreshMode="complete" immediate="false" save="true"
                id="eventHandler2">
            </xp:eventHandler>
        </xp:button>

Thanks for your time!

Answer 1

This does work:

currentDocument.isEditable() && getComponent("djTextarea1").value

You don't have to test !="". If you just test for a value in JavaScript it returns false if value is null or "" and otherwise true. In your case it is important to test for null too.

.value is fine. You don't have to get the value with .getValue().

In case your component "djTextarea1" is connected to document's field you should use the field instead the component in your code like

currentDocument.isEditable() && document1.getValue("fieldname")

Update:

The best solution in your case is to use CSJS as you want to show button as soon as a value is entered in "djTextarea5". Here is the code you need:

<xe:djTextarea
    id="djTextarea5"
    value="#{frmDoc.txt_names}">
    <xp:eventHandler
        event="onChange"
        submit="false">
        <xe:this.script><![CDATA[
        if (document.getElementById("#{id:djTextarea5}").value) {
            document.getElementById("#{id:button1}").style.display = 'inline';
        } else {
            document.getElementById("#{id:button1}").style.display = 'none';
        }]]></xe:this.script>
    </xp:eventHandler>
</xe:djTextarea>
<xp:button
    value="Do something with djTextarea"
    id="button1">
    <xp:this.style><![CDATA[#{javascript:
        currentDocument.isEditable() && frmDoc.getValue("txt_names") ?          
            "display:inline" : 
            "display:none"
    }]]></xp:this.style>
</xp:button>

Answer 2

You'll need currentDocument.isEditable() && getComponent("djTextarea5").getValue()!="" - you can't just reference the property itself, you need to call the relevant getter, which will usually be "get" + the property name, capitalising the first letter of the property.

In the SSJS, on the left-hand side, there's a tab for Reference. One of the options on the drop-down there for Control Declaration Snippets. There you can select any control on the page. It will cast the variable to the relevant Java class, providing typeahead of all methods like getValue()