jScrollPane with Ajax

Question

I have a problem reloading jScrollPane after I use ajax. Although this issue seems to be asked a lot, I still haven't figured it out (after spending hours on it).

So here's my javascript code:

function search(str) {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("searchresult").innerHTML = xmlhttp.responseText;
            document.getElementById("searchresult").style.display = "inline";
            $('.searchresult').jScrollPane({autoReinitialise: true});
        }
    }
    xmlhttp.open("POST", "ajax/search.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("q=" + str);
}

So although I'm reintitialising JscrollPane it still doesn't come up after the div content is being replace by ajax.

Any solution?

Answer 1

I managed to solve it with api getContentPane.

I added the following code in the top of the script:

$(document).ready(function() {
  jQuery('.searchresult').jScrollPane({
         showArrows: true,
         autoReinitialise: false
  });
})

And I replaced this:

document.getElementById("searchresult").innerHTML = xmlhttp.responseText;
document.getElementById("searchresult").style.display = "inline";
 $('.searchresult').jScrollPane({autoReinitialise: true});

with:

api = jQuery("#searchresult").data('jsp');
api.getContentPane().html(xmlhttp.responseText);
document.getElementById("results").style.display="inline";
api.reinitialise();