applying jScrollPane to a div appended with ajax

Question

I have a tabbed widget that shows three separate loops. Under the third tabbed section which is hidden by default, I show a search that gives ajax results. My problem is that I can't figure how to apply jScrollPane to the container div of the results. Everytime the search is entered, the container div is emptied and new results are appended so I need to reapply it each time. Here is the code I'm using to trigger the search.

jQuery( function( $ ) {
// search filed
var $s = $( '#s' );
// the search form
var $sForm = $s.closest( 'form' );
console.log( $sForm );
$sForm.on( 'submit', function( event) {
    event.preventDefault();
    $.post(
        T5Ajax.ajaxurl,
        {
            action:     T6Ajax.action,
            search_term: $s.val()
        },
        function( response ) {
            $("#music-results").empty();
            $("#music-results").append( response );

        },
    );
 });
});

Now I have the basic call to setup jscrollpane for the other loops but that doesn't get applied to the div in question because it is hidden by default I guess.

$(document).ready(function(){
  $('#music-results').jScrollPane({showArrows: true,autoReinitialise: false}); 
});

So how can I apply jscroll to the div each time it's emptied and new results are added?

score 0 · Answer 1 · answered Aug 31 '12 at 01:19

You're right, jscrollpane doesn't apply to content that is not displayed (display:none). To fix your problem, you simply need to call jscrollpane when the content is apended.

So instead of putting $('#music-results').jScrollPane({showArrows: true,autoReinitialise: false}); in the document ready(), simply put it after $("#music-results").append( response );. It should then work.

$.post(
        T5Ajax.ajaxurl,
        {
            action:     T6Ajax.action,
            search_term: $s.val()
        },
        function( response ) {
            $("#music-results").empty();
            $("#music-results").append( response );
            $('#music-results').jScrollPane({showArrows: true,autoReinitialise: false}); 

        },
    );

There is another way of doing what you want using the api. Declare a global variable for the api, that will be available to all functions and then set it the document.ready()

var api;    
$(document).ready(function(){
      var element = $('##music-results').jScrollPane({showArrows: true,autoReinitialise: false});
      api = element.data('jsp'); //you can now access the api through this variable.
    });

Then, when you append the content to #music-results, simply reinitialize the scrollpane using the api.

$.post(
            T5Ajax.ajaxurl,
            {
                action:     T6Ajax.action,
                search_term: $s.val()
            },
            function( response ) {
                $("#music-results").empty();
                $("#music-results").append( response );
                api.reinitialise();

            },
        );

But remember, in order to do this, your content needs to be visible because jscrollpane needs to calculate the height and if it's not displayed, the height will not be found. So if you append the content and the tab is not visible, simply reinitialize jscrollpane on the tab switch.

Hope this helps.

applying jScrollPane to a div appended with ajax

1 Answers1