jQuery腳本不使用Ajax

-1

我正在通過Ajax填充我的內容列表上執行的jQuery滾動條（from here）。我有兩頁。在第一頁js/custom_scrollbar.js有主要的「jp-container」功能。

第一頁：

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/style.css" /> 
     <link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.codrops2.css" /> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
     <!-- the mousewheel plugin --> 
     <script type="text/javascript" src="js/jquery.mousewheel.js"></script> 
     <!-- the jScrollPane script --> 
     <script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script> 
     <script type="text/javascript" src="js/scroll-startstop.events.jquery.js"></script> 
      <script type="text/javascript" src="js/custom_scrollbar.js"></script> 
     </head> 
<body onload='myContactList();'> 
    <div id="contentListDiv" class="list jp-container"></div> 
</body> 
</html>

第二頁：

<ul> 
    <li> 
     <a href="#">Z</a> 
    </li> 
</ul>

當我收到Ajax響應，它填充<li>列表，並通過.innerHTML第一頁合併在<div>內容。我只是調用另一頁的一部分，並將其內容合併到主頁面中。以下功能正在獲取Ajax響應。

function myContentList() { 
    var http = createRequestObject(); 
    http.open('GET', 'myContentListURL'); 
    document.getElementById("contactListDiv").innerHTML = '<img src="images/loader-small.gif" border="0" />'; 
    http.onreadystatechange = function() { 
     if (http.readyState == 4 && http.status == 200) { 
      if (http.getResponseHeader("SessionExpired") == "true") 
       window.location = "SessionExpiredURL"; 
      var response = http.responseText; 
      if (response) { 
       document.getElementById("contactListDiv").innerHTML = response; 
       eval(document.getElementById('contactsDivScript').innerHTML); 
      } 
     } 
    }; 
    http.send(null); 
}

當我把第一頁<ul>，而不調用Ajax的或.innerHTML - jQuery的工作正常，它顯示的內容jQuery的滾動條。但是，如果我遵循上面的代碼，它不會調用jQuery腳本。

謝謝！

來源

2011-10-12 nadeem younis

至於我可以看到Java是不涉及到這裏。我想你的意思是用'javascript'來標記問題 - 改變你的想法。 – Thomas

沒有任何jquery – NimChimpsky

你的代碼的流程是這樣的：

1）您加載網頁和JavaScript 。

2）jScrollPane被初始化，並且<div id="contentListDiv" class="list jp-container"></div>被製作成可滾動的。

3）你調用ajax並接收響應。

4）你用你的ajax響應覆蓋<div id="contentListDiv" class="list jp-container"></div>使它只是普通的舊html（不可滾動）。

你看到問題了嗎？基本上你需要做的就是在獲得ajax響應並更新<div id="contentListDiv" class="list jp-container"></div>後調用jScrollPane。所以jspane可以讓它再次滾動。要做到這一點，你需要修改你的代碼Ajax響應後，像以下：

document.getElementById("contactListDiv").innerHTML = response; 
eval(document.getElementById('contactsDivScript').innerHTML); //eval()? seriously? 
$('#contentListDiv').jScrollPane();

你可以閱讀更多關於JScrollPane的位置 - >http://jscrollpane.kelvinluck.com/

你也應該得到一些JavaScript和jQuery知識第一，沒有進攻。

來源

2011-10-12 07:02:57 egis

非常感謝你們所有人。特別是「egis」這對我很有用。 –

其實你並沒有使用jquery的完整功能。

您發佈的代碼使用了很多簡單的Javascript。不是一個真正的問題，但有點奇怪。

所以請看看jQuery的文檔，特別是在Ajax文檔。

http://api.jquery.com/category/ajax/

但無論如何：我會做這樣的：

$("#contactListDiv").load("GET", url ,function(){ 
    //add your content here when loading is finished 
});

來源

2011-10-12 06:56:24 Michel

使用jQuery的全部潛力，有可能使這一簡單：

$(function(){ 
    $("#contactListDiv").load('myContentListURL', function(){ 
            $(this).jScrollPane(); 
           }); 
});

採取一看：

http://api.jquery.com/ready/ 和 http://api.jquery.com/load/

來源

2011-10-12 07:34:33 sikrip

jQuery腳本不使用Ajax

回答

相關問題