3

问题解决了

将 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(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

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

我只是看看 我尝试过的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

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

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

好吧，我想您来自 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 代码中添加定期（200 毫秒）检查“end-of-ajax” - 当它发现结束时，它会调用 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

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

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 回答
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 回答