0

次のように定義されたタブがあります-

$(function () {
        $("#tabs").tabs({
            beforeLoad: function (event, ui) {
                var tab = $(ui.tab);

                if (tab.is(":empty")) {
                    tab.append(" <div class='loadinggiftabs' ><img src='./Content/graphics/loading.gif' /></div>")
                }

                alert('before');
            },
            load: function (event, ui) {
                $(ui.tab).find(".loadinggiftabs").remove();
                alert('after');
            }
        });
    });

問題は、読み込み中の gifloadinggiftabsが追加されないように見えることです (したがって、削除されます)。アラートは呼び出されます。Chrome 開発ツールによると、JS エラーはありません。ui.panelまた、代わりにに追加しようとしましたui.tab

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

4

2 に答える 2

0

私も似たような悩みを持っていました。機能するものを見つけるのに何年もかかりました。これが現在の私の作業ソリューションです。

注意してください、それもキャッシュします。その if-construct は、キャッシュを機能させるために必要です。そうしないと、常にすべてをリロードします。

$(function () {
    $("#tabs").tabs({
        cache: true,
        /* Probably won't need this object, it's just to appease jsfiddle */
        ajaxOptions: {},

        beforeLoad: function (event, ui) {
            if ($(ui.panel).html()) {
                event.preventDefault()
                return false;
            }
            else {
                ui.panel.html('<div><img src="/Images/loading.gif" /></div>');
                return true;
            }
        }
    });
});
于 2013-06-24T12:53:25.077 に答える
0

これを解決する別の方法があります

<div id="spinner" style="display:none;"><img src="/Images/loading.gif" /></div>


<script>
$(document).ready(function(){ 
    $("#spinner").bind("ajaxSend", function() {
        $(this).show();
    }).bind("ajaxStop", function() {
        $(this).hide();
    }).bind("ajaxError", function() {
        $(this).hide();
    });
});
</script>
于 2013-06-24T13:04:27.327 に答える