JSF — Как реализовать JavaScript Вы уверены? запросить ‹h:commandButton›

В моем веб-приложении JSF 1.2 у меня есть страница с <h:commandButton>, которая вызывает метод действия для вспомогательного компонента. Это действие приведет к удалению/замене данных в базе данных, поэтому я хочу избежать любых ситуаций, когда пользователь случайно нажимает кнопку команды.

Я хотел бы реализовать простой "Вы уверены?" приглашение с параметрами «Да/Нет» или «ОК/Отмена» с использованием JavaScript. Я не силен в JavaScript и никогда раньше не смешивал JavaScript с JSF. Может ли кто-нибудь предоставить фрагмент кода, чтобы показать мне, как это реализовать?

Вот часть моей страницы JSP, где я объявляю командную кнопку:

<h:commandButton 
    id="commandButtonAcceptDraft"
    title="#{bundle.tooltipAcceptDraft}" 
    action="#{controller.actionReplaceCurrentReportWithDraft}" 
    image="/images/checkmark.gif">
</h:commandButton>

РЕШЕНИЕ:

Решение, предоставленное BalusC, отлично сработало. Я также хотел упомянуть, что в качестве текста подсказки легко использовать текст из пакета ресурсов. На моей странице я загружаю пакет ресурсов с помощью такого элемента:

<f:loadBundle basename="com.jimtough.resource.LocalizationResources" var="bundle" />

<f:loadBundle> должен быть внутри вашего <f:view>. Затем я добавляю код, предоставленный BalusC, в свой элемент командной кнопки, но заменяю строку из моего пакета ресурсов на «Вы уверены?» текст примерно такой:

<h:commandButton 
    id="commandButtonAcceptDraft"
    title="#{bundle.tooltipAcceptDraft}" 
    action="#{controller.actionReplaceCurrentReportWithDraft}" 
    image="/images/checkmark.gif"
    onclick="return confirm('#{bundle.confirmationTextAcceptDraft}')">
</h:commandButton>

Строка в моем файле ресурсов на английском языке (просто текстовый файл с парами ключ/значение) выглядит так:

# text displayed in user prompt when calling confirm()
confirmationTextAcceptDraft=This will overwrite the current report and cannot be undone. Are you sure?

java javascript jsf myfaces
person Jim Tough    schedule 10.11.2010    source источник

Ответы (4)


arrow_upward
30
arrow_downward

Используйте функцию JavaScript confirm(). Он возвращает значение boolean. Если он возвращает false, то действие кнопки по умолчанию будет заблокировано, иначе оно будет продолжено.

<h:commandButton onclick="return confirm('Are you sure?')" />

Поскольку он уже возвращает boolean, нет абсолютно никакой необходимости оборачивать его в if a, предложенный другими ответами.

person BalusC    schedule 10.11.2010
comment
Решение @CoolBeans в моем случае правильное, потому что в противном случае действие перезагружает страницу. Я использую MyFaces и BootsFaces - person MitchBroadhead; 30.11.2017
comment
@MitchBroadhead Тогда рассматриваемая реализация JSF или библиотека компонентов неправильно генерирует атрибут onclick. Просто просмотрите сгенерированный вывод HTML и сообщите о проблеме ответственному разработчику. - person BalusC; 30.11.2017
comment
я отправил сообщение об ошибке в BootsFaces, и Стефан исправил проблему сейчас - person MitchBroadhead; 21.01.2018

arrow_upward
3
arrow_downward

Вы можете добавить javascript к нажатию кнопки.

<h:commandButton  
    id="commandButtonAcceptDraft" 
    title="#{bundle.tooltipAcceptDraft}"  
    action="#{controller.actionReplaceCurrentReportWithDraft}"  
    onclick="return confirm('Are you sure?')"
    image="/images/checkmark.gif"> 
</h:commandButton>
person bmeding    schedule 10.11.2010
comment
есть преимущества в добавлении ваших событий во внешний скрипт, а не во встроенный. Это работает, но его будет нелегко отредактировать, если вам нужно добавить его к большому количеству элементов или когда-либо понадобится изменить сообщение в будущем. - person zzzzBov; 11.11.2010

arrow_upward
2
arrow_downward

Это должно работать. В идеале он должен быть в файле java-скрипта.

<h:commandButton 
    id="commandButtonAcceptDraft"
    title="#{bundle.tooltipAcceptDraft}" 
    action="#{controller.actionReplaceCurrentReportWithDraft}" 
    image="/images/checkmark.gif"
     onclick="if (!confirm('Are you sure?')) return false">
</h:commandButton>
person CoolBeans    schedule 10.11.2010
comment
Это правильное решение в моем случае. Решение @BalusC вызывает перезагрузку страницы с помощью MyFaces и BootsFaces. Не уверен, почему. - person MitchBroadhead; 30.11.2017

arrow_upward
1
arrow_downward

Я не уверен, какое событие вам придется слушать (я полагаю, onclick), поскольку я никогда не использовал JSF. Вообще говоря, это должно работать.

var element = document.getElementById('commandButtonAcceptDraft');

element.onclick = function(e){
  return confirm('Are you sure etc...');
};
person zzzzBov    schedule 10.11.2010
comment
Если вы хотите использовать javascript для getElementById, я считаю, что вам нужно будет указать имя формы. В JSF фактический идентификатор элемента будет выглядеть примерно так: «formName: commandButtonAcceptDraft». - person bmeding; 10.11.2010