CODEWITHSUNDEEP
javascriptjqueryjquery-pluginsjscrollpanejquery-jscrollpane
1252748
1252748

Reputation: 15372

jscrollpane won't reinitialise after ajax call

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!

Upvotes: 0

Views: 1270

Answers (2)

1252748
1252748

Reputation: 15372

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!

Upvotes: -1

Armel Larcier
Armel Larcier

Reputation: 16027

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!

Upvotes: 2

Related Questions