-3

jQueryタブスクリプトを利用するダッシュボードUIがあります。各タブは、個別のAjaxリクエストを介してコンテンツをロードします。

これが私が抱えている問題です：

  1. ユーザーは複数のタブを次々に開きます
  2. 各タブが作成され、それぞれに対してAjaxリクエストが行われます。
  3. 作成される最後のタブは現在開いており、リクエストが完了すると、各タブのコンテンツがこのタブに表示されます
  4. ユーザーがいずれかのタブをクリックすると、コンテンツが適切に設定されます。

基本的に、ユーザーが最近のタブのAjaxリクエストが完了する前に新しいタブを開くと、ユーザーがいずれかのタブをクリックするまで、Ajaxがリクエストした両方のコンテンツが現在開いているタブに表示され、その後すべてが正常に表示されます。

ユーザーが別のタブを開くことを許可する前に、ajaxリクエストを完了して現在のタブにロードするように強制するため、問題を解決するAjax呼び出しを設定しようとしましたasync: falseが、ユーザーがダッシュボードを考えているという点でユーザーのフィードバックは否定的です凍結した（それが持っている）。

また、loading .gifを使用してタブをロードし、async: falseAjaxリクエストを行うタイムアウト関数を設定しました。ユーザーからのフィードバックは同じですが、Ajaxリクエストが行われると、読み込み中のgifがアニメーションを停止するタイムアウト機能を使用しても同じです。

Ajaxリクエストは次のようになります。

$.ajax ({
        url: report,
        cache: false,
        success: function(html) {
            $("#loading").hide();
            $("#tabcontent").append('<div id="c'+count+'" class="tabContentContainer">'+html+'</div>');
        },
        error: function(x, status, error) {
            $.ajax ({
                url: 'admin/error_notification.php',
                type: "POST",
                data:{
                    error: error
                }
            });
        },
        async:true
});
4

4 に答える 4

0

なんらかの方法で最後のリクエストを追跡し、別のリクエストを作成するときにそれを中止します。

var jqxhr = {abort: function () {}};
/* various other code */
function loadTabOrWhatever() {
    jqxhr.abort();
    jqxhr = $.ajax({
       /* ajax call in your question */
于 2013-03-28T22:51:35.850 に答える
0

（1つの#tabcontent divだけでなく）各タブとペアになっている個別のtabcontent divを用意し、タブを切り替えるときにそれらを表示/非表示にすることをお勧めします。その後、前のajax呼び出しが後で戻ってきて、現在非表示になっているtabcontent divにデータを入力しても、害はありません。

function loadTab(tabName) {
    // Hide all tab content panes, then just show the one we want
    $(".tab-pane").hide();
    $("#tab-" + tabName).show();
    $.ajax ({
        ...
        success: function(html) {
            $("#loading").hide();
            $("#tab-" + tabName).append('<div id="c'+count+'" class="tabContentContainer">'+html+'</div>');
    <snip>

次のようなコンテンツペインを作成します。

<div class="tab-pane" id="tab-firsttab"></div>

そして、トリガーリンクは次のようなものになります。

<a href="#" onClick="loadTab('firsttab')">First Tab</a>

各ajax呼び出しはコンテンツを独自のコンテンツペインにロードするだけなので、ユーザーが複数のタブをすばやくクリックして複数のajax呼び出しを開始することは無害になると思います。

于 2013-03-29T02:06:42.690 に答える
0

Ajaxリクエストの前にtabContentContainerdivを作成すると、タブセレクターには、別のタブが開いたときに非表示にするオブジェクトがあることがわかりました。次に、Ajax応答がロードされると、その可視性はすでに設定されています。下記参照：

$("#tabcontent").append('<div id="c'+count+'" class="tabContentContainer"></div>');

$.ajax ({
        url: report,
        cache: false,
        success: function(html) {
            $("#loading").hide();
            $("#c"+count+"").html(''+html+'');
        },
        error: function(x, status, error) {
            $("#tabcontent").append('<div id="c'+count+'" class="tabContentContainer"><div class="alert alert-error" style="margin-top:70px;"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Don\'t worry… It\'s not you, it\'s us.</strong> We were unable to connect to your data and deliver results. We are looking into this now.</div></div>');
            $.ajax ({
                url: 'admin/error_notification.php',
                type: "POST",
                data:{
                    error: error
                }
            });
        },
        async:true
});
于 2013-03-29T21:54:14.670 に答える
0

私はそのような設定をしています。ロードしているタブを示す以下の関数を呼び出します。新しい各タブに一意のID（UUID）があり、関数がそのIDを取得してページをロードすることを確認します。

ただし、問題があります。ロードされたサブページにjavascriptコードが含まれている場合、オブジェクトをページの内部で初期化する必要がある場合、ページが「非表示」であるという事実によって混乱する可能性があることがわかりました。そのような要素のあるタブに戻ると、「小さい」サイズであることに気付くことがあります。

この関数は、バックエンドに送信されたデータも保存するため、「再読み込み」ボタンを簡単に作成できます。

function LoadView(ident, view, data) {

	var img = $('<img>', {
		src : '/images/ajax-loading.gif'
	});

	$('#' + ident).html(img);

	data.view = view;
	data.viewid = ident;

	// console.log(data);
	$.ajax({
		url : '/cgi-bin/browser.cgi',
		data : data,
		type : 'GET',
		dataType : 'html',
		timeout : 30000000,
		success : function(result) {
			$("#" + ident).html(result);
			// set data on view
			$("#" + ident).data('data', data);
		},
		error : function(xhr, status, error) {
			var img = $('<img>', {
				src : '/images/exclamation_micro.png'
			});
			$('#' + ident).html(img.html() + error);
			// alert("Error processing request " + error);
		},
		timeout : function() {
			var img = $('<img>', {
				src : '/images/exclamation_micro.png'
			});
			$('#' + ident).html(img.html() + ' Timeout');
			// alert("Timeout processing request");
		}
	});
}

function ReloadView(view, ident) {
    // Retrieve the data for the view
    var data = $('#' + ident).data('data');
    // Reload the view
    LoadView(ident, data.view, data);
}

于 2017-02-09T13:19:48.410 に答える