JsScrollpane not updating after adding dynamic content

Question

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.

Answer 1

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