Comment changer le mode de Editbox du mode lecture au mode d'édition XPage?

Question

En fait, je l'ai mis fidèle à la propriété- en lecture seule dans Xpage pour un domaine particulier.

Et j'ai essayé de changer son mode de modifier en javascript côté client. Mais je ne suis pas en mesure de changer.
J'ai utilisé le code suivant ...

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

et aussi

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

Les deux sont échoué ...

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

Après un examen plus approfondi, cette question n'a rien à voir avec le champ lui-même: le code inclus dans la question est appropriée à la réponse souhaitée. Au contraire, le problème est que l'événement est défini à l'intérieur d'un dijit.Dialog.

Lorsque Dojo parse une boîte de dialogue, il déplace les éléments DOM à la fin du corps, pour des raisons de mise en page. Malheureusement, cela se déplace également à l'extérieur de la forme. Cela rompt tous les événements côté serveur, car les données d'événement ne se sérialisé dans le cadre de la forme. Donc, dans votre exemple, l'événement échoue non pas parce que le code d'événement est erroné, mais parce que l'événement lui-même est jamais déclenché.

La solution idéale pour cela est d'utiliser le composant de dialogue de la bibliothèque d'extension (ou 8.5.3 UP1) au lieu d'un div avec un passthru dojoType spécifié. Si ce n'est pas une option, il existe une solution ... ajouter le composant suivant au bas de la 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>

Cela devrait faire toutes les boîtes de dialogue analysable à être déplacés à l'intérieur du formulaire, ce qui permet des événements en leur sein une fois de plus correctement le feu.

Answer 2

Si vous cherchez à faire de ce côté-serveur, voici un exemple d'un bouton qui permet de basculer le mode lecture / édition:

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

Jetez un oeil à ce site pour voir toutes les propriétés de tous les composants que vous pouvez interagir avec via SSJS.

Answer 3

En créant le champ à l'aide

le serveur crée une

8.5.3 vous iriez à toutes les propriétés sur le terrain et ajouter un attribut de READONLY avec une valeur True

Cela créerait le balisage suivant

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

Dans les versions antérieures à R8.5.3 vous pouvez ajouter l'attribut lecture seule au champ programme sur l'événement onClientLoad de la page en utilisant

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

Voici la balise

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

puis une fois que vous avez créer le champ sur le formulaire correctement, vous pouvez le rendre modifiable en utilisant

document.getElementById. ( "# {Id: lecture}") removeAttribute ( 'readOnly');