jscrollPane disappear when continuously 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

how say?? Ajax is overwriting the same div with the content of Ajax GET. Actually, my purpose to do so, but What I wishes to archive is after overwritting the content of AJAX Get, the scrollpane is still there. Updated Question. — Nich, Nov 12 '12 at 04:14

score 0 · Answer 1 · answered Nov 12 '12 at 03:53

My understanding is that a callback should be executed when the code within your method completes. If you are then wanting to run the getActivity() method again, shouldn't that be used in setTimeout(). Something like this:

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

Jefri P. · Answer 2 · 2012-11-14T09:53:17.480

0

I just take a look at http://jscrollpane.kelvinluck.com/ajax.html I had tried and works. i change setTimeout into setInterval (function from scrollpane). you can try this (i had tested)

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

});

edited Nov 14 '12 at 09:53

answered Nov 14 '12 at 05:17

Jefri P.

76
3

hi there, I did looked on it before and make modified, but unfortunately , it don't work on my case. I have no idea why. Every ajax call, the content size will become smaller after reinitialized. – Nich Nov 14 '12 at 05:47
What would your ajax want to do something after click or by setTimeout(callback,10000); ? may i know ../../views/main/activity.php return data like what? – Jefri P. Nov 14 '12 at 08:12
oic... it will just keep rendering some data, not click ,but just automatic keep rendering. i updated it – Nich Nov 14 '12 at 13:58

score 0 · Answer 3 · answered Nov 15 '12 at 10:02

I've faced this problem before, here is a snippet so you can get the idea. Good luck!

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

You can define the ajax call as a function and put it into a setInterval.

An example from official docs can be found here

Hope it helps!

thanks, but no luck, it still remain the same result @@ everytime it loop the function and reinitialise, the scrollbar become small and smaller and make my content invisible...any idea? — Nich, Nov 15 '12 at 16:31

score 0 · Answer 4 · edited May 23 '17 at 12:04

Well I suppose that your HTML content coming from AJAX is long and you have problem with decreasing area size because it takes some time to render content by .html():

api.getContentPane().html(data);

And when it goes to the next line api.reinitialise() - HTML rendering isn't complete yet, but jScrollPane already catches current DIV width / height, initializes by those width / height, and then remaining html content is being inserted - and it appears outside of jScrollPane boundaries.

Read similar question: Wait for jquery .html method to finish rendering

So my adice:

1) Add a DIV at the end of your PHP code which will mark end of HTML coming from Ajax:

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

2) Add periodical (200ms) check for "end-of-ajax" in your JS code - when it finds the end is reached, it calls for api.reinitialise():

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

EDIT

This is full JavaScript code:

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

hi! thats a new info for me, but i dont really understand the js which setInterval have to put at where ,and whats the purpose of periodical check? is it doing the same thing like what I did which loop within 10000? can u briefly explain to me or where should I put this piece of code..thanks in advance — Nich, Nov 17 '12 at 08:06
you can't attach auto-callback function to .html() method - thats why you need to check it every 200ms if it has completed rendering. — Roman, Nov 17 '12 at 11:27
hmm, i tried it, but it still remain the same, and when the first time i load, there is no content, it have to wait for the 10000, only it will render the data, then the size also become smaller and smaller.http://img31.imageshack.us/img31/6871/jscrollpane.png here is the picture.. — Nich, Nov 17 '12 at 17:35

score 0 · Answer 5 · answered Nov 20 '12 at 07:50

Im not sure about what your content is but just make sure that you reset the widths and heights accordingly before reinitlizing. as i had the same issue, and that was the problem

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

pocesar · Accepted Answer · 2012-11-21T03:02:31.307

0

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

edited Nov 21 '12 at 03:02

answered Nov 21 '12 at 02:56

pocesar

6,860
6
56
88

what version of jquery and jscrollpane are you using? – pocesar Nov 21 '12 at 19:29
1

jquery 1.8.0 and jscrollpane * jScrollPane - v2.0.0beta5 - 2010-09-18 – Nich Nov 22 '12 at 00:12
1

THANKS !! finally you did pin point the problem, i do not change my original code but it did solved the problem !! – Nich Nov 22 '12 at 00:22
versions are the first things to blame ;) – pocesar Nov 22 '12 at 00:56

jscrollPane disappear when continuously Ajax GET

PROBLEM SOLVED

6 Answers6