2011-02-11 118 views
1

我正在構建一個網站,它有一個公平的ajax位,我似乎有點讓jScrollPane爲我工作的障礙。jquery和jScrollPane和ajax

這可能很難記下來。

我有一個主頁,在它的基礎我有一個div,我用它來寫所有覆蓋或'lightbxes'。例如

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

然後在一個這樣的疊加(一些-url.php)我有更多的內容,然後我再有更多的div它開始使用AJAX填充。

一些-url.php

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

現在讓我們說DIV ID = 「左邊的」 我要上這一個JScrollPane滾動條,但它通過AJAX的內容加載。

我試過的是在'another-url.php'中加載了我的所有內容,然後嘗試添加滾動條。

'另一-url.php'

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

此操作失敗,它JScrollPane的()稱,$( '#左')。不是一個函數,所以我嘗試把它放入第一個覆蓋圖中,然後加載帶有內容的div。

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

這不會失敗的第一次,雖然我沒有得到任何滾動...但如果我重裝一遍失敗再次說$(「#左」)JScrollPane的()。不是一個功能。

所以我看着文檔,並嘗試使用動態內容的例子。

<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> 

但是這一次又說了$('#left')。jScrollPane();是不是一個函數。當我得到這些錯誤之一,該網站上的其他jScrollPane不是ajax'd突然停止工作,直到我重新加載頁面,所以顯然jScrollPane得到狗屎與我不知何故...

我希望創建圖書館的人可能會在這裏閒逛並回應。

回答

0

我認爲你需要設置jScrollPane()在內容加載後觸發。如果我沒有弄錯,加載方法是ascynchronous和你的內容被加載到html圓頂$("#left")之前將被觸發。這意味着當jscrollpane被觸發時它確實不可用。嘗試使用$.ajaxSetup({ascync:false});,看看這是否會有所幫助。如果$.ajaxSetup不適用於加載方法,則可能必須使用$.get方法。

IE:

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

如果ajaxSetup不隨負載的工作方法嘗試使用。獲得方法

$.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");}); 

希望它能幫助。爲我工作。我有類似的問題。