Problem showing jquery slider effects through AJAX
Hi i am using the slider code mentioned in the link workshop.rs/projects/coin-slider..Well it work fine independently but when i use an onclick event which calls this page through AJAX and then shows the contents into a div , this is not working . Only images are showing without any effect .. please suggest!!!!!!
html file:
<div id="nav">
<ul>
<li><a href="dbuelem.html">DBU Elimination</a></li>
<li><a href="contact.html">Contact us</a></li>
</ul>
</div>
<div id ="welcome">
</div>
JS code:
window.onload = initAll;
function initAll() {
allLinks[i].onclick = mainProcess;
}
function mainProcess(evt){
if ((this.innerHTML)=='Contact us'){
document.getElementById("right1").innerHTML = "Contacts";
Contacts();
return false;
}
}
function Contacts(){
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) { }
}
}
if (xhr) {
url = 'contactslide.html';
xhr.onreadystatechange = showContacts;
xhr.open("GET", url, true);
xhr.send(null);
}
else {
alert("Sorry, but I couldn't create an XMLHttpRequest");
}
return false;
}
function showContacts() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var outMsg = xhr.responseText;
}
else {
var outMsg = "There was a problem with the request " + xhr.status;
}
document.getElementById("welcome").innerHTML=outMsg;
}
}
contactslide.html
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />
</head>
<body>
<div id='coin-slider'>
<img src="images/1.jpg"/>
<span>Abhinav Singh</span>
<img src="images/2.jpg开发者_如何学C" />
<span>Pradeep sethi</span>
<img src="images/3.jpg" />
<span>Tracey Hare</span>
<img src="images/4.jpg" />
<span>Amarish Patel</span>
<img src="images/5.jpg" />
<span>Richa Misra</span>
<img src="images/6.jpg" />
<span>Vishal Anand</span>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider();
});
</script>
</body>
</html>
Where contactslide.html is the file that is mentioned in the link ... this file independently is working fine where as when i call this with AJAX its not showing any effects..please suggest!!!!!!!!!!!!
You need to initialize the slider plugin again on the element after you make a ajax call and set the innerHTML.
Assuming you are using jQuery we can modify Contacts and showContacts method as below
function Contacts(){
$.ajax({
url: 'contactslide.html',
success: showContacts,
error: function(xhr, errorStatus){
$("#welcome").html("There was a problem with the request. " + errorStatus);
}
});
return false;
}
function showContacts(response) {
var html = $(response);
$("#welcome").html(html.find('body').html());
}
加载中,请稍侯......
精彩评论