jQuery script not working with Ajax
I have an issue:
I am implementing jQuery scroll bar (from here) on my content list that are populating through Ajax. I have two pages. On the first page js/custom_scrollbar.js have main "jp-container" function.
First Page:
<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>
Second Page:
<ul>
<li>
<a href="#">Z</a>
</li>
</ul>
When i receive Ajax response, it populates <li> list and merge contents in <div> on the first page through .innerHTML. I'm simply calling a part of another page and merging its contents into the main page. Following function is getting Ajax response.
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("Session开发者_运维问答Expired") == "true")
window.location = "SessionExpiredURL";
var response = http.responseText;
if (response) {
document.getElementById("contactListDiv").innerHTML = response;
eval(document.getElementById('contactsDivScript').innerHTML);
}
}
};
http.send(null);
}
When I place <ul> on first page without calling Ajax or .innerHTML - jQuery works as expected and it displays jQuery scroll bar on contents. But if i follow above code it doesn't call jQuery script.
Thank You!
The flow of your code goes something like this:
1) You load the page and the javascript.
2) jScrollPane is initialized and <div id="contentListDiv" class="list jp-container"></div> is made scrollable.
3) You call ajax and receive response.
4) You overwrite <div id="contentListDiv" class="list jp-container"></div> with your ajax response making it just plain old html (non scrollable).
You see the problem?
Basically what you need to do is call jScrollPane after you got the ajax response and updated <div id="contentListDiv" class="list jp-container"></div>. So the jspane can make it scrollable again. To do this you need to modify your code after ajax response like following:
document.getElementById("contactListDiv").innerHTML = response;
eval(document.getElementById('contactsDivScript').innerHTML); //eval()? seriously?
$('#contentListDiv').jScrollPane();
You can read more about jScrollPane here -> http://jscrollpane.kelvinluck.com/
Also You should get some javascript and jquery knowledge first, no offense.
Actually you don't use the full functionallity of jquery.
The code you post uses al lot of plain Javascript. Not a real problem, but a little bit strange.
so please look at the documentation of jquery and especially at the Ajax docu.
http://api.jquery.com/category/ajax/
But nevertheless: I will do it like this:
$("#contactListDiv").load("GET", url ,function(){
//add your content here when loading is finished
});
Using the full potential of jQuery could make this as simple as:
$(function(){
$("#contactListDiv").load('myContentListURL', function(){
$(this).jScrollPane();
});
});
Take a look in:
http://api.jquery.com/ready/ and http://api.jquery.com/load/
加载中,请稍侯......
精彩评论