jquery and jScrollPane and ajax

Question

jquery and jScrollPane and ajax

1.9k views Asked by Scott Dilley At 11 February 2011 at 03:12

I am building a site that has a fair bit of ajax on it and I seem to have hit a bit of a roadblock with getting jScrollPane to work for me.

This might be hard to write down.

I have a main page and at the base of it I have a div which I use to write all my overlays or 'lightbxes' to. e.g.

<body>
<a href="#" onclick="$('#popup').load('some-url.php');return false;">content etc</a>
<div id="popup"></div>
</body>

Then in one such overlay (some-url.php) I have more content and then again I have some more divs which get populated using ajax.

some-url.php

<body>
<div id="left"></div>
<div id="right"></div>
<script>
$('#left').load('another-url.php');
</script>
</body>

Now lets say div id="left" I want a jScrollPane scroller on it, but it's content loads via ajax.

What I have tried is in 'another-url.php' loading up all my content and then trying to add the scrollpane.

'another-url.php'

<div class="wrapper>
// iterate through my DB and gets lots of content
</div>
<script>
$('#left').jScrollPane();
</script>

This fails, it says that $('#left').jScrollPane(); is not a function, so I tried putting it in the first overlay after I load up the div with content.

<body>
<div id="left"></div>
<div id="right"></div>
<script>
$('#left').load('another-url.php');
$('#left').jScrollPane();
</script>
</body>

This doesn't fail the first time, though I get no scroller... but if I reload it again it fails again saying that $('#left').jScrollPane(); is not a function.

So I looked at the docs and tried using the dynamic content example.

<body>
<div id="left"></div>
<div id="right"></div>
<script>
var api = $('#left').jScrollPane().data('jsp');
('a.some-link').bind(
'click',
function(){
api.getContentPane.load(
'another-url.php',
function(){
api.reinitialise();
}
);
}
);
</script>
</body>

But this time it again says that $('#left').jScrollPane(); is not a function.Also when I get one of these errors, the other jScrollPane on the site that is not ajax'd suddenly stops working also, until I reload the page so obviously jScrollPane is getting the shits with me somehow...

Am hoping the guy that created the library might hang out here and respond.

Original Q&A

There are 1 answers

**robx** · Answer 1 · 2011-05-21 04:56:23

I think you need to set jScrollPane() to fire after the contents are loaded. If i'm not mistaken, the load method is ascynchronous and your jscrollpane() will fire before contents are loaded to html dome $("#left"). Which means that it really isn't available when jscrollpane fired. try to use the $.ajaxSetup({ascync:false}); and see if that will help. You might have to use a $.get method if the $.ajaxSetup doesn't work for the load method.

IE:

$.ajaxSetup({async:false});
$('#left').load('another-url.php');
$('#left').jScrollPane();

if ajaxSetup don't work with the load method try to use the .get method

 $.ajaxSetup({async:false});
    var $jqxhr = $.get('another-url.php');
    $jqxhr.success(function(responseText,statusText,jqxhr){
      $('#left').html(responseText);
    });
    $jqxhr.complete(function(){
      $('#left').jScrollPane();
    });
    $jqxhr.error(function(){alert("error loading content");});

Hope it helps. Worked for me. I had a similar problem.

TechQA.

jquery and jScrollPane and ajax

There are 1 answers

Related Questions in JQUERY

Related Questions in JQUERY-JSCROLLPANE

Popular Questions

Popular Tags

Trending Questions