1

編集：

コントローラーのようなバックボーンjsで動作する簡単なセットアップすらできません

initialize: function() {

    // alert("1"); 
    $( "#progressbar" ).html("0%");
    // alert("2");

    $.ajax({
      dataType:"json", 
      async:true,
      url:"http://localhost:8888/chathau5/rest/tasks/list",
      success: function(data, response) {

      }
    });


    // alert("3");
    $( "#progressbar" ).html("25%");
            // it works when i put the alerts in...

},

何か案は？

ロード時に jquery プログレス バーを配置しようとしています。私の現在の構造はJavaとバックボーンです。

バックボーン コントローラーに入ったら、プログレス バーを初期化し、各 ajax 呼び出しの後に次のように値を更新します。

    initialize: function() {

    $("#progressbar").progressbar({ 
        value: 0
    });

    var tasks = $.ajax({
      dataType: "json",
      async:false,
      url: "http://localhost:8888/chathau5/rest/tasks/list",
      success:function(data,response) {
        tsks = data;
      }
    });

    $("#progressbar").progressbar({ 
        value: 50
    });

    var tasks2 = $.ajax({
      dataType: "json",
      async:false,
      url: "http://localhost:8888/chathau5/rest/tasks/list2",
      success:function(data,response) {
        tsks = data;
      }
    });

    $("#progressbar").progressbar({ 
        value: 100
    });

私のindex.htmlにはありますが、進行状況バーはまったく表示されません.....$進行状況バーの更新ごとにアラートをラップしない限り....

私のバックエンドJavaでは、テスト目的でスレッドスリープを実行しています...

上記のプログレスバーの更新ごとにアラートを配置すると、機能します...これがどのように起こっているのかわかりません...これを修正する方法

4

3 に答える 3

0

jQuery.ajaxこの問題は、async:falseオプションを指定して呼び出すと、実行中にAJAX呼び出しがGUIスレッドをブロックするため、ブラウザーがプログレスバーを更新できないことが原因である可能性があります。AJAX呼び出しを非同期にし、各ステップが成功した後にプログレスバーを更新する必要があります。

簡単な方法：

$("#progressbar").progressbar({ 
    value: 0
});

//make first call
var tasks = $.ajax({
  dataType: "json",
  url: "http://localhost:8888/chathau5/rest/tasks/list",
  success:function(data,response) {

    //first call succeeded
    tsks = data;
    $("#progressbar").progressbar({ 
        value: 50
    });

    //make second call
    var tasks2 = $.ajax({
      dataType: "json",
      url: "http://localhost:8888/chathau5/rest/tasks/list2",
      success:function(data,response) {

        //second call succeeded
        tsks = data;
        $("#progressbar").progressbar({ 
            value: 100
        });
      }
    });
  }
});

このソリューションは完璧にはほど遠いです。それでも、2つのAJAXリクエストを順番に作成します。これは、リクエストを同時に作成する場合に比べて最適ではありません。多分次のようなものです：

var $progressbar = $("#progressbar");
var progress = 0;
var updateProgress = function(amount) {
  $progressbar.progressbar({value:progress+=amount});
};

updateProgress(0);

$.ajax({
  dataType:"json", 
  url:"http://localhost:8888/chathau5/rest/tasks/list",
  success: function(data, response) {
    updateProgress(50);
  }
});

$.ajax({
  dataType:"json", 
  url:"http://localhost:8888/chathau5/rest/tasks/list2",
  success: function(data, response) {
    updateProgress(50);
  }
});
于 2013-02-26T22:38:40.180 に答える
0

あなたのプログレスバーコードはsuccess関数内に入る必要があります

var tasks = $.ajax({
      dataType: "json",
      async:false,
      url: "http://localhost:8888/chathau5/rest/tasks/list",
      success:function(data,response) {
        tsks = data;
        $("#progressbar").progressbar({ 
          value: 50
        });
      }
    });
于 2013-02-26T22:33:52.450 に答える
0

まず、アラートのようなものが役立つ場合、それは通常、同時実行バグがあるためです。つまり、何かが終了しているか、他の何かよりも早く終了していないことを意味します。それらを検出するのは非常に困難です。初期化が呼び出されたときに #progressbar が実際には画面に表示されていないと思います。簡単にできます console.log($("#progressbar")); 初期化の最初の行で、実際にそこにあることを確認してください。

次に、これは余談ですが、同時実行エラーがどのように発生するかを理解するのに役立つかもしれません。最初の ajax 呼び出しが最初に終了するという保証はありません。これが ajax の非同期の性質です。その時点でコールバックへの制御を放棄し、メソッドの残りの部分を続行します。したがって、これら 2 つの成功メソッドのいずれかに到達する前に、初期化メソッドがおそらく終了しています。そのため、2 つの呼び出しをネストするのが最善です。

// I like keeping my display code separated out like this.
this.updateProgress = function( newValue )
{
  $("#progressbar").progressBar({value:newValue}); 
}

$.ajax({ // first call
  success: function() // done loading when this gets called
  {
    this.updateProgress(50);
    $.ajax({ // second call
      success: function() // all done loading at this point
      {
        this.updateProgress(100);
      }  
    });
  }
});

そうすれば、次々とロードされることを確認できます。あなたの例のように同時に実行しない理由はありませんが、この方法では保証があります。

于 2013-02-27T00:35:45.060 に答える