Integration von drei APIs in HTML-Website

Question

Ich versuche, diese drei APIs in meine HTML-Website zu integrieren.

Jedes Mal, wenn die nachfolgende Option die vorherige aufhebt, wird nur die letzte ausgeführt.

HTML

<div class="container1"> 
    <div id="container-table"></div> 
    <div id="container-tablec"></div> 
    <div id="container-tableq"></div> 
    <div id="container-table"></div> 
    <div id="container-table"></div> 
    </div> 

JavaScript

<script> 
    $('document').ready(function(){ 
     refreshData(); 
    }) 

    function refreshData() { 
     $('#container-table').load("data.php", function(){ 
      setTimeout(refreshData, 10000); 
     }); 
    } 
</script> 

<script> 
    $('document').ready(function(){ 
     refreshData(); 
    }) 

    function refreshData() { 
     $('#container-tablec').load("datacex.php", function(){ 
      setTimeout(refreshData, 10000); 
     }); 

    } 
</script> 


<script> 
    $('document').ready(function(){ 
     refreshData(); 
    }) 

    function refreshData() { 
     $('#container-tableq').load("dataquad.php", function(){ 
      setTimeout(refreshData, 10000); 
     }); 
    } 
</script> 

Answer 1

Wie @ MátéSolymosi und @JiFus sagte, Sie können Element-IDs oder Funktionsnamen nicht wiederverwenden. Deshalb haben Sie Probleme.

Unten ist Ihr gleicher Code, aber mit den div IDs zu Klassen geändert, und die Funktionsnamen unterscheiden sich basierend auf wo sie aufgerufen werden.

Zusammenfassung der Änderungen:

• Changed div IDs Klassen
• Geänderte Funktionsnamen eindeutig sein
• geändert .load() Funktion Klassennamen zu verwenden, anstatt ID von

Sie könnte natürlich die Funktionsnamen ändern, was immer Sie möchten, und Sie könnten eindeutige IDs verwenden tead von Klassen für die div s (wie container-table1, container-table2 etc.)

<div class="container1"> 
 
    <div class="container-table"></div> 
 
    <div class="container-tablec"></div> 
 
    <div class="container-tableq"></div> 
 
    <div class="container-table"></div> 
 
    <div class="container-table"></div> 
 
</div> 
 

 
<script> 
 
    $('document').ready(function(){ 
 
     refreshData(); 
 
    }) 
 

 
    function refreshData() { 
 
     $('.container-table').load("data.php", function(){ 
 
      setTimeout(refreshData, 10000); 
 
     }); 
 
    } 
 
</script> 
 

 
<script> 
 
    $('document').ready(function(){ 
 
     refreshDataC(); 
 
    }) 
 

 
    function refreshDataC() { 
 
     $('.container-tablec').load("datacex.php", function(){ 
 
      setTimeout(refreshDataC, 10000); 
 
     }); 
 

 
    } 
 
</script> 
 

 
<script> 
 
    $('document').ready(function(){ 
 
     refreshDataQ(); 
 
    }) 
 

 
    function refreshDataQ() { 
 
     $('.container-tableq').load("dataquad.php", function(){ 
 
      setTimeout(refreshDataQ, 10000); 
 
     }); 
 
    } 
 
</script>

Answer 2

Sie können mehrere Funktionen mit dem gleichen Namen nicht haben, auch wenn sie in verschiedenen <script>-Tags sind. Wenn Sie das zweite refreshData definieren, überschreibt es das erste.

Verschiedene Namen für alle 3 Funktionen festlegen.

---

Sie könnten auch die drei konsolidieren <script> Blöcke in einem:

<script> 
 
    $('document').ready(function(){ 
 
     refreshData(); 
 
    }); 
 

 
    function refreshData() { 
 
     $('#container-table').load("data.php", function() { 
 
      setTimeout(refreshData, 10000); 
 
     }); 
 
     
 
     $('#container-tablec').load("datacex.php", function() { 
 
      setTimeout(refreshData, 10000); 
 
     }); 
 
     
 
     $('#container-tableq').load("dataquad.php", function() { 
 
      setTimeout(refreshData, 10000); 
 
     }); 
 
    } 
 
</script>

Answer 3

Sie nicht die gleiche Funktion immer wieder, weil verwenden können, wenn Sie es das zweite Mal, es schreiben wird über den ersten entscheiden. Ändern Sie einfach Ihren Funktionsnamen. Ich denke dann wird es funktionieren.