Событие JSF commandButton 'onclick' не является постоянным

Question

Я хочу иметь изображения с возможностью клика, которые изменяются при перевертывании/выводе/клике. Разумеется, я хочу, чтобы после «onclick» страница не перезагрузилась.
Я пытаюсь выполнить это с помощью h: image или h: commandButton - оба работают не так, как ожидалось. наиболее раздражающим это так: я имею в моем коде-бобе следующей простой функции:

public String getClick() 
{ 
    return "alert('abc')"; 
} 

и в файле JSP, следующий код:

<td><h:commandButton id="a" type="button" value="click" onclick="#{CodeBean.click}" /></td> 
<td><h:commandButton id="b" type="button" image="/resources/empty.jpg" onclick="#{CodeBean.click}" /> 

на щелчок, и повышение в поле предупреждения, однако, только вторая перезагружает страницу, а первая - нет. не знаю, что мне с этим делать, но когда я смотрю на источник скомпилированной страницы, я вижу, что тип первой кнопки остается «кнопкой», а второй - «образ».

любые предложения? веселит, Эрез

Answer 1

по умолчанию поведения <h:commandButton> (и <h:commandLink>), чтобы отправить форму POST родительской, который указан на <h:form>.

Атрибут onclick позволяет разработчику выполнить часть кода JavaScript прямо перед отправкой формы. Он по умолчанию не блокирует отправку формы. Если вы хотите заблокировать поведение кнопки по умолчанию (отправьте форму), вам нужно добавить return false; в onclick.

В случае <h:commandButton>, type атрибутов по умолчанию компонента в submit и он будет генерировать HTML <input type="submit">. Когда вы измените его на button, он будет превращен в «мертвую» кнопку, которая в принципе ничего не делает, ожидая выполнения каких-либо обработчиков JavaScript, прикрепленных к ней, и создаст HTML <input type="button">. При использовании атрибута компонента image, он будет повернут в карту изображения, которая позволит вам представить положение X, Y курсора относительно изображения (однако в вашем случае вам кажется, что требуется только фоновое изображение; в случае, если вы действительно используете CSS background-image), а атрибут компонента type будет проигнорирован, и он сгенерирует HTML <input type="image">.

Все это четко задокументировано в Кодирование поведения раздел tag documentation.

Если ваше единственное требование, чтобы заблокировать <h:commandButton type="image"> от представления родительской формы, то вам нужно добавить return false; к OnClick, как было сказано ранее:

<h:commandButton image="/resources/empty.jpg" onclick="#{CodeBean.click}; return false;" /> 

Альтернативой является использование type="button" в сочетании с CSS фоновое изображение (так что вы не злоупотребляя атрибут image):

<h:commandButton type="button" styleClass="emptyButton" onclick="#{CodeBean.click}" /> 

следующим в CSS файл, который загружается с помощью <h:outputStylesheet>:

.emptyButton { 
    background-image: url(#{resource['empty.jpg']}); 
}