3

私はJSFを始めたばかりで、すばらしく見えますが、この最後の障壁を理解できないようです。

私は伝統的な Jquery AJAX 関数に慣れており、これは私の本では完璧です。しかし、JSF と調和して動作させる方法を見つけたいと思っていました。

これが私の状況を説明するシナリオです。

私の Web サイトには、ユーザーが互いにメッセージを送信できるメッセージ ページがあります。したがって、私の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>

よく働く。ユーザーはメッセージを投稿でき、それが上記の会話 div に読み込まれます。しかし今、いくつかの機能を追加する必要があります。- ユーザーがクリックすると、アクションが完了するまで操作を避けるために、ボタンとテキストエリアを無効にする必要があります。ローダーが表示されます - JSF が処理を完了すると、テキストエリアとボタンが有効になり、ローダーが消えて、フォーカスがテキストエリアに戻ります。

Jquery では、単純に次のようにします。

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

助けてくれてありがとう！

4

2 に答える 2

8

に必要な（括弧なし）を追加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') {...}
}

したがって、この関数を3回入力する必要があります

の onclick はイベントが始まるh:commandButton前に実行されf:ajaxます...)

data.status === 'success'通常、ページのレンダリングが完了し、DOM が最終的な形状/状態になったとき、 when でコードを実行することに注意してください。

こちらのBalusCの回答もご覧ください...

于 2012-04-10T05:33:11.893 に答える
1

これはあなたが探しているものですか？JSF <h:commandLink> アクションが実行される前に Javascript を実行するにはどうすればよいですか? （ボタンへのリンクを変更する必要があります）

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

于 2012-04-10T04:05:14.307 に答える