Question

I’m using the following code in my page, in order to reinitialise jScrollPane, for a div that refreshes it’s content via ajax:

<script>
    var $j = jQuery.noConflict();
    $j(document).ready(function() {

        $j('#map_data').jScrollPane({
               showArrows: true,
               autoReinitialise: false
        });

        $j('.country .point').click(function () {
            var point_id = $j(this).attr('id');
            theCall(point_id);
        });

    });

    function theCall(pointid) { 
        $j.ajax({
            type: 'POST',
            url: 'my_ajax_receiver.php',
            data: {point_id: pointid}, 
            dataType: 'html',     

            success: function(a) {
                            $j("#map_data").html(a);

                            var api = $j("#map_data").jScrollPane().data('jsp');
                            api.getContentPane().html(a);
                            api.reinitialise(); 
            }

        });
    }
</script> 

I searched and tested many other solutions suggested about this issue, but nothing worked till now. I don’t see anything wrong in this code. Could somebody help me?

Answer 1

Somehow it’s working now, this is the correct code, it may help someone else

<script>
    var $j = jQuery.noConflict();
    $j(document).ready(function() {

        $j('.country .point').click(function () {
            var point_id = $j(this).attr('id');
            theCall(point_id);
        });

    });

    function theCall(pointid) { 
        $j.ajax({
            type: 'POST',
            url: 'my_ajax_receiver.php',
            data: {point_id: pointid}, 
            dataType: 'html',     

            success: function(a) {
                            $j("#map_data").html(a);

                            var api = $j('#map_data').jScrollPane({}).data('jsp');
                            api.reinitialise(); 
            }

        });
    }
</script>