4

Chrome、IE8で動作するように管理したコードがいくつかありますが、FireFoxでは動作しません。ところで:私の a4j: 名前空間は:

アイデアはシンプルです。アイテムが在庫切れになったときに通知を受けたいので、メールを入力すると、小さなフォームがシンプルなありがとう div に置き換えられます。

ただし、FireFoxでは、アクションとBeanメソッドを介してデータベースに正しく送信されます。その後、oncomplete で JS 関数が起動され、ありがとうメッセージが表示されますが、ページのリロードが完了し、元のフォームが再表示されますが、これは望ましくありません。

最初に、フロント ページ コードの RichFaces と Events

<h:inputText id="email" value="#{customer.stockWatch.email}"
    converter="TextTrimConverter"
    onfocus="if(this.value == 'Enter email address'){ this.value=''; }"
    onblur="if(this.value.trim() == ''){ this.value='Enter email address'; }"
    onkeypress="stockWatchEnterSubmit(event.keyCode);" />

<a:commandLink styleClass="b_submit" id="stockwatchSubmit"
    action="#{customer.stockWatch}"
    oncomplete="stockWatchTextChange(); return false;">
    <span>#{messages.submit}</span>
</a:commandLink>

そして今、私が使用する2つの単純なjavascript関数:

function stockWatchTextChange() {
    document.getElementById('fstockwatch').setAttribute('id', 'fstockwatch_thanks');
    document.getElementById('fstockwatch_thanks').innerHTML = 'Thank you. We\'ll send you an email once this item is back in stock';
}

function stockWatchEnterSubmit(keyCode) {
    if(keyCode == 13){
        document.getElementById('stockwatchSubmit').click();
    }
}

ご協力いただきありがとうございます。3 つのうち 2 つのブラウザで動作しました。しかし、十分ではありません!! ;)

JSF はバージョン 1.2 で、RichFaces は 3.01 だと思いますか? RichFaces の正確なバージョンを見つけました:
バージョンは richfaces-api-3.3.1.GA.jar です

編集：提供できる情報がもっとあればいいのにと思います。これは、実際には、Web ページに a4j ロジックの複数の個別の部分がある場合に ajax4jsf / a4j が単に失敗するケースである可能性があります...しかし、問題は、それらがすべて同時に使用されていないことです。それで、私がやったことのような何かがうまくいくはずですか？次のコードにいくつかの変更を加えます。

<h:form id="detailForm" prependId="false">
<h:inputText id="email" value="#{customer.stockWatch.email}"
    converter="TextTrimConverter"
    onfocus="if(this.value == 'Enter email address'){ this.value=''; }"
    onblur="if(this.value == ''){ this.value='Enter email address'; }"
    onkeypress="if(event.keyCode == 13){document.getElementById('stockwatchSubmit').click(); if(event.preventDefault){event.preventDefault();}else{event.returnValue = false;}}" />

<a:commandLink styleClass="b_submit" id="stockwatchSubmit"
    action="#{customer.stockWatch}"
    oncomplete="stockWatchTextChange();">
    <span>#{messages.submit}</span>
</a:commandLink>
</h:form>

私も現在、JavaScript 関数を 1 つだけ使用しています。それは、ラッパー div の id 値を変更し (css を変更するため)、innerHTML を更新することです。

これを解決するのに役立つかもしれないもう1つの情報は、JSF / RICHFACESを何度も書き直して機能させるために何度も書き直したということです->すべてのブラウザでENTERキーを押して送信ボタンをクリックします..

action 属性が単に Bean でメソッドを起動していないことがわかります。メソッドを入力するとすぐに sysout が表示されるので、コンソールで確認できます。そして、これは起こっていません。私たちのシステムはかなり堅牢なので、どう考えればよいかわかりません。a4jが壊れていることを除いて？少なくとも私たちが実行しているバージョンでは..これは非常に単純なコードであり、アクション属性がメソッドに到達していないことを意味します! =)

つまり、メソッドが起動し、レコードがDBに挿入されるすべてのブラウザーで動作するようにしようとしているときに、さまざまな反復が機能することがあります。

しかし、コードの他のリビジョンでは、action 属性は単純に起動しません。それが私が言おうとしていることです。

ありがとうございました！

4

2 に答える 2

4

具体的な問題は、Enter キーでの二重送信が原因です。

入力フィールドには、Enter キーが押されたときに送信ボタンでイベントonkeypressをトリガーするハンドラーがあります。clickただし、イベントのデフォルトの動作を妨げているわけではありません (onkeypressハンドラーがない場合に公開されるように)。Firefox では、コマンド リンクを含む ajax フォームを送信すると、Enter キーを押すことで機能するようです。

基本的に、イベントのデフォルトの動作を防ぐ必要があります。これを実現する最も簡単なクロスブラウザーの方法は、ハンドラーfalseから戻ることです。onkeypress

onkeypress="if (event.keyCode == 13) { document.getElementById('stockwatchSubmit').click(); return false; }"

関数にリファクタリングしたい場合は、ブール値を返させます。

onkeypress="return stockWatchEnterSubmit(event.keyCode)"

と

function stockWatchEnterSubmit(keyCode) {
    if (keyCode == 13) {
        document.getElementById('stockwatchSubmit').click();
        return false;
    } else {
        return true;
    }
}
于 2012-11-02T13:54:13.420 に答える
2

いくつかの考え：

  1. 関連する領域が再レンダリングされないように、のreRenderプロパティを明示的に設定してみてください。commandLink
  2. return falseからを削除してみてoncompleteくださいcommandLink。
  3. あなたの行動は何をしていますか？customerSession.stockWatchアクションが何らかの理由でページのリロードを引き起こしていないことを確認しますか？
于 2012-10-30T17:01:12.523 に答える