3

問題が解決しました

jquery 1.8 をサポートする最新バージョンに jscrollpane を更新しました。 https://github.com/vitch/jScrollPane/blob/master/script/jquery.jscrollpane.min.js

特定の期間、div をコンテンツで更新しようとしています。コンテンツをレンダリングする php スクリプトへの Ajax GET 呼び出しを起動します。初めて ajax GET が呼び出されたとき、ScrollPane はそこにありましたが、2 回目は Ajax GET (refresh) JScrollPane が消えました。jscrollpaneを再初期化する方法はありますか?

function getActivity(callback)
{
  $.ajax({
  url: '../../views/main/activity.php',
  type: 'GET',
  complete: function(){
         $('#activityLineHolder').jScrollPane({
            verticalDragMinHeight: 12,
            verticalDragMaxHeight: 12
            //autoReinitialize = true
         });
  },
  success: function(data) {
        
        var api = $('#activityLineHolder').jScrollPane(
             {
                 verticalDragMinHeight: 12,
                  verticalDragMaxHeight: 12
             }
        ).data('jsp');

        api.getContentPane().html(data);
        api.reinitialise();
   
   }
 });

setTimeout(callback,10000);
}


$(document).ready(function(){ 

(function getActivitysTimeoutFunction(){

  getActivity(getActivitysTimeoutFunction);
})();

});

現在、スクロールペインはすべての Ajax 呼び出しの後に表示されますが、バグが表示されます。jscrollpane は、すべての Ajax 呼び出しの後に左に移動し続け、ゆっくりとコンテンツを非表示にします。これはどのように起こったのですか？

    foreach ($list as $notification) {
    echo "<div class='feeds' id='$notification->notification_id'>";
    $userObj = $user->show($notification->added_by);
    echo $userObj->first_name.":<span class='text'>".$notification->activity."</span>";
    echo " <span class='time'>".$notification_obj->nicetime($notification->created_at)."</span>";
    echo "</div>";
}

このようなもの、それは私の activity.php です

ここに私のスクリーンショットがあります。誰か助けてください@_@ http://img31.imageshack.us/img31/6871/jscrollpane.png

4

6 に答える 6

0

AJAXからのHTMLコンテンツは長く、.html（）でコンテンツをレンダリングするのに時間がかかるため、領域サイズを小さくするのに問題があると思います。

api.getContentPane().html(data);

そして次の行に行くとapi.reinitialise()-HTMLレンダリングはまだ完了していませんが、jScrollPaneはすでに現在のDIVの幅/高さをキャッチし、それらの幅/高さで初期化し、残りのhtmlコンテンツが挿入されています-そしてそれはjScrollPaneの境界の外側に表示されます。

同様の質問を読む：jquery.htmlメソッドがレンダリングを終了するのを待つ

だから私のアドバイス：

1）PHPコードの最後にDIVを追加して、AjaxからのHTMLの終わりをマークします。

foreach ($list as $notification) {
   ...
}
echo '<div id="end-of-ajax"></div>';

2）JSコードに「end-of-ajax」の定期的な（200ms）チェックを追加します-終わりに到達したことを検出すると、api.reinitialise（）を呼び出します：

var timer = setInterval(function(){
   if ($("#activityLineHolder").find('#end-of-ajax').length) {
       api.reinitialise(); 
       clearInterval(timer);
   }
}, 200);

編集

これは完全なJavaScriptコードです。

function getActivity()
{
  $.ajax({
  url: '../../views/main/activity.php',
  type: 'GET',
  complete: function(){
         $('#activityLineHolder').jScrollPane({
            verticalDragMinHeight: 12,
            verticalDragMaxHeight: 12
            //autoReinitialize = true
         });
  },
  success: function(data) {

        var api = $('#activityLineHolder').jScrollPane(
             {verticalDragMinHeight: 12,verticalDragMaxHeight: 12}
        ).data('jsp');

        api.getContentPane().html(data);

        var timer = setInterval(function(){
          if ($("#activityLineHolder").find('#end-of-ajax').length) {
            api.reinitialise(); 
            clearInterval(timer);
          }
       }, 200);
   }
 });
}

$(document).ready(function(){ 
  setInterval(getActivity,10000);    
});
于 2012-11-17T06:09:31.767 に答える
0

コマンドの順序を変更します。次のように ID をキャッシュするグローバル変数を作成します。

