Как вызвать метод прослушивателя или бэк-компонента после завершения вызова javascript в jsf?

Question

Согласно моему сценарию, нужно сначала вызвать JavaScript. После вызова javascript будут обновлены два скрытых значения. С обновленными скрытыми значениями необходимо вызвать метод Bean. В этом случае я получаю метод javascript и bean в то же время. Поэтому в моем методе bean я не получаю обновленные значения в скрытых полях.

Немного подробно объяснение

Textbox (адрес) используется для ввода адреса. И наличие двух скрытых элементов, которые будут использоваться для хранения названия улицы и имени города на основе поля адреса.

По вызову Javascript, собирая два значения (название улицы и название города) из API карт google (codeAddress()). На основе введенного адреса в текстовом поле обновляются два скрытых поля (улица и город). Метод Bean должен обрабатывать с обновленными скрытыми значениями.

Но из моего кода вызывается бин и скрипт java. Поэтому я не получаю Обновленное значение в Бэк-бэке.

Мой код выглядит следующим образом:

JSF КОД

<h:form prependId="false"> 
    <div id="panel-one"> 
     <h:outputLabel value="ADDRESS"/> 
     <h:inputText type="text" id="address" size="40" value="#{Bean.address}"/> 
     <h:inputHidden id="street" value="#{Bean.streetName}" /> 
     <h:inputHidden id="city" value="#{Bean.city}" /> 
     <h:commandButton type="submit" value="Verify Address" 
      onclick="checkAddress()"> 
      <f:ajax execute="@form" render="@none" listener="#{Bean.checkAddress()}"/> 
     </h:commandButton> 
    </div> 
</h:form> 

Javascript

checkAddress() { 
    document.getElementById("street").value = //Setting value from other javascript API; 
    document.getElementById("city").value = //Setting value from other javascript API; 
} 

В вышеприведенном JavaScript сбора значений и установить его с двумя текстовом поле. С обновленными значениями снова вызовите метод checkAddress () в фоновом режиме. FYI: * checkAddress() * есть AJAX CALL. Я ошибаюсь в h: commandButton JSF, но не знаю, как это исправить. Буду признателен за любую оказанную помощь.

Answer 1

Там уже несколько вещей нечетным с вашим предоставленным кодом:

• Я не вижу необходимости в prependId
• Определение onclick на commandButton это плохая идея [тм]
• Вы настраиваете себя и/или лицо, наследующий этот код вверх для головной боли, имея функцию JS и метод боб как называется checkAddress
• Вы, кажется, ничего не делаете на основе уволенного действия? (С render="@none")

Тем не менее, своего рода хак, который должен делать то, что вам нужно, это скрывает реальную кнопку и нажав на него программно:

<h:form id="addrF"> 
    <h:outputLabel value="ADDRESS"/> 
    <h:inputText type="text" id="address" size="40" value="#{bean.address}"/> 
    <button class="clickMe">Verify Address</button> 

    <h:inputHidden id="street" value="#{bean.streetName}" /> 
    <h:inputHidden id="city" value="#{bean.city}" /> 

    <h:commandButton id="submitBtn" style="display:none;"> 
     <f:ajax execute="@form" render="@none" listener="#{Bean.checkAddress()}"/> 
    </h:commandButton> 
</h:form> 
<h:outputScript> 
    $(".clickMe").click(function(ev) { 
     ev.preventDefault(); 
     $.getJSON(
      "https://maps.googleapis.com/maps/api/geocode/json", 
      { address : $("#addrF\\:address").val() }, 
      function(data) { 
       // set street, city 
       $('#addrF\\:submitBtn').click(); 
      } 
     ); 
    }); 
</h:outputScript> 

Вы, вероятно, хотите дополнительную проверку стоимости и т.д., и ваш доступ к API карт может быть другим (я вообще не использовал его). Дело в том, что вам нужно click() на скрытом commandButton только после того, как ваш вызов ajax завершен.

Answer 2

Попробуйте использовать event = "" в f: ajax, а затем используйте onevent для вызова функции javascript. Значение события будет «click», а значение onevent будет именем функции javascript.как

Answer 3

Вы могли бы попытаться установить задержку на JavaScript setTimeout()

<h:commandButton type="submit" value="Verify Address" 
      onclick="setTimeout(function(){checkAddress()},1000);"> 

1000 милисекунд = 1 второе, вы просто изменить это значение для вашего удобства