Question

I want to reinitialise jScrollPane when new content is added loaded to the div, heres what I got so far:

var pane = $('.content_pane')

function loadContent() {
            $('#content').load(toLoad,'',showNewContent())
             $('.content_pane').jScrollPane();
             pane.reinitialise();
        }

It sort of breaks the page, but I’m new to JavaScript so I figure probably doing something wrong.

Updated :

    function loadContent() {
        $('#content').load(toLoad,'',showNewContent)

    }
    function showNewContent() {
        $('#content').show(1,hideLoader());
        $('.content_pane').jScrollPane();
     pane.reinitialise(); 

    }

It still only loads once?!

Update 2:

function loadContent() {
        $('#content').load(toLoad,'',showNewContent)

    }

    function showNewContent() {
        $('#content').show(1,hideLoader());
        $('.content_pane').jScrollPane();
            var api = $('.content_pane').jScrollPane(
    {
        showArrows:true,
        maintainPosition: false
    }
).data('jsp');

        api.getContentPane();
        api.reinitialise();
    }

HTML :

 <div id="content_pane" class="content_pane">
        <div id="content" >  
        <!-- content delivered here -->     
         </div>
    </div>

It’s quite straight forward.

Answer 1

This code:

$('.content_pane').jScrollPane();
pane.reinitialise();

Is called before you receive data. Consider moving this code to showNewContent.

And remove() from showNewContent(). It is callback. You should give function, not call it. Call to jScrollPane should be made only once.

Here is corrected version:

$('.content_pane').jScrollPane();
function loadContent() {
    $('#content').load(toLoad,'', function(){
        showNewContent();
        pane.reinitialise(); 
    });
}