Colorbox ajax data - jScrollPane initialises first time correct but after .destroy reinitialise not working, empty colorbox

Question

I have multiple elements which open colorbox with ajax data (through ajax links after ajax pagination) and also render jScrollPane if any scrollbars are present.

$( '.showcolorBox' ).live('click',function(e){
e.preventDefault();
$(this).colorbox({open:true,
    opacity:0.98,
    maxHeight: '95%',
    onComplete: function() {
    $('#cboxContent').jScrollPane({
        showArrows: false
    });
    },
    onClosed: function() {
    var ele = $('#cboxContent').jScrollPane({showArrows: false});
    var api = ele.data('jsp');
    api.destroy();
    }
});
});

This works as intended except it only works the very first call, each call after the first opens the colorbox modal but with no data in it... completely blank!

It appears the problem is after the jScrollPane's .destroy call, the reinitialise doesn't seem to be working properly. I get no errors in firebug and after spending the day trying to solve the issue and searching the web, with no solution the one thing that keeps popping up is the width and height of the scroll element after it reinitialises but I haven't figured out anything from it.

Any help?

EDIT

I am now handling the ajax request my self and placing the content in a colorbox inline element,the problem I am having is no scrollbars are being added after the colorbox.resize?

$( '.show_btn' ).live('click',function(e){
e.preventDefault();
$.colorbox({
    opacity:0.90,
    maxHeight: '95%',
    fixed:true,
    transition:"fade",
    overlayClose:false,
    returnFocus: true,
    inline:true, 
    href:"#bytePad",
    width: "655px",
    height: "0px",
    onLoad: function() {
      $('#cboxSpinner').show();
      $('#cboxSpinner').ajaxComplete(function(event,request, settings) {
        $(this).hide();
        $(this).colorbox.resize("#bytepad");
      });
    }
});
});

Answer 1

You shouldn't be assigning colorbox to $(this) each time it is clicked. After the first click, each time it is clicked on it will open, be assigned colorbox, then auto-open again. Try this instead:

$( '.showcolorBox' ).live('click',function(e){
e.preventDefault();
$.colorbox({
    href:this.href,
    opacity:0.98,
    maxHeight: '95%',
    onComplete: function() {
    $('#cboxContent').jScrollPane({
        showArrows: false
    });
    },
    onClosed: function() {
    var ele = $('#cboxContent').jScrollPane({showArrows: false});
    var api = ele.data('jsp');
    api.destroy();
    }
});
});

I have not used jScrollPane before, but you could probably assign jScrollPane to #cboxLoadedContent instead, which is destroyed each time you load new content into colorbox. Then you could remove the cleanup you do for it in the onClosed callback.