Как вызвать метод вспомогательного компонента JSF, только когда происходит событие onclick / oncomplete / on ..., а не при загрузке страницы

Question

У меня есть две кнопки с изображениями:

<div class="sidebarOptions">
    <input type="image" src="images/homeButton.jpg" onclick="#{home.setRendered(1)}"/>
</div>
<div class="sidebarOptions">
    <input type="image" src="images/memberButton.jpg" onclick="#{home.setRendered(2)}"/>
</div>

Однако оба метода сразу же запускаются, когда страница загружается со значениями 1 и 2. Также, когда я нажимаю на нее, оба метода запускаются.

Как мне добиться желаемой функциональности, вызывая метод bean-компонента только тогда, когда кнопка изображения фактически нажата?

Answer 1

Этот подход не будет работать. Вы, кажется, путаете / смешиваете основные концепции веб-разработки "на стороне сервера" и "на стороне клиента" и неправильно понимаете роль JSF и EL.

JSF - это язык на стороне сервера, который запускается на веб-сервере по HTTP-запросу и создает код HTML / CSS / JS, который возвращается с ответом HTTP. Все выражения EL в форме ${} и #{} будут выполняться на стороне сервера во время генерации вывода HTML. JavaScript - это клиентский язык, который работает в веб-браузере и работает в дереве HTML DOM. Атрибут HTML onclick должен указывать функцию JavaScript, которая будет выполняться на стороне клиента в конкретном событии HTML DOM.

Чтобы вызвать метод управляемого компонента JSF, вам необходим атрибут action или *listener. JSF предоставляет компоненты для генерации желаемого HTML-кода и определения желаемых действий Ajax, которые могут изменить состояние на стороне сервера. <input type="image"> может быть сгенерировано с использованием <h:commandButton image>. Метод компонента может быть вызван атрибутом action этого компонента. Этот компонент может быть изменен путем встраивания тега <f:ajax>.

Итак, следующее должно сделать это для вас:

<h:form>
  <div class="sidebarOptions">
    <h:commandButton image="images/homeButton.jpg" action="#{home.setRendered(1)}">
      <f:ajax execute="@this" render=":sidebar" />
    </h:commandButton>
  </div>
  <div class="sidebarOptions">
    <h:commandButton image="images/memberButton.jpg" action="#{home.setRendered(2)}">
      <f:ajax execute="@this" render=":sidebar" />
    </h:commandButton>
  </div>
</h:form>

<!-- The below is just a guess of what you're really trying to achieve. -->
<h:panelGroup id="sidebar" layout="block">
  <h:panelGroup rendered="#{home.rendered eq 1}">
    Home
  </h:panelGroup>
  <h:panelGroup rendered="#{home.rendered eq 2}">
    Member
  </h:panelGroup>
</h:panelGroup>

Смотри также:

• Различия между action и actionListener
• Как вызвать метод действия управляемого компонента в атрибуте * компонента JSF
• Как вызвать управляемый JSF-компонент в событии HTML DOM с использованием собственного JavaScript?