自動更新滑塊內部的div內容jquery

當MySQL發生更改或添加了新行時，如何獲取滑塊jquery自動更新中的div內容？自動更新滑塊內部的div內容jquery

我試過用我的代碼，但我的滑塊不起作用，不能滑動任何div內容。

我的代碼：

的index.php

<html> 
<head> 
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"> 
    </script> 
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
    <script type="text/javascript" src="slick.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="slick.css" /> 
    <link rel="stylesheet" type="text/css" href="slick-theme.css" /> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('.single-item').slick({ 
       dots: false, 
       infinite: true, 
       speed: 700, 
       slidesToShow: 1, 
       slidesToScroll: 1, 
       arrows: true, 
      }); 
     }); 
    </script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $.ajaxSetup({ 
       cache: false 
      }); 
      setInterval(function() { 
       $('.single-item').load('item.php'); 
      }, 3000); 
     }); 
    </script> 
    <style type="text/css"> 
     body { 
      background-color: darkturquoise; 
     } 
    </style> 
</head> 

<div class="single-item" style="width: 500px; height: 500px; margin: auto;"> 

</div> 

</html>

item.php

<?php 
include 'connect.php'; 

$sql = mysql_query("SELECT * FROM fm_product WHERE p_pined = 'PINED'") or die(mysql_error()); 
while($result = mysql_fetch_array($sql)){ 
    echo '<div style="background-color: white; height: 200px;">'.$result['p_id'].'</div>'; 
} 

?>

我的代碼給定的輸出：

來源

2016-03-02 Vintage Beef

你的意思是當MYSQL行在背景中變化時，沒有頁面刷新你想更改滑塊內容？ –

@ n01ze是的，當MySQL更改或更新了滑塊內部的DIV內容時，jQuery將自動更新，如下所示：如果我的div內容具有A，B，C行，當我將D行添加到mysql中時，我在滑塊jQuery中的div內容將具有A，B，C和D.但我的滑塊jQuery代碼它不起作用。 :( –

我不確定這是否可以作爲完整答案，但主要問題在於您使用的.load及其與滑動滑塊插件的交互（或缺少）。

您的網頁上事件的順序如下：

在DOM加載&準備。
油滑滑塊初始化爲.single-item。 .single-item（目前沒有任何內容）的內容被滑動滑塊的HTML取代，以正確設置和渲染幻燈片，控制按鈕等。
- 這很重要，因爲.single-item現在充滿了很多不同的HTML元素。如果您不確定它的外觀，check the slick slider demo page - 查看頁面源代碼，然後使用開發人員工具查看源代碼以查看其外觀變化。
- 此外，.single-item從來沒有任何內容，所以它將呈現零幻燈片。此時，您創建了一個空滑塊。
您的setInterval活動已註冊。
3秒過關。
您的setInterval事件首次發生。 XHR被製作爲item.php，它以HTML響應 - 包含數據的一堆樣式爲divs。
- 此時，您可以使用開發人員工具來確認item.php通過監視您的網絡請求區域來返回正確的數據。
你的腳本接受了請求響應（HTML），並且完全用它替換了single-item的內容。
- 警報響鈴此時應該響起，因爲這會立即導致此元素（光滑的HTML設置）中的內容與它所替換的內容之間產生衝突。如果你看看你的開發者工具控制檯，你甚至可能會發現一些錯誤，由於缺少元素而抱怨。
GOTO STEP4

發生了什麼事是你.load調用替換元素的內容包含一個漂亮的滑蓋設置，完全打破了滑塊。

你需要做的是改變你如何處理AJAX。您應該放棄.load並轉向使用$.ajax以獲得更好的回調控制。根據該slick docs，您可以：

在每個XHR請求返回 - 破壞漂亮的滑蓋$('.single-item').slick('unslick');，內容插入.single-item，然後重新初始化滑塊。
跟蹤當前幻燈片。在每個XHR返回時，發現其中的幻燈片存在的，哪些不是，並刪除/將它們添加到使用.slick('slickAdd', HtmlOrDomNode）滑塊和.slick('slickRemove' slideIndex)

希望這有助於。

來源

2016-03-02 10:12:29 Sean

我想你會忘記一件事情：在XHR請求中檢查數據結果是否已經改變：如果沒有，則不需要重新加載（編輯：我的錯誤，我錯過了關於'Keep Tracking'的最後一點或者你編輯它。 – ThinkTank

非常感謝您的幫助，我現在可以解決我的問題。:) –

自動更新滑塊內部的div內容jquery

回答

相關問題