Как использовать р: Ajax для обновления нескольких компонентов, чтобы

Я пытаюсь сделать следующие JSF страницы:Как использовать р: Ajax для обновления нескольких компонентов, чтобы

<h:form id="form" prependId="false"> 
    <h:panelGrid width="100%"> 
     <h:panelGroup id="tableDiv" layout="block"> 
      <h:panelGroup layout="block" style="text-align: center;"> 
       <p:dataTable id="table" var="_item" 
         value="#{primeBean.findTableModel()}"> 
         ... 
       </p:dataTable> 
      </h:panelGroup> 
     </h:panelGroup> 
     <h:panelGrid columns="2" width="100%"> 
      <h:panelGroup id="barChartDiv" layout="block"> 
       <p:barChart id="barChart" 
        value="#{primeBean.findCartesianModel()}"> 
        <p:ajax event="itemSelect" listener="#{primeBean.handleItemSelect}" 
          update="pieChartDiv,tableDiv" /> 
       </p:barChart> 
      </h:panelGroup> 
      <h:panelGroup id="pieChartDiv" layout="block"> 
       <h:panelGroup layout="block"> 
        <p:pieChart id="pieChart"> 
         <p:ajax event="itemSelect" listener="#{primeBean.handleItemSelect}" 
           update="tableDiv" /> 
        </p:pieChart> 
       </h:panelGroup> 
      </h:panelGroup> 
     </h:panelGrid> 
    </h:panelGrid> 
</h:form>

Когда я нажимаю в любом баре на p:barChart, я ожидаю, что компоненты в обновлении атрибут будет отображаться в том порядке, в котором я объявляю (pieChartDiv,tableDiv), но они отображаются в обратном порядке (tableDiv,pieChartDiv).

Это нормальное поведение? Как обновить список компонентов в том порядке, в котором объявлены элементы?

источник

2013-03-18 gustavodevmax

Это невозможно так , Компоненты просматриваются и обновляются в том же порядке, что и в дереве компонентов JSF.

Одним из способов было бы переставить/сменить оба компонента в иерархии деревьев и визуализировать их визуально с помощью CSS. Это, однако, довольно неуклюже.

Другим способом было бы обновить второй компонент при завершении обновления 1-го компонента (и, следовательно, в итоге получится 2 запроса ajax вместо 1). Вы можете достичь этого с помощью <p:remoteCommand>, который вызывается по завершении <p:ajax>.

Таким образом, вместо

<p:ajax ... update="pieChartDiv,tableDiv" />

использования

<p:ajax ... update="pieChartDiv" oncomplete="updateTableDiv()" /> 
... 
<p:remoteCommand name="updateTableDiv" update="tableDiv" />

источник

2013-03-19 13:52:59 BalusC

Это решение работает нормально! Благодаря! Но p: ajax и f: ajax может реализовать эту функцию на одном компоненте, не так ли? – gustavodevmax

Добро пожаловать. Я не уверен, понимаю ли я ваш последний вопрос. Что именно ты имеешь ввиду? Какая функция? Какой компонент? "Мог"? – BalusC

Я попытался сказать, что тег p: ajax, например, может включать в себя логический атрибут, называемый «updateInOrder», чтобы упростить способ сделать то, что вы предложили для решения этой проблемы. В случае, если атрибут был истинным, порядок обновления может быть выполнен, как указано. Но это была просто мысль об упрощении решения, вопрос уже урегулирован. Спасибо! – gustavodevmax

Из того, что я могу видеть ... Порядок, в котором Вы заявили свои компоненты, следуя

<h:panelGroup id="tableDiv" layout="block"> (1º component) 
      ... 
     </h:panelGroup> 
     <h:panelGrid columns="2" width="100%">(2º component) 
      <h:panelGroup id="barChartDiv" layout="block"> 
       ... 
      </h:panelGroup> 
      <h:panelGroup id="pieChartDiv" layout="block"> 

      </h:panelGroup> 
     </h:panelGrid> 
    </h:panelGrid>

«barChartDiv» и «pieChartDiv» являются вторыми компонентами

источник

2013-03-19 00:49:18

Я знаю, но мне нужно сделать компоненты следующие который я объявляю в атрибуте обновления. Компонент, содержащийся в таблицеDiv, зависит от pieChartDiv. Есть какой-то способ заставить его? – gustavodevmax

Не так элегантно, но рабочий раствор может быть таким:

<p:barChart id="barChart" 
    value="#{primeBean.findCartesianModel()}"> 
    <p:ajax event="itemSelect" listener="#{primeBean.handleItemSelect}" 
     update="pieChartDiv" /> <!-- This will be updated as first. --> 
    <p:ajax event="itemSelect" 
     update="tableDiv" /> <!-- And this will be updated as second. --> 
</p:barChart>

источник

2014-02-10 22:19:07

Как использовать р: Ajax для обновления нескольких компонентов, чтобы

ответ

Смежные вопросы