Question

i have a pretty basic jquery question. im trying to add jscrollpane to my site and get it to initialize after an ajax call. however when i run the function i keep getting the message “testFunction is not defined” in the console. the code is very basic:

$(document).ready(function() {
  var api = $('.scroll-pane').jScrollPane({
      showArrows:true,
      maintainPosition: false
    }).data('jsp');

  function testFunction() {
      api.getContentPane().load('ajax_content.html', function() {
      api.reinitialise();
   });
 }          
});

why do i keep getting the message? if i take the testfunction out of the document ready function i get the error “api not defined” thanks in advance

Answer 1

This has to do with the scope of the variable api that you are defining. You need to define the api variable outside of the $(document).ready(function() { .... Try this:

var api;
$(document).ready(function() {
  api = $('.scroll-pane').jScrollPane({
      showArrows:true,
      maintainPosition: false
  }).data('jsp');
});

function testFunction() {
    api.getContentPane().load('ajax_content.html', function() {
        api.reinitialise();
    });
}

Hopefully that helps.