Xpages: Refresh read only field on competition of DialogBox

Question

My Xpage is in read mode. There is a Notes field with a "Add Notes" button. Click the button, user adds notes in dialogbox and clicks "Add Notes". The button does the work of adding the notes and saving the document.

I want to update the underlying notes field so the user will see their additions. How can I accomplish this?

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xp:panel id="pnlAll">
        <xp:this.data>
            <xe:objectData saveObject="#{javascript:PCModel.save()}"
                var="PCModel">
                <xe:this.createObject><![CDATA[#{javascript:var pc = new com.scoular.model.PC();
var unid = sessionScope.get("key");
if (unid != null) {
    pc.loadByUnid(unid);
    sessionScope.put("key","");
    viewScope.put("readOnly","Yes");
} else {
    pc.create();
    viewScope.put("readOnly","No");
}
viewScope.status = pc.status;
return pc;}]]></xe:this.createObject>
            </xe:objectData>
        </xp:this.data>
        <xp:inputTextarea id="inputTextarea3" cols="1" rows="10"
            disabled="true" value="#{PCModel.notes}">
        </xp:inputTextarea>
        <xp:br></xp:br>
        <xp:button value="Add Notes" id="button1">
            <xp:eventHandler event="onclick" submit="true"
                refreshMode="complete">
                <xp:this.action><![CDATA[#{javascript:getComponent("dialogAddNotes").show()}]]></xp:this.action>
            </xp:eventHandler>
        </xp:button>
        <xp:br></xp:br>
        <xp:div styleClass="modal fade" id="model1" role="dialog">
            <xe:dialog id="dialogAddNotes" styleClass="modal-dialog"
                title="Add Notes">
                <xp:div style="margin-left:10.0px;margin-right:10.0px">
                    <xp:inputTextarea id="inputTextarea4" value="#{viewScope.addNotes}"
                        cols="1" rows="18">
                    </xp:inputTextarea>
                </xp:div>
                <xp:div styleClass="modal-footer">
                    <xp:button type="button" styleClass="btn btn-primary" id="button17"
                        value="Add Notes">
                        <xp:eventHandler event="onclick" submit="true"
                            refreshMode="partial" refreshId="dialogAddNotes">
                            <xp:this.action><![CDATA[#{javascript:var newLne = "\n";
var oldNte = PCModel.notes;
var usrNme:String = userBean.displayName;
var dte = session.createDateTime(@Now());

var lnkStr:String = "Notes added by " + usrNme + " at " + dte + newLne + newLne + viewScope.addNotes + newLne + newLne + oldNte;

var newNotes:String = lnkStr
PCModel.notes = newNotes;
PCModel.save();}]]></xp:this.action>
                        </xp:eventHandler>
                    </xp:button>
                </xp:div>
            </xe:dialog>
        </xp:div>
    </xp:panel>
</xp:view>

Have you tried partially refreshing inputTextarea3 instead of the dialog when saving the comment? — Per Henrik Lausten
Per, great idea. I thought I had already tried this, but when I did now it worked, except the dialogbox was not dismissed. Should I refresh the area that contains the field AND the dialogbox? — Bryan Schmiedeler
I found the answer. I added XSP.closeDialog('#{id:dlgAddNotes}') to the CSJS and now it closes and it also updates the field. Thanks, awesome. — Bryan Schmiedeler
If you turn your response into an answer I will give you credit. — Bryan Schmiedeler

Per Henrik Lausten Per Henrik Lausten · Accepted Answer · 2016-05-20T02:08:01

You need to partially refresh the updated text area field called inputTextarea3 instead of the dialog.

Xpages: Refresh read only field on competition of DialogBox

1 Answers