jscrollPane在连续Ajax GET时消失

Question

PROBLEM SOLVED

updated the jscrollpane to the latest version which support jquery 1.8 ! https://github.com/vitch/jScrollPane/blob/master/script/jquery.jscrollpane.min.js

I'm trying to refresh a div with content for a certain period. It will fire an Ajax GET call to a php script which render the content. For the first time ajax GET called, the ScrollPane is there, but for the second time Ajax GET(refresh) JScrollPane disappeared. Any how to reinitialize the 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);
})();

});

Right now, my scrollpane is there after every Ajax call, but it shows buggy, the jscrollpane will keep moving left after every Ajax Call and slowly, it will hide the content. How is this happened?

    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>";
}

something like this , that is my activity.php

here is my screenshot , anyone pls do help me @_@ http://img31.imageshack.us/img31/6871/jscrollpane.png

Answer 1

change the order of your commands. make a global variable that caches the ID like this:

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);
  })();
});