3

2 つのドロップダウンが隣り合っている Web ページがあります。1 つのドロップダウンを変更すると、サーバーに移動して 2 番目のドロップダウンの値を更新します。これには数秒かかるため、待機中に ajax 読み込みイメージを表示するコードを以下に示します。

この問題は、insert after を使用しているため、これを実行すると、2 番目のドロップダウンが数ピクセルにわたってプッシュされ、完了すると、ドロップダウンが元に戻ることです。

これを回避する最善の方法は何ですか。どういうわけか、画像と同じ幅のプレースホルダーを保持する必要があるため、それを表示すると、他のすべてが動かなくなります。

var spinner = $("<img src='/Content/images/ajax-loader.gif' />").insertAfter(item);

$.getJSON("/GetId/" + item.val(), function (data) {
    if (data.Id > 0) {
        $("#SecondDropdown").val(data.Id);
    }
    spinner.remove();
});
4

2 に答える 2

2

すべての上にあるコンテナー内のスピナーの position:absolute は、私がいつも行っている方法です。

<body>
    <div id='ajax_loader'></div>
    <div>
        <select name='1'>
            <option value='yes'>Yes</option>
            <option value='no'>No</option>
        </select>
        <select name='2'>
            <option value='yes'>Yes</option>
            <option value='no'>No</option>
        </select>
    </div>
</body>

基本的に、ドキュメントの最初に ajax ローダーを含む div を配置し、必要に応じて非表示にして表示します。

于 2011-04-18T03:34:58.707 に答える
0

jQuery UI を使用している場合は、positionメソッドを使用して、ドロップダウンに対してスピナーを絶対に配置できます。

var spinner = $('<img src="/Content/images/ajax-loader.gif" />');

spinner.position({
    my: "left top",
    at: "right top",
    of: item,
    collision: "fit"
});

spinner.insertAfter(item);
于 2011-04-18T13:46:07.393 に答える