3

Ajax (jQuery) 経由で送信できる 2 つの個別のフォームを含むページがあります。これらのフォームごとに、読み込みインジケータをユーザーに表示したいと思います。これらのアイコンを簡単に表示できる素敵なコードを見つけましたが、フォームが 1 つしかない場合にのみ機能します。

$('.ajaxloader').hide().ajaxStart(function () { 
    $(this).show(); 
}).ajaxStop(function () {
    $(this).hide(); 
});

ajaxloader は、読み込み中の画像を CSS の背景画像として表示するクラスです。それを使用するには、次のようなものを追加するだけです。<span class="ajaxLoader">Busy ...</span>

これを自分のページ (2 つのフォームがある) でテストし、2 つのうちの 1 つを送信すると、両方の読み込みインジケーターが表示されます (これは明らかです)。今私の質問は、表示する必要があるインジケーターをどのように表示できますか? span-tag に id 属性をつけようかと考えていたのですが、どうしたらいいのかわかりません。これをできるだけ汎用的にしたいので、コードをハードコードしたり複製したりする必要はありません。

ありがとう！

4

2 に答える 2

3

現在のソリューションのような「キャッチオール」を実行するのではなく、「show loading indicator」コールバックを Ajax クエリ自体にアタッチできます。

あなたの$.ajax()呼び出しでこのようなもの：

$.ajax("/form1/target", {
    beforeSend: function() {
        $(".ajax-loader-1").show();
    },
    complete: function() {
        $(".ajax-loader-1").hide();
    }
});

(そして、そのための Ajax 呼び出しが定義されている場合は、2 番目のフォームにも同様のものがあります)

于 2012-07-17T10:17:36.993 に答える
1

フォームが送信されたときに開始し、他のフォームを非表示にすることを考えましたか。

$('.yourSubmitButton').click(function () {
    $(this).parent().find('.ajaxLoader').show();
});

$('.ajaxloader').hide().ajaxStop(function () {
    $(this).hide(); 
});

したがって、ローダーは送信されたばかりのフォーム内に表示され（ボタンまたはリンクを使用して送信していると思いますか？）、ajaxリクエストが停止すると両方が再び非表示になります。

于 2012-07-17T10:16:28.023 に答える