• 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. :)
 
Werbung:
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?
 
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?
 
Werbung:
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.
 
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?
 
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.
 
Werbung:
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>
 
Zurück
Oben