jscrollpane won't reinitialise after ajax call

Question

I have been experimenting with jscrollpane.

I'm trying to add some ajax content to the pane and have got it rendering content, but the reinitialisation fails for some reason.

I believe I'm following what's explained here, but perhaps I'm having issues with the vk template I use to handle my json data.

I have this div sitting already on the page.

 <div id="INTERNAL-line_item_detail" class="fl scroll-pane">
 </div>

It is empty when things start, but if I put some lorem ipsum in, I can see that the jscrollpane is working properly, at least at first.

Then I make this ajax request to get a json object Then use the vktemplate to put it into html.

$.ajax({

    type: "POST",
    url: "queries/INTERNAL_get_order_info.php",
    data: "num=" + num,
    dataType: "json",

    success: function (data) {

        //some of this is not exactly the way it is SO question I referenced
        //I've been moving things around quite experimentally
        api = $("#INTERNAL-line_item_detail").data('jsp');
        $("#INTERNAL-line_item_detail").empty();
        $('#INTERNAL-line_item_detail').vkTemplate('templates/get_line_items_template.tmpl?<?=time()?>', data, function () {

         api.reinitialise();
    });
}

});

CSS for the scroll-pane..nothing out of the ordinary.

.scroll-pane {
    width: 350px;
    height: 200px;
    overflow: auto;
    margin:15px 30px 15px 30px;
    background-color:#fff;
}

But whenever I look at the scrollpane in the chrome inspector, it has the property overflow:hidden added to it (though I cannot figure out from where). And I don't suppose it really matters, because when I turn it off or change it to scroll, I only see normal-mac-scrollbars on top and bottom.

Any ideas? Many thanks!

score 2 · Accepted Answer · answered Aug 10 '12 at 08:26

2

Try logging the value of api in the template engine's callback function to know whether it's defined. Also I think it'd be best to call reinitialisation by recalling jScollPane on you element like this:

$('#INTERNAL-line_item_detail').jScrollPane({/*your jsp config*/});

It will keep the scroll position and will be transparent. Good luck!

answered Aug 10 '12 at 08:26

Armel Larcier

15,747
7
68
89

I tried to log the api in the console. It's there. I mean, I don't know if it's functioning properly, but it is a big object. I will try to reinitialise like this. Thanks! – 1252748 Aug 10 '12 at 11:04
api in log `d animate: function (aI,aL,s,aK){var aJ={};aJ[aL]=s;aI.animate(aJ,{duration:ay.animateDuration,easing:ay.animateEase,queue:false,step:aK})} destroy: function (){g()} getContentHeight: function (){return Z} getContentPane: function (){return Y} getContentPositionX: function (){return aC()} getContentPositionY: function (){return aA()} getContentWidth: function (){return T} getIsScrollableH: function (){return aE} getIsScrollableV: function (){return az} getPercentScrolledX: function (){return aC()/(T-aj)} getPercentScrolledY: function (){return aA()/(Z-v)}` – 1252748 Aug 10 '12 at 14:59
`hijackInternalLinks: function (){} positionDragX: function (s,aI){W(s,aI)} positionDragY: function (aI,s){V(aI,s)} reinitialise: function (aI){aI=b.extend({},ay,aI);ar(aI)} scrollBy: function (aI,s,aJ){Q.scrollByX(aI,aJ);Q.scrollByY(s,aJ)} scrollByX: function (s,aJ){var aI=aC()+Math[s<0?"floor":"ceil"](s),aK=aI/(T-aj);W(aK*j,aJ)} scrollByY: function (s,aJ){var aI=aA()+Math[s<0?"floor":"ceil"](s),aK=aI/(Z-v);V(aK*i,aJ)} scrollTo: function (aJ,s,aI){N(aJ,aI);M(s,aI)} ` – 1252748 Aug 10 '12 at 14:59
`scrollToBottom: function (s){V(i,s)} scrollToElement: function (aJ,aI,s){ab(aJ,aI,s)} scrollToPercentX: function (aI,s){N(aI*(T-aj),s)} scrollToPercentY: function (aI,s){M(aI*(Z-v),s)} scrollToX: function (aI,s){N(aI,s)} scrollToY: function (s,aI){M(s,aI)} __proto__: d` – 1252748 Aug 10 '12 at 15:00
also, I don't have any special jsp config to put where you have specified. – 1252748 Aug 10 '12 at 15:01

score -1 · Answer 2 · answered Aug 10 '12 at 15:55

set api equal to the container div that has the class scroll-pane class

and use that in the template

function reinitializeJspane(divId, templateUrl, data) {
    api = $('#' + divId).data('jsp');
    $(api.getContentPane()).vkTemplate(templateUrl + "?", data, function () {
        api.reinitialise();
    });
}

thanks!

jscrollpane won't reinitialise after ajax call

2 Answers2