JSFとJquery AJAX - どのように連携させることができますか？

Question

私はJSFで始まったばかりですが、素晴らしいですが、私はこの最後の壁を理解できないようです。

私は従来のJquery AJAX関数に慣れていますが、これは私の本には完璧です。しかし、私はJSFと調和して動作する方法を見つけることを望んでいました。

ここに私の状況を説明するシナリオがあります。

私は、ユーザーがお互いにメッセージを送ることができる私のウェブサイトにメッセージングページを持っています。だから、私のxhtmlのページでは、私はこのようなものを持っています：

<h:form> 
<h:inputTextarea id="newMessageContent" value="#{conversationBean.newMessage}"/> 
<h:commandButton value="#{siteLang.messages_send}" action="#{conversationBean.sendMessage}"> 
    <f:ajax render=":conversationMessages" execute="newMessageContent"/> 
</h:commandButton> 
</h:form> 

素晴らしいです。ユーザーは自分のメッセージを投稿し、上の会話部にそれを読み込むことができます。しかし今、私はいくつかの機能を追加する必要があります。 - ユーザーがクリックすると、ボタンとテキストエリアが無効になり、操作が完了するまで相互作用が回避されます。そして、ローダーが表示されるはずです - JSFが完了すると、テキストエリアとボタンが有効になり、ローダーが消えるはずです...そしてフォーカスはテキストエリアに戻ります。 jQueryので

は、私は単にこのような何かをするだろう：助けを

$.ajax{ 
    beforeSend: function(){ 
     // Disable textarea and button, show loader 
    }, 
    complete: function() { 
     // Do the inverse of above 
    } 
} 

感謝を！

Answer 1

onevent="jsFunctionName"（なしブラケット）を追加していないあなたの<f:ajax

に必要とあなたのjsFunctionNameが

function openDeleteDevicesDialog(data) { 
    console.log(data.status); //while ,data.status can be 1)"begin" 2)"complete" 3)"success" 
    if (data.status === 'begin') {...} 
    if (data.status === 'complete') {...} 
    if (data.status === 'success') {...} 
} 

ようになっているはずですので、あなたは、この関数を入力する必要がありh:commandButtonの3倍

onclickのがありますf:ajaxが始まる前に実行される...）

通常、あなたはdata.status === 'success'は、そのページがレンダリング行われ、あなたのDOMは、その最終的な形状/状態にあるでコードを実行します。注

also take a look at BalusC answer over here...

Answer 2

これはあなたが探しているものですか？ How can I execute Javascript before a JSF <h:commandLink> action is performed?（ボタンへのリンクを変更する必要があります）

このボタンがWebサイトのどこでも使用されている場合は、カスタムタグを作成することもできます。