通过AJAX显示jQuery滑块效果的问题

您好我正在使用链接workshop.rs/projects/coin-slider中提到的滑块代码。它独立工作很好，但是当我使用通过AJAX调用此页面的onclick事件然后将内容显示为一个div，这是行不通的。只有图像显示没有任何影响..请建议!!!!!!通过AJAX显示jQuery滑块效果的问题

HTML文件：

<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代码：

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

哪里contactslide.html是在链接中提到的文件...这个文件独立工作正常，因为当我与AJAX调用它没有显示任何效果..请建议!!!!!! !!!!!!

来源

2011-08-28 abhinav singh

在您进行ajax调用并设置innerHTML之后，您需要在元素上再次初始化slider插件。

假设你正在使用jQuery，我们可以修改Contacts和showContacts方法如下

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()); 
}

来源

2011-08-28 18:52:43 ShankarSangoli

::我是新来这个......请你能不能指导我的步骤..thanks –

您可以发布你的代码在哪里使用滑块插件？ – ShankarSangoli

请看看！ –

通过AJAX显示jQuery滑块效果的问题

回答

相关问题