Jscrollpane And Ajax

I'm trying to load some data via an AJAX call to a PHP script and then returning it, bla bla bla. Well, it works all fine till jScrollPane won't reload on the AJAX call. I simply d

Solution 1:

I've run into this problem with jScrollPane. Once it creates the scrollpane structure around an element, you need to treat it differently. It doesn't respond well to being re-initialized as in your function. Instead, you have to get a reference to the api and reinitialise through the exposed method.

An example using your code would be...

// initialise the scrollpanes
$(document).ready(function() {
  jQuery('.scroll-pane').jScrollPane({
         showArrows: true,
         autoReinitialise: false
  });
})

Then there are two things you need for your jScrollpane. That's the content container and the reinitialise method. The reason seems to be that once you initialise a container with jScrollPane(), the container itself becomes a jScrollpane object. The content is moved to a container within that object. So if you replace the contents of the target div, you'll remove the html elements that make up a jScrollPane object. Here are the calls to get you the content pane, fill it with data and reinitialise it.

api.getContentPane() will get you a reference to the business end of your scroll pane and api.reinitialise() will redraw and recalculate the scrollpane. So to use your example,

jQuery("#ticket-list").html(a);
    jQuery("#ticket-list").show(200);

would become:

    api = jQuery("#ticket-list").data('jsp');
    api.getContentPane().html(a);
    jQuery("#ticket-list").show(200);
    api.reinitialise();

This

  $(document).ready(function() {
  // initialise the scrollpanesjQuery('.scroll-pane').jScrollPane({
           showArrows: true,
           autoReinitialise: false
    });
  })
  jQuery("select[name='sortby']").change(function(){
    var a=jQuery(this).val();
    jQuery.ajax({
        type:"GET",
        url:"ticket_order.php",
        data:"sortby="+a,
        beforeSend:function(){
            jQuery("#ajax-loader").show();
            jQuery("#ticket-list").hide(200);
            jQuery("#ticket-list").empty()},
        complete:function(){
            jQuery("#ajax-loader").hide();
            eventLink();
        },
        success:function(a){
           api = jQuery("#ticket-list").data('jsp');
           api.getContentPane().html(a);
           jQuery("#ticket-list").show(200);
           api.reinitialise(); 
        }
    });
    returnfalse});
eventLink();
});

Here is the best documentation of the api as I could find.