¿Cómo cambiar el modo de cuadro de edición del modo de lectura al modo de edición en XPage?

Question

En realidad, he establecido fiel a la propiedad Solo lectura en Xpage para un campo en particular.

Y he intentado cambiar su modo para editar en JavaScript del lado del cliente. Pero no puedo cambiar.
Use el siguiente código...

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

y también

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

Ambos han fallado ...

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

Tras una revisión adicional, este problema no tiene nada que ver con el campo en sí: el código incluido en la pregunta es apropiado para la respuesta deseada. Más bien, el problema es que el evento se define dentro de un dijit.dialog.

Cuando Dojo analiza un diálogo, mueve los elementos DOM al final del cuerpo por razones de diseño. Desafortunadamente, esto también lo mueve fuera de la forma. Esto rompe cualquier evento del lado del servidor, porque los datos del evento ya no se serializan como parte del formulario. Entonces, en su ejemplo, el evento falla no porque el código del evento sea incorrecto, sino porque el evento en sí nunca se activa.

La solución ideal para esto es usar el componente de diálogo desde la biblioteca de extensión (o 8.5.3 UP1) en lugar de un passthru Div con un dojotipo especificado. Si esta no es una opción, hay una solución alternativa ... Agregue el siguiente componente en la parte inferior de la página:

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

Esto debería hacer que todos los diálogos analizados se retiren dentro del formulario, permitiendo que los eventos dentro de ellos se disparen una vez más.

Answer 2

Si está buscando hacer este lado del servidor, aquí hay un ejemplo de un botón que alterna el modo de lectura/edición:

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

Echa un vistazo a este sitio Para ver todas las propiedades para todos los componentes con los que puede interactuar a través de SSJS.

Answer 3

Creando el campo usandou003Cxp:inputText id="read" readonly="true">u003C/xp:inputText>

El servidor crea un

u003Cspan id="view:_id1:inputText1">u003C/span>

En 8.5.3 iría a todas las propiedades en el campo y agregaría un atributo de Readonly con un valor de verdad

Esto crearía el siguiente marcado

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

En versiones anteriores a R8.5.3, puede agregar el atributo Readonly al campo programáticamente en el evento OnClientLear de la página usando

dojo.attr ("#{id: read}", "readonly", "verdadero");

Aquí está el marcado

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

Luego, una vez que haya creado el campo en el formulario correctamente, puede hacerlo editable usando

document.getElementById ("#{id: read}"). RemoveAtTribute ('Readonly');