0

OK、少し前に、画像のアップロード中にアニメーションの読み込みGIFが表示されないという質問を送信しました（PHP）。これで、画像のアップロード中にGIFを表示できるようになりましたが、IEとFirefoxでは、読み込み中のGIFが消えることはありません（および/理由は？）。フォームは送信されません。Chromeでは、GIFが消えて、フォームが送信されます。以下は私がやっていることです。

<!-- Validates form -->
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script>
function validationloading(){
    // post box blank
    var x=document.forms["livefeed"]["message"].value;
    if (!$.trim($("#styled").val())){
        document.livefeed.message.focus();
        document.livefeed.message.style.border="solid 1px red";
        alert("Cannot post a blank message.");
        return false;
    }

    document.write("<table cellpadding='0' cellspacing='0' border='0' align='center' width='100%' height='130'><tr><td align='center' valign='center'><img src='images/ajax_loader.gif' width='50' height='50'></td></tr></table>");
    return true
    $("#myform").submit();
}
</script>

次の切り取りは、フォームからそれを呼び出すものです。

onSubmit="javascript: validationloading()"

戻り値の真の値をシャッフルしようとしましたが、結果は変わりますが、必要な方法ではありません。IEとFirefoxで送信されますが、読み込み中のGIFは表示されません。私のコードがスロップの山であることは知っていますが、それが私がここにいる理由です。

以下は3つのブラウザで100％動作します。皆さんの助けに感謝します。 

<!-- validates form and displays loading gif -->
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script>
function validationloading(){
    // post box blank
    var x=document.forms["livefeed"]["message"].value;
    if (!$.trim($("#styled").val())){
        document.livefeed.message.focus();
        document.livefeed.message.style.border="solid 1px red";
        alert("Cannot post a blank message.");
        return false;
    }
    //

    document.livefeed.submit(); 
    document.getElementById("gif_block").style.display="block"; //gif_block is the id of the div outside the image
    document.getElementById('livefeed').style.display ='none';
    return true;

}
</script>

GIFdivはこれです。

<div id="gif_block" style="display:none" align="center" ><p><image src="images/ajax_loader.gif" id="loader-img" width="50" height-"50" /></p></div>
4

2 に答える 2

1

そこにはいくつかの問題があります：

  1. validationloading戻り値を介して送信を防ぎたい場合は、それに追加returnする必要があります。

    onsubmit="return validationloading()"

    これは、ブラウザーが内部で上記を次のようなハンドラー関数に変換するためです。

    function(event) {
    // ...your code here...
}

    ...そしてその関数の戻り値を使用します。

  2. 読み込まれたページで使用するdocument.writeと、ページのコンテンツ全体が消去され、で出力したものに置き換えられdocument.writeます。それがフォームの送信を妨げたとしても、私は驚かないでしょう. document.write基本的に Web アプリには居場所がなく、過去 12 年間ほど居場所がありません。:-) DOM オブジェクトとメソッドを使用して、ページに要素を追加したり、スタイルを変更して一部を非表示にしたり、他の要素を表示したりします。(お気に入りの検索エンジンで少し検索すれば、十分な作業ができるはずです。)

  3. 到達できないコードがあります: のsubmit後の呼び出しreturn true。

    return true
$("#myform").submit(); // <== This code will never run

    return関数を終了するため、それ以降のコードは実行されません。

その他の注意事項 (ほぼ間違いなく問題ではありません):

  • ハンドラー属性では、疑似プロトコルonxyzを使用しません。javascript:それらのコンテンツはすでにJavaScript です。リンク上のjavascript:と同様に、URL が必要な場所でのみ使用します。ただし、 JavaScript エンジンにとってはラベル付きのステートメントhrefのように見えるため、通常はエラーにはなりません。
  • 適切な属性名はすべて小文字です。ただし、XHTML を実行している場合にのみ問題になるため、おそらく問題にはなりません。
于 2012-11-05T18:29:14.793 に答える
1

コードにはいくつか問題があります。

  • javascript:hrefまたは属性でのみ意味がありactionます-基本的にURLを見つけることができる場所ならどこでも。実行する JavaScript コードを示すスキームです。イベント ハンドラーまたは<script>タグでは、ループの一部として使用できる単なるラベルです。
  • returnは常に現在のブロックの実行を終了するため、 を実行してから を実行してもまったく意味がreturn trueありません$("#myform").submit();。
  • 実際、$("#myform").submit()無限ループを引き起こす可能性があるという点で、これは潜在的に危険です。独自のonSubmitハンドラー内でフォームを送信すると、ハンドラーを再度起動し、フォームを新たに送信しようとするなどです。
  • document.write()ページの読み込み中に呼び出されていない場合、ページ全体が上書きされます。この場合、それはそれほど大きな問題ではありませんが、あなたが意図していたことではないことは確かです。
  • document.formsのような適切な DOM メソッドを代わりに使用する必要がありますgetElementById。ただし、この場合this、引数として渡すだけvalidationloadingで、送信されるフォームを参照できます。これは、あなたが持っている理由と似ていると思いますdocument.livefeed.message-これらに使用getElementByIdしてください。
  • 関数の戻り値で実際に何もすることはありません。returnスタックを上に上げる必要があります：onSubmit="return validationloading();"

一番の問題はdocument.write事です。それとその後を削除すると、.submit()すべてがうまくいきます。AJAX を使用していない限り、「読み込み中」の GIF を追加する必要はありません。

于 2012-11-05T18:31:29.483 に答える