Как вызвать управляемый JSF-компонент в событии HTML DOM, используя собственный JavaScript?

Question

Как вызвать управляемый JSF-компонент в событии HTML DOM, используя собственный JavaScript?

Мне нужно выполнить JSF управляемый метод действия bean, используя ajax во время HTML DOM load событие, похожее на jQuery's $(document).ready(function() { $.ajax(...) }), Я могу использовать только JavaScript, сгенерированный JSF в этом проекте. Есть ли способ сделать это в родном JSF? Какое событие я могу использовать или какую функцию JSF ajax я могу использовать?

Я использую JSF 2.0, Facelets и PrimeFaces.

18

javascript ajax jsf primefaces facelets

Источник

user2337214 16 май '13 в 13:07

1 ответ

Решение

Другие вопросы по тегам javascript ajax jsf primefaces facelets

user157882 16 май '13 в 13:33 2013-05-16 13:33 · Accepted Answer · 2013-05-16 13:33

Несколько путей.

Используйте трюк с "скрытой формой" (на самом деле "хак" дает уродству лучшую формулировку).
```
<h:form id="form" style="display:none;">
    <h:commandButton id="button" action="#{bean.action}">
        <f:ajax render=":results" />
    </h:commandButton>
</h:form>
<h:panelGroup id="results">
    ...
</h:panelGroup>
```
Вы можете вызвать его в JS, как показано ниже:
```
document.getElementById("form:button").onclick();
```
Обратите внимание на важность запуска onclick() вместо click() в случае <h:commandButton>, onclick() немедленно вызывает onclick функция в то время как click() только вызывает событие "click" для элемента, которое не поддерживается в IE. Если бы вы использовали <h:commandLink> можно смело использовать click() вместо.
Чтобы вызвать его во время load событие, рассмотрите возможность положить его в <h:outputScript target="body">, target="body" автоматически ставит <script> в конце <body> таким образом $(document).ready() Обертка не нужна.
```
<h:outputScript target="body">
    document.getElementById("form:button").onclick();
</h:outputScript>
```
Поскольку вы уже используете PrimeFaces, просто используйте его <p:remoteCommand>,
```
<h:form>
    <p:remoteCommand name="commandName" action="#{bean.action}" update=":results" />
</h:form>
<h:panelGroup id="results">
    ...
</h:panelGroup>
```
Вы можете вызвать его в JS, как показано ниже:
```
commandName();
```
Это, однако, не использует родной JSF jsf.ajax.request() вместо этого он использует собственный jQuery для PrimeFaces (вы знаете, PrimeFaces - это библиотека компонентов JSF поверх jQuery/UI).
Чтобы вызвать его во время load событие, набор autoRun="true",
```
<p:remoteCommand ... autoRun="true" />
```
Создать кастом UIComponent который расширяется UICommand и генерирует необходимый нативный JSF jsf.ajax.request() вызов. Вы тогда в сущности изобретаете <p:remoteCommand> использовать нативный JSF ajax вместо jQuery. Утилита JSF OmniFaces имеет <o:commandScript> компонент, который делает именно это. Смотрите также витрину и исходный код.
```
<h:form>
    <o:commandScript name="commandName" action="#{bean.action}" render=":results" />
</h:form>
<h:panelGroup id="results">
    ...
</h:panelGroup>
```
Вы можете вызвать его в JS, как показано ниже:
```
commandName();
```
Чтобы вызвать его во время load событие, набор autorun="true",
```
<o:commandScript ... autorun="true" />
```
Обновление до JSF 2.3 и использование родного <h:commandScript> составная часть. Это доступно с 2.3.0-m06. Синтаксис точно такой же, как и выше <o:commandScript>, Просто замени o: от h:,