How to change the mode of Editbox from read mode to edit mode in Xpage?

Question

Actually, I have set true to the property- Read-Only in Xpage for a particular field.

And I have tried to change its mode to edit in client side javascript. But I am not able to change.
I used the following code...

document.getElementById("#{id:read}").readOnly=false; 

and also

dojo.attr("#{id:read}","readOnly",false); 

Both are failed...

(@Trim)
Also in Server side Javascript XSP Code is:      

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" dojoParseOnLoad="true"
dojoTheme="true">
<xp:this.resources>
    <xp:dojoModule name="dijit.Dialog"></xp:dojoModule>
</xp:this.resources>

<div id="dojoTest" dojoType="dijit.Dialog">
<xp:inputText id="field" defaultValue="Hello" readonly="true"></xp:inputText>

<xp:button value="Label" id="button1">
    <xp:eventHandler event="onclick" submit="true"
        refreshMode="partial" refreshId="field">
        <xp:this.action> <![CDATA[{javascript:getComponent("field").setReadonly(false);}]]></xp:this.action>
    </xp:eventHandler></xp:button>
<xp:br></xp:br></div>

<xp:br></xp:br>
<xp:br></xp:br>
<xp:button value="Show Popup" id="button2">
    <xp:eventHandler event="onclick" submit="false">
        <xp:this.script><![CDATA[dijit.byId("dojoTest").show();]]> </xp:this.script>
    </xp:eventHandler></xp:button>
</xp:view>

Answer 1

Upon further review, this issue has nothing to do with the field itself: the code included in the question is appropriate to the desired response. Rather, the problem is that the event is defined inside a dijit.Dialog.

When Dojo parses a dialog, it moves the DOM elements to the end of the body for layout reasons. Unfortunately, this also moves it outside of the form. This breaks any server-side events, because the event data no longer gets serialized as part of the form. So in your example, the event fails not because the event code is wrong, but because the event itself is never triggered.

The ideal solution to this is to use the Dialog component from the Extension Library (or 8.5.3 UP1) instead of a passthru div with a specified dojoType. If this is not an option, there is a workaround... add the following component at the bottom of the page:

<xp:scriptBlock>
    <xp:this.value><![CDATA[XSP.addOnLoad(function(){
    var dominoForm = XSP.byId("#{javascript:return view.findScriptCollector().getClientId(facesContext);}");
    dojo.query("div.dijitDialog").forEach(function(eachDialog){
        dojo.place(eachDialog, dominoForm, "last");
    });
});]]></xp:this.value>
</xp:scriptBlock>

This should cause all parsed dialogs to be moved back inside the form, allowing events within them to once again properly fire.

Answer 2

If you're looking to do this server side, here's an example of a button that toggles read/edit mode:

var comp = getComponent("inputText1");
if (comp && !comp.isReadonly()) {
    comp.setReadonly(true);
}else if (comp && comp.isReadonly()) {
    comp.setReadonly(false);
}

Take a look at this site to see all the properties for all of the components that you can interact with via SSJS.

Answer 3

By creating the field using <xp:inputText id="read" readonly="true"></xp:inputText>

the server creates a <SPAN Tag - which cannot be converted into a text field

<span id="view:_id1:inputText1"></span>

In 8.5.3 you would go to All properties on the field and add an Attribute of READONLY with a value of True

This would create the following markup

<xp:inputText id="read" defaultValue="Marky">
    <xp:this.attrs>
        <xp:attr name="READONLY" value="true"></xp:attr>
    </xp:this.attrs>
</xp:inputText>

In versions prior to R8.5.3 you can add the READONLY attribute to the field programmatically on the onClientLoad event of the page using

dojo.attr("#{id:read}", "READONLY", "true");

Here's the markup

<xp:inputText id="read" defaultValue="Marky">

</xp:inputText>

<xp:eventHandler event="onClientLoad" submit="false">
    <xp:this.script><![CDATA[dojo.attr("#{id:read}", "READONLY", "true");]]></xp:this.script>
</xp:eventHandler>

THEN once you have create the field on the form correctly you can make it editable by using

document.getElementById("#{id:read}").removeAttribute('readOnly');