Как передать значение bean-компонента в JavaScript перед отправкой формы

Question

Я делаю веб-страницу о совместном использовании / продаже билетов на автобусы с использованием JSF.
На одной конкретной странице зарегистрированные пользователи могут публиковать свое объявление (предлагая или ища поездку).
Они должны вводить такую ​​информацию, как: заголовок объявления, город происхождения, город назначения, время отправления и т. д.

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

По сути, у меня есть один h:form и h:commandButton, например:

<h:commandButton value="Publish" action="#{adBean.publishAd}" type="submit" onclick="showPopup()">
</h:commandButton>

Проблема в том, что я не знаю, как передать значение бина

<h:inputText value="#{adBean.ad.destinationCity}"/>

к методу JavaScript showPopup().

Я пробовал это, но destinationCity оказывается нулевым.

<h:commandButton value="Publish" action="#{adBean.publishAd}" type="submit" onclick="showPopup(#{adBean.ad.destinationCity})">
</h:commandButton>

Почему это происходит и как я могу передать его значение в код JavaScript?

Answer 1

Это null, потому что он помещен в атрибут (onclick), который используется для JavaScript. Подобные атрибуты «визуализируются» во время отображения страницы, а не (снова) во время отправки или в другие моменты. Поэтому, если он инициализируется null в то время, то с сервера на клиент передается

<button value="Publish" ... onclick="showPopup(null)" />

Цитата из @BalusC об этом в Как вызвать метод действия компонента с помощью ссылки? Онклик не работает :

В JSF только атрибуты , которые интерпретируют выражение EL как MethodExpression, могут использоваться для объявления методов действия. Все остальные атрибуты интерпретируются как ValueExpression, и они немедленно выполняются, когда вывод HTML генерируется JSF. Это относится к атрибуту onclick, значение которого должно фактически представлять функцию JavaScript.

(h:?)inputText на стороне клиента отображается как обычный html inputText, поэтому, если вы хотите получить доступ к его значению до отправки (как я подозреваю, вы хотите), вы можете сделать это в showPopup как в обычном html / javascript.

Как это сделать, упоминается во многих стековых потоках Q / A , поэтому либо выберите тот, который подходит вам лучше всего, например. Как получить значение поля ввода текста с помощью JavaScript? , но обязательно прочитайте Как узнать идентификатор компонента JSF, чтобы использовать его в Javascript