Как установить параметры в управляемом компоненте из JavaScript в PrimeFaces

Question

У меня есть два поля автозаполнения, как показано ниже. Я меняю значения автозаполнения с помощью командной кнопки. Мне нужно сохранить измененные значения.

<p:column colspan="2" rendered="#{empty contactController.selectedContact}"> 
     <p:autoComplete id="contactName1" value="#{newContactRs.contact}" 
         completeMethod="#{contactRelationshipController.completeContacts}" 
         var="contact" itemLabel="#{contact.fullName}" 
         itemValue="#{contact}" converter="#{contactConverter}" 
         forceSelection="true" size="35" scrollHeight="200" 
         panelStyle="width:10px;"> 
       <p:ajax event="itemSelect" update="contactName1" /> 
      </p:autoComplete> 
      <p:commandButton icon="ui-icon-arrow-2-e-w" id="flipButton" 
          styleClass="ui-panel-titlebar-icon" oncomplete="swapInput()"    update="addNewContactRelationshipPanel" immediate="true"/> 
      <smith:contactSelector value="#{newContactRs.contact}" update=":addContactRelationshipForm:addNewContactRelationshipPanel" triggerId="existingContactSelector1" resultList="#{contactRelationshipController.selectAllContact1}"/> 
    </p:column> 

    <p:column colspan="2"> 
     <p:autoComplete id="contactName2" value="#{newContactRs.relatedContact}" 
         completeMethod="#{contactRelationshipController.completeContacts}" 
         var="contact" itemLabel="#{contact.fullName}" 
         itemValue="#{contact}" converter="#{contactConverter}" 
         forceSelection="true" size="35" scrollHeight="200" 
         panelStyle="width:10px;"> 
      <p:ajax event="itemSelect" update="contactName2" /> 
     </p:autoComplete> 
    <smith:contactSelector value="#{newContactRs.relatedContact}" update=":addContactRelationshipForm:addNewContactRelationshipPanel" triggerId="existingContactSelector2" resultList="#{contactRelationshipController.selectAllContact2}"/> 
    </p:column> 

При нажатии на CommandButton с идентификатором «flipButton» следующий JavaScript вызывается и обменивает значения полей автозаполнения

function swapInput() 
{ 
    var input_a =document.getElementById('addContactRelationshipForm:contactName1_input').value; 
    var input_b =document.getElementById('addContactRelationshipForm:contactName2_input').value; 

    document.getElementById('addContactRelationshipForm:contactName1_input').value = input_b; 
    document.getElementById('addContactRelationshipForm:contactName2_input').value = input_a; 
} 

После замены значения пытаюсь сохраняются обмениваемых значения, но исходные значения сохраняются вместо переменных. Я должен установить измененные значения в bean-компоненте, но не уверен, как это сделать, используя javascript или perffaces.

Answer 1

Изменение commandButton в

<p:commandButton icon="ui-icon-arrow-2-e-w" 
       id="flipButton" 
       styleClass="ui-panel-titlebar-icon" 
       oncomplete="swapInput()" 
       update="addNewContactRelationshipPanel" 
       immediate="true" 
       process="@this" 
       actionListener="#{contactRelationshipController.setSwapInputFlag()}"/> 

, а затем проверить на swapInputFlag в то время как сохраняющиеся поля автозаполнения.

Answer 2

Вы можете использовать Preimefaces p: remoteCommand для выполнения управляемых bean-методов. https://www.primefaces.org/showcase/ui/ajax/remoteCommand.xhtml