Jak wywołać komponent zarządzany JSF w zdarzeniu HTML DOM przy użyciu natywnego kodu JavaScript?

Potrzebuję wykonać metodę akcji bean zarządzanej JSF przy użyciu ajax podczas zdarzenia HTML DOM load, podobnie jak jQuery's $(document).ready(function() { $.ajax(...) }). Mogę używać tylko JavaScriptu wygenerowanego przez JSF w tym projekcie. Czy jest jakiś sposób, aby to zrobić w macierzystym JSF? Z którego wydarzenia mogę skorzystać lub z której funkcji ajax JSF mogę korzystać?Jak wywołać komponent zarządzany JSF w zdarzeniu HTML DOM przy użyciu natywnego kodu JavaScript?

Używam JSF 2.0, Facelets i PrimeFaces.

Źródło

2013-05-16 Tiago Vieira Dos Santos

Pomyśl o tym pytaniu tutaj: http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready może ci w tym pomóc :). –

@Heppy: Nie, zdecydowanie nie. Czy jesteś nowy w JSF? – BalusC

Kilka sposobów.

Użyj sztuczki "ukrytego formularza" (w rzeczywistości "hack" nadaje brzydocie lepsze brzmienie).
```
<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> 
```
można wywołać go w JS, jak poniżej:
```
document.getElementById("form:button").onclick(); 
```
zanotować wagę wyzwalanie onclick() zamiast click() w przypadku <h:commandButton>. onclick() natychmiast wywołuje funkcję onclick, a click() tylko wyzwala zdarzenie "kliknięcie" na elemencie, co nie jest obsługiwane w IE. Jeśli korzystasz z wersji <h:commandLink>, możesz zamiast tego bezpiecznie używać click().

Aby wywołać to podczas imprezy load, należy rozważyć umieszczenie go w <h:outputScript target="body">. Model target="body" automatycznie wstawia <script> na koniec <body>, więc opakowanie jednostkowe nie jest konieczne.
```
<h:outputScript target="body"> 
    document.getElementById("form:button").onclick(); 
</h:outputScript> 
```
Gdy używasz już PrimeFaces, wystarczy użyć jej <p:remoteCommand>.
```
<h:form> 
    <p:remoteCommand name="commandName" action="#{bean.action}" update=":results" /> 
</h:form> 
<h:panelGroup id="results"> 
    ... 
</h:panelGroup> 
```
można wywołać go w JS, jak poniżej:
```
commandName(); 
```
To jednak nie używa JSF rodzimy jsf.ajax.request(), zamiast tego używa PrimeFaces rodzimy jQuery (wiesz, PrimeFaces jest biblioteka komponentów JSF na do góry jQuery/UI).

Aby wywołać to zdarzenie load, ustaw autoRun="true".
```
<p:remoteCommand ... autoRun="true" /> 
```
Tworzenie niestandardowego UIComponent która rozciąga UICommand i generuje niezbędne JSF natywną jsf.ajax.request() połączenia. Jesteś w istocie na nowo wymyślanie <p:remoteCommand>, aby użyć natywnego JSF ajax zamiast jQuery. Biblioteka narzędziowa JSF OmniFaces ma komponent <o:commandScript>, który dokładnie to robi. Zobacz także showcase i source code.
```
<h:form> 
    <o:commandScript name="commandName" action="#{bean.action}" render=":results" /> 
</h:form> 
<h:panelGroup id="results"> 
    ... 
</h:panelGroup> 
```
można wywołać go w JS, jak poniżej:
```
commandName(); 
```
Aby wywołać go podczas load przypadku ustaw autorun="true".
```
<o:commandScript ... autorun="true" /> 
```
Upgrade do JSF 2.3 i używać rodzimych <h:commandScript> komponent. Jest dostępny od 2.3.0-m06. Składnia jest dokładnie taka sama jak powyżej: <o:commandScript>. Wystarczy wymienić o: przez h:.

Źródło

2013-05-16 13:33:45 BalusC

Dziękuję BalusC! Problem został rozwiązany za pomocą opcji secound, używając komponentu remoteCommand, teraz działa on w 100%! –

Jak wywołać komponent zarządzany JSF w zdarzeniu HTML DOM przy użyciu natywnego kodu JavaScript?

Odpowiedz

Powiązane problemy