2013-05-16 16 views
10

jQuery en $(document).ready(function() { $.ajax(...) }) benzer HTML DOM load etkinlik sırasında ajax kullanarak bir JSF yönetilen fasulye eylem yöntemi yürütmek gerekiyor. Bu projede yalnızca JSF tarafından oluşturulan JavaScript'i kullanabilirim. Yerel JSF'de bunu yapmanın bir yolu var mı? Hangi olayı kullanabilirim veya hangi JSF ajax işlevini kullanabilirim?Yerel JavaScript kullanarak bir HTML DOM olayında JSF yönetilen bir fasulye nasıl çağırılır?

JSF 2.0, Facelets ve PrimeFaces kullanıyorum.

+1

Bu soruyu burada bulabilirsiniz: http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready bu konuda size yardımcı olabilir :). –

+2

@Heppy: Hayır, kesinlikle değil. JSF'ye yeni misiniz? – BalusC

cevap

18

Çeşitli yollar.

  1. "Gizli biçim" hilesini kullanın (aslında "kesmek" çirkinlik hakkında daha iyi bir ifade verilir).

    <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> 
    

    Aşağıdaki şekilde JS çağırabilirsiniz:

    document.getElementById("form:button").onclick(); 
    

    Not Ekle <h:commandButton> durumunda onclick() yerine click() tetikleme önemini. onclick(), click() yalnızca IE'de desteklenmeyen öğedeki "tıklatma" olayını tetiklerken onclick işlevini hemen çağırır. <h:commandLink> kullanıyorduysanız, bunun yerine click() güvenli bir şekilde kullanabilirsiniz.

    , load olay sırasında onu çağırmak <h:outputScript target="body"> koyarak düşünün. target="body", <body>'un sonunda <script> otomatik olarak koyar, böylece $(document).ready() sarıcı gereksizdir.
  2. Zaten PrimeFaces kullandığınız gibi

    <h:outputScript target="body"> 
        document.getElementById("form:button").onclick(); 
    </h:outputScript> 
    

    , sadece kendi <p:remoteCommand> kullanın.

    <h:form> 
        <p:remoteCommand name="commandName" action="#{bean.action}" update=":results" /> 
    </h:form> 
    <h:panelGroup id="results"> 
        ... 
    </h:panelGroup> 
    

    Aşağıdaki şekilde JS çağırabilirsiniz:

    commandName(); 
    

    Ancak bu JSF yerli jsf.ajax.request() kullanmaz, bunun yerine PrimeFaces yerli jQuery (Bildiğiniz kullanır PrimeFaces bir JSF bileşen kütüphanesi jQuery/UI'nin üstü.

    load olay sırasında onu çağırmak için autoRun="true" ayarlayın.
  3. <p:remoteCommand ... autoRun="true" /> 
    

    özel bir UICommand uzanır ve gerekli MTU yerli jsf.ajax.request() çağrı oluşturur UIComponent oluşturun. Daha sonra jQuery yerine doğal JSF ajax kullanmak için <p:remoteCommand>'u yeniden icat ediyorsunuz. JSF yardımcı kitaplığı OmniFaces, tam olarak bunu yapan bir <o:commandScript> bileşenine sahiptir. Ayrıca showcase ve source code'a da bakın.

    <h:form> 
        <o:commandScript name="commandName" action="#{bean.action}" render=":results" /> 
    </h:form> 
    <h:panelGroup id="results"> 
        ... 
    </h:panelGroup> 
    

    Aşağıdaki şekilde JS çağırabilirsiniz:

    commandName(); 
    

    load olay sırasında onu çağırmak için autorun="true" ayarlayın.

    <o:commandScript ... autorun="true" /> 
    

  4. MTU 2.3 Yükseltme ve doğal <h:commandScript> bileşenini kullanır. 2.3.0-m06'dan beri kullanılabilir. Sözdizimi, tam olarak <o:commandScript>'unkiyle aynıdır. Sadece o:'u h: ile değiştirin.

+0

Teşekkür ederiz BalusC! Sorun, remoteCommand bileşenini kullanarak secound seçeneğinizle çözüldü, şimdi% 100 çalışıyor! –

İlgili konular