вызов метода управляемого компонента из JavaScript для окончательного заполнения диалогового компонента Primefaces

Question

Таким образом, у меня возникла проблема интеграции простого JavaScript и компонента диалогового окна. Пользователь должен получить диалог оверлея (одиночный) в качестве ответа на щелчок по нескольким динамически генерируемым 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. 

primefaces:

это диалоговый компонент, который отображается, когда пользователь нажимает на любой из значков , созданный в приведенном выше 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> 

Managed 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' ... 

} 

} 

выше, что я хотел бы достичь, если вы уже выяснили способ достичь его, пожалуйста, сообщите.

рядом, что я пытался до сих пор:

Я добавил следующий яваскрипт функции:

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 никогда не вызывается, и все поля пусты при загрузке диалога, я могу следить за ходом JavaScript до вызова populateDialog(), divId является правильным и У меня нет ошибок JavaScript. Сервер, однако, совершенно не согласен с обо всех кликах на стороне клиента и прыжках, которые я делаю, объяснение того, что действительно происходит, было бы очень оценено.

Заранее благодарен!

Answer 1

Таким образом, решение использует:

в диалоге:

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

в обработчике OnClick (каждого динамически созданного DIV)

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 

Javascript функция называется в диалоговом OnShow обратный вызов:

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 >:-/ 
} 

наконец, в управляемом компоненте:

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

        } 

}