通過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滑塊效果的問題

回答

相關問題