editboxのモードを読み取りモードからXPageの編集モードに変更する方法は?
-
27-10-2019 - |
質問
実際、私はプロパティに忠実に設定しました - 読み取り専用 の Xpage
特定のフィールドの場合。
そして、私はそのモードを変更して、クライアント側JavaScriptで編集しようとしました。しかし、私は変えることができません。
次のコードを使用しました...
document.getElementById("#{id:read}").readOnly=false;
そしてまた
dojo.attr("#{id:read}","readOnly",false);
どちらも失敗しました...
(@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>
解決
さらにレビューすると、この問題はフィールド自体とは関係ありません。質問に含まれるコードは、目的の回答に適しています。むしろ、問題は、イベントがdijit.dialog内で定義されていることです。
Dojoがダイアログを解析すると、レイアウトの理由でDOM要素を身体の端まで移動します。残念ながら、これはフォームの外側にも移動します。これにより、イベントデータがフォームの一部としてシリアル化されなくなったため、サーバー側のイベントが壊れます。したがって、例では、イベントはイベントコードが間違っているためではなく、イベント自体がトリガーされないために失敗します。
これに対する理想的な解決策は、指定されたドジョイプを備えたパススルーDIVの代わりに、拡張ライブラリ(または8.5.3 UP1)のダイアログコンポーネントを使用することです。これがオプションではない場合は、回避策があります...ページの下部に次のコンポーネントを追加します。
<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>
これにより、すべての解析されたダイアログがフォーム内に戻り、それらの内部のイベントが再び適切に発射されるようになります。
他のヒント
このサーバーサイドを実行したい場合は、読み取り/編集モードを切り替えるボタンの例を次に示します。
var comp = getComponent("inputText1");
if (comp && !comp.isReadonly()) {
comp.setReadonly(true);
}else if (comp && comp.isReadonly()) {
comp.setReadonly(false);
}
を見てみましょう このサイト SSJを介して対話できるすべてのコンポーネントのすべてのプロパティを確認します。
使用してフィールドを作成しますu003Cxp:inputText id="read" readonly="true">u003C/xp:inputText>
サーバーはaを作成します
u003Cspan id="view:_id1:inputText1">u003C/span>
8.5.3では、フィールド上のすべてのプロパティに移動し、trueの値でreadonlyの属性を追加します
これにより、次のマークアップが作成されます
<xp:inputText id="read" defaultValue="Marky">
<xp:this.attrs>
<xp:attr name="READONLY" value="true"></xp:attr>
</xp:this.attrs>
</xp:inputText>
R8.5.3の前のバージョンでは、ページのオンクライアントロードイベントでプログラムでreadonly属性をフィールドに追加できます。
dojo.attr( "#{id:read}"、 "readonly"、 "true");
これがマークアップです
<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>
次に、フォームに正しくフィールドを作成したら、使用して編集可能にすることができます
document.getElementById( "#{id:read}")。removeattribute( 'readonly');