CODEWITHSUNDEEP
jqueryjquery-jscrollpane
pufAmuf
pufAmuf

Reputation: 7795

JsScrollpane not updating after adding dynamic content

I ran this code to load up xml data into a table, however after the data was loaded, I can't seem to reload the scrollbar. Nothing works, not even running $('.scroll-pane').jScrollPane(); manually in Firebug.

Here's the code:

$("#MenuList").html('<div class=\"menu-activity\">Please Wait</div>');
$.blockUI();

           $.get('venuesxml.php', function (data) {

                $('#MenuList').html("<div class=\"menu-activity\">Showing activity for 13.10.2012</div>");

                $(data).find('marker').each(function () {

                    $('#MenuList').append("<div class='menu-item-red'><div class='typename'>Event</div><div class='eventname'>" +

                    $(this).attr('id') + "</div><div class='venuename'>" +

                    $(this).attr('venue_type') + "</div></div>");

                });

            });

            $.unblockUI();
            $('.scroll-pane').jScrollPane();

And here's a live demo Click on "SEARCH" to execute the code.

Upvotes: 1

Views: 910

Answers (3)

ErickBest
ErickBest

Reputation: 4692

You can try to do it this way.....

    //Should it (the #parentContainer) have had a "scroll-pane" class

        $('#parentContainer').jScrollPane()

    $.each(data, function(i, value) {

//Detach scrolling capabilities
        $('#parentContainer').jScrollPaneRemove();

        $('<div/>',{
        class:'anyClass',
        id:'anyId'
        })
        .appendTo(#childContainer);

//Return back Scrolling capabilities to the parent container    
        $('#parentContainer').jScrollPane();            


        ///-> Loop Ends
                });

With this, the scrolling capabilities are renewed every time a loop is made....hence the ScrollBar's length will grow or shrink depending on the size of data store in the child container.

Hope that helps....

Ebest

Upvotes: 0

Gurpreet Singh
Gurpreet Singh

Reputation: 21233

You need to reinitialise plugin after adding dynamic content.

Try this:

 $(function()
{
    // Initialise the scrollpanes
    $('.scroll-pane').jScrollPane();

    // Add some content to #pane2
    var pane2api = $('#pane2').data('jsp');
    var originalContent = pane2api.getContentPane().html();
    pane2api.getContentPane().html(originalContent + originalContent + originalContent);

    // Reinitialise the #pane2 scrollpane
    pane2api.reinitialise();
});

More information can be found here

Upvotes: 1

snkashis
snkashis

Reputation: 2991

Typically, one must call reinitialise() on the JSP to get it to recognize any data placed in it dynamically...such as after a AJAX call. Looks like there may be timing issues in play here..

 var api = $('.scroll-pane').data('jsp');
 api.reinitialise();

Or you can use autoReinitialise, which is simply a JS timer that calls reinit.I prefer to use the manual approach, when appropriate.

You will want to read this over. http://jscrollpane.kelvinluck.com/api.html

Upvotes: 1

Related Questions