jScrollPane and AJAX

Question

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 don't understand why, since I've called it in the success part of the $.ajax call... But oh well, dunno. Have a look at the code below and tell me what I'm doing wrong/how to fix it.

function eventLink(){
jQuery(".ticket-link a").fancybox({
    width:710,
    height:750,
    type:"iframe",
    transitionIn:"elastic",
    transitionOut:"elastic",
    speedIn:600,
    speedOut:600,
    easingIn:"easeInExpo",
    easingOut:"easeOutExpo",
    overlayShow:true,
    hideOnOverlayClick:false,
    hideOnContentClick:false,
    overlayOpacity:0.8,
    overlayColor:"#000",
    showCloseButton:true,
    titleShow:true,
    centerOnScroll:true
});
}

function scrollPane() {
jQuery('.scroll-pane').jScrollPane({
    showArrows: true,
    autoReinitialise: true
});
}

jQuery(document).ready(function(){
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){
            jQuery("#ticket-list").html(a);
            jQuery("#ticket-list").show(200);
            scrollPane();
        }
    });
    return false});
eventLink();
scrollPane();
});

score 6 · Accepted Answer · answered Dec 26 '11 at 04:45

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 scrollpanes
    jQuery('.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(); 
        }
    });
    return false});
eventLink();
});

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

Hmm, doesn't seem to be working. The AJAX now has no point to drop the data. `api = jQuery("#ticket-list").data('jsp'); api.getContentPane().html(a);` This seems logical, but now it doesn't drop the data into #ticket-list :/ — Klemen Tusar, Dec 26 '11 at 12:14
The odd thing is that `console.log(api.getContentPane().html(a));` shows all the returned html data of the AJAX call in it, but it won't show up on the page. The jspContainer div is not put into the markup after the AJAX call. — Klemen Tusar, Dec 26 '11 at 12:23
Hmm... I found out that `console.log(api.getContentPane().html(a));` reveals, that the AJAX returned content is missing `
` at the beginning and `
` at the end. — Klemen Tusar, Dec 26 '11 at 13:01
LMAO! All I had to do is remove `jQuery("#ticket-list").empty()` and it works! :D — Klemen Tusar, Dec 26 '11 at 13:18
just got back to this and it seems like you figured it out. I apologize, I might have avoided your confusion had I looked at that part of your code more closely. That part would need to target the content pane through the api as well. — Reiki, Dec 26 '11 at 23:28
beforeSend:function(){ jQuery("#ajax-loader").show(); jQuery("#ticket-list").hide(200); api=jQuery('#ticket-list').data('jsp') api.getContentPane().empty()} — Reiki, Dec 26 '11 at 23:29

jScrollPane and AJAX

1 Answers1

Linked