问题已解决

Question

问题已解决

将jscrollpane更新为支持jquery 1.8的最新版本！ https://github.com/vitch/jScrollPane/blob/master/script/jquery.jscrollpane.min.js

我正在尝试刷新包含内容一段时间的div。它将激活对呈现内容的php脚本的Ajax GET调用。这是第一次调用ajax GET，ScrollPane就在那里，但是第二次Ajax GET（刷新）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

Answer 1

我的理解是，当方法中的代码完成时，应该执行回调。如果您想再次运行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();
 }
}

Answer 2

我只看一看http://jscrollpane.kelvinluck.com/ajax.html 我曾尝试过并且工作过。我将setTimeout更改为setInterval（来自scrollpane的函数）。你可以尝试这个（我已经测试过）

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

});

Answer 3

之前我遇到过这个问题，这里有一个片段，所以你可以得到这个想法。祝你好运！

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。

可以找到官方文档的示例here

希望它有所帮助！

Answer 4

嗯，我认为你的来自AJAX的HTML内容很长，你在减小区域大小方面存在问题，因为.html（）需要一些时间来呈现内容：

api.getContentPane().html(data);

当它转到下一行api.reinitialise()时 - HTML呈现尚未完成，但jScrollPane已捕获当前DIV宽度/高度，初始化这些宽度/高度，然后插入剩余的html内容 - 它出现在jScrollPane边界之外。

阅读类似的问题：Wait for jquery .html method to finish rendering

所以我的意思是：

1）在PHP代码的末尾添加一个DIV，它将标记来自Ajax的HTML结尾：

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

2）在JS代码中添加“ajax end”的周期性（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); });

Answer 5

我不确定您的内容是什么，但只需确保在重新启动之前相应地重置宽度和高度。因为我有同样的问题，那就是问题

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

Answer 6

更改命令的顺序。创建一个缓存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);
  })();
});

jscrollPane在连续Ajax GET时消失

问题已解决

6 个答案: