• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

JS / einzelnes TD refreshen

sveka

Mitglied
Hallo,

ich habe eine Frage und würde gerne wissen, wie ich es am einfachsten realisieren könnte bzw. welche Erfahrungen ihr habt.

Ich möchte gerne in einer normalen Tabelle eine Zelle (td) in einem bestimmten Zeitintervall aktualisieren. Dabei soll auch eine Ajax-Abfrage stattfinden und diese dann das neue Ergebnis ausgeben.

Wie stelle ich es nun am einfachsten an, dass sich nur diese Zelle aktualisiert?

Der Zugriff per ID scheidet aus, da die Tabelle aus einer DB ausgelesen wird und daher die ID mehrmals vorhanden wäre.

Ich danke für eure Tipps. :)
 

Sempervivum

Senior HTML'ler
Hallo Sven,
wenn Du die Position der Zelle genau kennst, kannst Du so darauf zugreifen:
Code:
const newValue ='777';
document.querySelector('table').rows[3].cells[2].innerHTML = newValue;
Aber da Du schreibst, dass die Tabelle aus einer DB generiert wird ist fraglich ob das praktikabel ist.
Irgend ein Kriterium muss es doch geben, um diese Zelle zu identifizieren und ihr bei der Generierung eine eindeutige ID zu geben?
 

sveka

Mitglied
Ich könnte die Anzahl der Zeilen zählen lasssen und dann einen ID-Namen vergeben und die Zahl anhängen. Dann wären die IDs eindeutig. Kann ich dann per JS / JQuery gezielt die TD alle 5 Sekunden (oder anders) refreshen?
 

Sempervivum

Senior HTML'ler
In dem Fall würde sich das selbe Problem stellen: Du musst die Zahl hinterher genau kennen und wenn die Zelle mal in Zeile 3 und nach der nächsten Generierung in Zeile 7 steht, wird es nicht funktionieren.

Kann ich dann per JS / JQuery gezielt die TD alle 5 Sekunden (oder anders) refreshen?
Das ist selbstverständlich möglich.
 

sveka

Mitglied
Es würde immer die gleiche Zelle in jeder Reihe treffen.

Also ...

NameEintragTIMER
diese Zelle betrifft es
diese Zelle betrifft es

Daher müsste es mit dem durchzählen ja klappen, oder?
 

Sempervivum

Senior HTML'ler
Das heißt, Du willst die Zellen in allen Zeilen aktualisieren? Bisher hatte ich es so verstanden, dass Du genau eine aktualisieren willst?
 

sveka

Mitglied
Nur die Zellen, wo der Timer tatsächlich gestartet wurde. Aber das kann ich ja per PHP prüfen und dann das Skript aufrufen.

Aber ja, es kann durchaus mal 10 oder 15 Zellen treffen.
 

Sempervivum

Senior HTML'ler
Aber das kann ich ja per PHP prüfen und dann das Skript aufrufen.
Dann könntest Du doch wahrscheinlich nicht nur den Wert durch das Skript liefern lassen sondern auch die Nummer der Zeile? Und wenn es mehrere sind, das Ganze in einem Array.
 

sveka

Mitglied
Das wäre dann sicher denkbar. Reicht hier denn SetTimeout oder wie refreshe ich dann am Besten die Zelle bzw. sorge dafür das eine Abfrage stattfindet und das Ergebnis angezeigt wird?
 

Sempervivum

Senior HTML'ler
Da Du schreibst "Zeitintervall" soll das ja offenbar zyklisch immer wieder passieren. Das ist dann am einfachsten mit setInterval().
Weißt Du, wie man Daten mit Ajax holt?
 

sveka

Mitglied
Da Du schreibst "Zeitintervall" soll das ja offenbar zyklisch immer wieder passieren. Das ist dann am einfachsten mit setInterval().
Weißt Du, wie man Daten mit Ajax holt?
Ja, Ajax ist kein Problem. :)

OK. Dann teste ich es am Nachmittag mit SetInterval. :) Ich danke Dir erstmal. Sollte ich nicht klarkommen würde ich hier posten.

Auch die Lösung würde ich dann hier posten.
 

sveka

Mitglied
Hallo,

ich habe eine Lösung für mich gefunden. Mit Sicherheit nicht die schönste aber es macht das was es soll. :)

Und zwar habe ich es wie folgt gemacht...

In der Zelle frage ich ab ob ein Zeitstempel gesetzt wurde oder den Wert NULL trägt.

Je nachdem wird dann das Skript aufgerufen

Code:
<td>
            <div id="erg_<?php echo $a; ?>"></div>
            <?php
            if($test['zeitstempel_testvorgang'] == NULL)
            {
                ?>
                    <button class="btn btn-testcenter" id="start_<?php echo $a; ?>" data-id="<?php echo $test['id']; ?>">START</button>
                    <script>
                        $('#start_<?php echo $a; ?>').click(function(){
                            var datensatz = $(this).attr('data-id');
                            var id = <?php echo $a; ?>;
                            var nulll = 0;
                            document.getElementById("start_<?php echo $a; ?>").style.display = "none";  

                            setInterval(function(){
                            $.ajax({
                                url:"ajax/zeitstempel.php",
                                method:"POST",
                                data:{datensatz:datensatz , nulll:nulll},
                                success:function(data)
                                {
                                    //console.log(data);
                                    $('#erg_'+id).html(data);
                                }
                                });
                            }, 1000);
                        });
                        </script>
            <?php
            }
else
{
            ?>
                   
                    <script>
                    $(document).ready(function() {
                        var datensatz = <?php echo $test['id']; ?>;
                        var id = <?php echo $a; ?>;
                        var nulll = 1;
                       
                        //document.getElementById("start_<?php echo $a; ?>").style.display = "none";  
                        setInterval(function(){
                            $.ajax({
                                url:"ajax/zeitstempel.php",
                                method:"POST",
                                data:{datensatz:datensatz , nulll:nulll},
                                success:function(data)
                                {
                                    //console.log(data);
                                    $('#erg_'+id).html(data);
                                }
                                });
                            }, 1000);
                    });
                    </script>
               <?php
}
?>
            </td>
 
Werbung:

Neueste Beiträge

Oben