3

そのため、プレーンな JavaScript と primefaces ダイアログ コンポーネントを統合する際に問題があります。ユーザーは、JavaScript によって動的に生成された多数の Div 要素 (複数) をクリックしたときの応答として、オーバーレイ ダイアログ (単一) を取得する必要があります。ダイアログの内容は、ユーザーがクリックした div 要素によって異なります。

この問題を模倣する単純化された構造は次のとおりです。

JavaScript（Googleクロージャー）：

// this code is in a loop that creates multiple div elements
// in the page dom structure.

var iconDiv = goog.dom.createDom('div', {
        'id': nodeId, // **
        'class': 'icondiv',
        'style': iconDivStyle   // **
    }, goog.dom.createDom('img', {
        'src': 'layer_icons/unused.png',
        'class': 'iconDivImg',
        'style': 'width:100% ;position:absolute; height: auto; '
    }));

       goog.events.listen(iconDiv,goog.events.EventType.CLICK,function (e){
    // in an ideal situation, the stringField is set to 'this.id' here ...
            dlg1.show();
        });

//** these are the code lines that mark the difference between the
//   divs created in the loop.

素数ダイアログ:

これは、ユーザーが上記の JavaScript で作成されたアイコンのいずれかをクリックしたときに表示されるダイアログ コンポーネントです。

<p:dialog id="DialogId" dynamic="true" widgetVar="dlg1"> 
    <h:form id="formId">
    <p:outputLabel id="clickedOnDiv_Id" value=" #{managedBean.stringField}"/>
<p:outputLabel id="somePropertyOfThisDiv_Id" value="#{managedBean.stringFieldSetByMethod}"/>
    </h:form>
</p:dialog>

マネージド Bean:

class managedBean {

private String stringField ;  // getter and setter

private String stringFieldSetByMethod ;  // getter and setter

public void method(){

// uses the stringField in some way to set 'stringFieldSetByMethod' ...

}

}

上記は私が達成したいことです。それを達成する方法がすでにわかっている場合は、アドバイスしてください。

次は私がこれまでに試したことです：

次の JavaScript 関数を追加しました。

populateDialog = function(divId){
document.getElementById('formId:hiddenInput').value = divId;
document.getElementById('formId:hdnBtn').click();
}

そのため、onClick イベント ハンドラーは次のように変更されます。

goog.events.listen(iconDiv,goog.events.EventType.CLICK,function (e){
divId = this.id;   // where divId is a variable accessible to populateDialog()
dlg1.show();
        });  // this is inside a loop, so it is set for each created div

次に populateDialog() を OnShow コールバックとしてダイアログに追加し、次のように変更しました。

<p:dialog id="DialogId" dynamic="true" widgetVar="dlg1" onShow="populateDialog();">
       <h:form id="formId">
             <h:inputHidden id="hiddenInput" value="#{nodesBean.stringField}" />
             <p:commandButton id="hdnBtn" ajax="true" actionListener="#{managedBean.method()}" style="display: none;" update=":formId"/>

        <p:outputLabel id="clickedOnDiv_Id" value="#{managedBean.stringField}"/>
        <p:outputLabel id="somePropertyOfThisDiv_Id" value="#{managedBean.stringFieldSetByMethod}"/>
       </h:form>
</p:dialog>

その結果、managedBean.method は呼び出されず、ダイアログが読み込まれるとすべてのフィールドが空になり、populateDialog() が呼び出されるまで JavaScript の進行状況を追跡でき、divId は正しく、JavaScript エラーは発生しません。 . ただし、サーバーは、私が行っているすべてのクライアント側のこぶとジャンプについて完全に無知です。実際に何が起こっているかについての説明をいただければ幸いです。

前もって感謝します！

4

1 に答える 1

2

したがって、ソリューションは次を使用しています：

ダイアログで：

`<h:inputHidden id="hiddenInput" value="#{nodesBean.stringField}" />
<p:remoteCommand name="remoteCommandFunction" process="hiddenInput" update=":formId"/>`

(動的に作成された各 div の) onclick ハンドラーで

goog.events.listen(iconDiv,goog.events.EventType.CLICK,function (e){
divId = this.id;   // where divId is a variable accessible to populateDialog()
dlg1.show();
    });  // this is inside a loop, so it is set for each created div

ダイアログ onshow コールバックとして呼び出される JavaScript 関数:

populateDialog = function(divId){
document.getElementById('formId:hiddenInput').value = divId;
remoteCommandFunction(); // this is cool cause it solves my problem, not cool cause you really have to know what you're looking for in the documentation to find it >:-/
}

最後に、マネージド Bean で:

class managedBean {

private String stringField ;  // getter and setter

private String stringFieldSetByMethod ;  // getter and setter

 public void setStringField(String sf){
         this.stringField = sf;

         method();
      }

public void method(){

// uses the stringField in some way to set 'stringFieldSetByMethod' ...

                   }

}
于 2013-07-02T16:11:10.403 に答える