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

回答

相关问题