var $activity, $activity_pane; // outside the dom ready

function getActivity(callback){
  $.ajax({
    url: '../../views/main/activity.php',
    type: 'GET',
    success: function(data) {
      $activity_pane.html(data);
    }
  });

  setTimeout(callback,10000);
}

$(function(){
  $activity = $('#activityLineHolder');
  $activity.jScrollPane({
    verticalDragMinHeight: 12,
    verticalDragMaxHeight: 12
    autoReinitialise: true
  });

  $activity_pane = $activity.data('jsp').getContentPane();

  (function getActivitysTimeoutFunction(){
    getActivity(getActivitysTimeoutFunction);
  })();
});
于 2012-11-21T02:56:21.150 に答える
0

私の理解では、メソッド内のコードが完了すると、コールバックを実行する必要があります。getActivity()メソッドを再度実行したい場合は、で使用しないでくださいsetTimeout()。このようなもの：

function getActivity(callback)
{
  $.ajax({
  url: '../../views/main/activity.php',
  type: 'GET',
  complete: function(){
         $('#activityLineHolder').jScrollPane({
            verticalDragMinHeight: 12,
            verticalDragMaxHeight: 12
            //autoReinitialize = true
         });
  },
  success: function(data) {

        $('#activityLineHolder').html(data);

   }
 });

 setTimeout(function(){getActivity(callback);},10000);
 if($.isFunction(callback)) {
     callback();
 }
}
于 2012-11-12T03:53:48.830 に答える
0

私は以前にこの問題に直面したことがあります。ここにスニペットがあるので、アイデアを得ることができます。幸運を！

attachScroll = function(){

    return $('.scroll-pane').jScrollPane({
        verticalDragMinHeight: 17,
        verticalDragMaxHeight: 17,
        showArrows: true,
        maintainPosition: false
    });

}; // in this var I store all settings related to jScrollPane

var api = attachScroll().data('jsp');

$ajaxObj = $.ajax({
    type: "GET", //set get or post
    url: YOUR_URL,
    data: null,
    cache: false, //make sure you get fresh data
    async: false, //very important!
    beforeSend: function(){
    },
    success: function(){
    },
    complete: function(){
    }
}).responseText; //$ajaxObj get the data from Ajax and store it

api.getContentPane().html($ajaxObj); //insert $ajaxObj data into "api" pane previously defined.
api.reinitialise(); //redraw jScrollPane

ajax 呼び出しを関数として定義し、それを setInterval に入れることができます。

公式ドキュメントの例はここにあります

それが役に立てば幸い！

于 2012-11-15T10:02:29.893 に答える
0

私はhttp://jscrollpane.kelvinluck.com/ajax.htmlを見 て、試してみました。setTimeout を setInterval (スクロールペインの関数) に変更します。あなたはこれを試すことができます（私はテストしました）

$(document).ready(function(){ 
var api = $('#activityLineHolder').jScrollPane(
    {
        showArrows:true,
        maintainPosition: false,
        verticalDragMinHeight: 12,
                verticalDragMaxHeight: 12,
        autoReinitialise: true
    }
).data('jsp');

setInterval(
    function()
    {
        $.ajax({
        url: '../../views/main/activity.php',
        success: function(data) {
        api.getContentPane().html(data);
      }
    });
    },
    10000
);

});
于 2012-11-14T05:17:31.847 に答える
0

コンテンツが何であるかはわかりませんが、再初期化する前に、それに応じて幅と高さをリセットしてください。私は同じ問題を抱えていたので、それが問題でした

var origHeight =$('#GnattChartContainerClip').height();
var GanttChart = $('#EntireGnattWrapper').get(0).GanttChart;
$('#GnattChartContainerClip').find('#PaddingGnatt').remove();
$('#HeadersCol').find('#PaddingHeaders').remove();
var pane = $('#GnattChartContainerClip');
$('#GnattChartContainerClip').height(origHeight+height);
$('#GnattChartContainerClip').append('<div id="PaddingGnatt" style="width:'+GanttChart.TotalWidth+'px;height:25px"></div>');
$('#HeadersCol').append('<div id="PaddingHeaders" class="header" style="height:25px"></div>');
var paned = pane.data('jsp');
paned.reinitialise();
于 2012-11-20T07:50:49.403 に答える