What is the process to switch an Editbox from read mode to edit mode in Xpage?

Question

What is the process to switch an Editbox from read mode to edit mode in Xpage?

Recently, I tried setting the property Read-Only to true in Xpage for a specific field.

However, when attempting to change its mode to edit using client-side JavaScript, I encountered difficulties. Below is the code snippet I used:

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

I also attempted the following:

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

Unfortunately, both approaches failed.

(@Trim)
In addition, the server-side JavaScript XSP code is as follows:

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

javascript lotus-notes xpages

Answer 1

Answer №1

After a thorough investigation, it has been determined that the issue at hand is not related to the field itself. The code provided in the question is indeed suitable for the desired response. The actual problem lies in the fact that the event is defined within a dijit.Dialog.

During the parsing of a dialog in Dojo, the DOM elements are relocated to the end of the body for layout purposes. Regrettably, this action also results in moving them outside of the form. Consequently, any server-side events are disrupted, as the event data is no longer serialized as part of the form. Therefore, in the scenario described, the event does not fail due to incorrect code, but rather because the event itself is not being triggered.

The recommended solution to this issue is to utilize the Dialog component from the Extension Library (or 8.5.3 UP1) rather than a passthru div with a specified dojoType. If this alternative is not feasible, there is a workaround available. You can 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>

By implementing this script, all parsed dialogs will be repositioned inside the form, thereby allowing events within them to once again function correctly.

Answer 2

After a thorough investigation, it has been determined that the issue at hand is not related to the field itself. The code provided in the question is indeed suitable for the desired response. The actual problem lies in the fact that the event is defined within a dijit.Dialog.

During the parsing of a dialog in Dojo, the DOM elements are relocated to the end of the body for layout purposes. Regrettably, this action also results in moving them outside of the form. Consequently, any server-side events are disrupted, as the event data is no longer serialized as part of the form. Therefore, in the scenario described, the event does not fail due to incorrect code, but rather because the event itself is not being triggered.

The recommended solution to this issue is to utilize the Dialog component from the Extension Library (or 8.5.3 UP1) rather than a passthru div with a specified dojoType. If this alternative is not feasible, there is a workaround available. You can 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>

By implementing this script, all parsed dialogs will be repositioned inside the form, thereby allowing events within them to once again function correctly.

Answer 3

Answer №2

In case you want to implement this functionality on the server side, here is a sample code snippet for a button that toggles between read and edit mode:

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

For a comprehensive list of properties for various components that can be accessed via SSJS, refer to this page.

Answer 4

In case you want to implement this functionality on the server side, here is a sample code snippet for a button that toggles between read and edit mode:

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

For a comprehensive list of properties for various components that can be accessed via SSJS, refer to this page.

Answer 5

Answer №3

When you generate the field with the code <xp:inputText id="read" readonly="true"></xp:inputText>

it results in a <SPAN Tag being created, which cannot be converted into a text field

In version 8.5.3, you would access All properties of the field and include an Attribute called READONLY with a value of True

This will generate the following code

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

If you are using versions prior to R8.5.3, you can dynamically add the READONLY attribute to the field on the onClientLoad event of the page using

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

Here is the code snippet

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

Once you have configured the field correctly on the form, you can enable editing by using

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

Answer 6

When you generate the field with the code <xp:inputText id="read" readonly="true"></xp:inputText>

it results in a <SPAN Tag being created, which cannot be converted into a text field

In version 8.5.3, you would access All properties of the field and include an Attribute called READONLY with a value of True

This will generate the following code

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

If you are using versions prior to R8.5.3, you can dynamically add the READONLY attribute to the field on the onClientLoad event of the page using

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

Here is the code snippet

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

Once you have configured the field correctly on the form, you can enable editing by using

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

What is the process to switch an Editbox from read mode to edit mode in Xpage?

Answer №1

Answer №2

Answer №3

Similar questions

After a duration of 4 minutes, an ERR_EMPTY_RESPONSE is thrown in response to the

How can you determine if a mouseover event is triggered by a touch on a touchscreen device?

Setting up vue-apollo 3.0.0 Beta

Expanding size on hover without affecting the alignment of surrounding elements

Implementing a Next.js server-side permanent redirection instead of displaying a 404 error page

Similar to TypeScript's `hasOwnProperty` counterpart

What is the reason for the addEventListener function not being able to access global variables?

Eliminate redundant tags using jQuery

Enhancing serialized form with additional information through an ajax request

Notifying the view with a SignalR message from the controller upon event trigger

Issue with Webstorm not automatically updating changes made to JavaScript files

What is the process of converting the timing from my stopwatch to a standard time format?

jQuery is used to make an object fade out once another object has been moved into place

Error in ng-repeat loop: detecting duplicates when none are present

How to dynamically add events to a JQuery FullCalendar using a loop

Troubleshooting the issue with ajax loadXml callback functionality

Why is AngularJS $http response undefined?

Unable to retrieve elements from the eBay website using JavaScript within a Chrome extension

Determining when props are updated in Vue.js 2 when passing an object as a prop

React.js not displaying image