per Javascript (jquery) mehre Textdateien auf einer Html Seite Austauschen.

  • JavaScript

Es gibt 4 Antworten in diesem Thema. Der letzte Beitrag () ist von Andy2002.

    per Javascript (jquery) mehre Textdateien auf einer Html Seite Austauschen.

    Hallo ich nutze folgenden Javascript code um auf einer Html Seite eine Textdatei anzuzeigen.

    Quellcode

    1. <script type="text/javascript">
    2. $(document).ready(function(e) {
    3. $.get({
    4. url : 'lustigeurlzu/textdatei1.txt',
    5. dataType : 'text'
    6. }).done(function(data){
    7. $('#ntxt').text(data);
    8. }).fail(function(data){
    9. alert('Fehler: ' + data.statusText);
    10. });
    11. });
    12. </script>
    14. Im html Bereich wird dies einfach durch eine div id angefordert.
    15. <div id="#ntxt"></div>


    Jetzt möchte ich aber das sich der Text alle 15 Sekunden ändert, also textdatei1.txt durch textdatei2.txt ersetzt wird, als schleife.
    Leider habe ich keinerlei Brauchbare Informationen aus meinen google suchen gefunden, so das ich mich nun an euch wende. :)

    Die Frage verstehe ich nicht. Den Code zum Herunterladen der Textdatei hast du doch schon. Das $.get() gehört halt an die Stelle, wo der Kommentar "ab hier Textdatei holen" steht. Oder du passt deine Version an und umschließt dein $.get() mit dem setInterval. Du musst dir nur noch Gedanken machen, wann welche Textdatei geladen werden soll.

    HTML-Quellcode

    1. <script type="text/javascript">
    2. window.addEventListener("load", () => setInterval(() => {
    3. $.get({
    4. url : 'lustigeurlzu/textdatei1.txt',
    5. dataType : 'text'
    6. }).done(function(data){
    7. $('#ntxt').text(data);
    8. }).fail(function(data){
    9. alert('Fehler: ' + data.statusText);
    10. });
    11. });
    12. $.get({
    13. url : 'lustigeurlzu/textdatei2.txt',
    14. dataType : 'text'
    15. }).done(function(data){
    16. $('#ntxt').text(data);
    17. }).fail(function(data){
    18. alert('Fehler: ' + data.statusText);
    19. });
    20. });
    21. }, 1000 * 15));
    22. </script>

    Also wenn ich das richtig verstanden habe, müsste es dann so aussehen?
    Keiner mehr eine Idee?

    Ich hab das nun so aus meinen Buch geschrieben, aber auch hier kein Aufruf der Textdateien.

    HTML-Quellcode

    1. <head>
    2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    3. </head>
    4. <body>
    5. <script>
    6. const documents = [
    7. 'https://www.url.de/assets/txt/main.txt',
    8. 'https://www.url.de/assets/txt/main2.txt'
    9. ];
    11. const container = document.getElementById('newstext');
    12. let currentIndex = 0;
    14. function loadNextTextFile() {
    15. $.ajax({
    16. url: textFiles[currentIndex],
    17. type: 'GET',
    18. success: function(response) {
    19. container.innerHTML = response;
    20. },
    21. error: function() {
    22. container.innerHTML = 'Fehler beim Laden der Daten.';
    23. }
    24. });
    26. currentIndex = (currentIndex + 1) % textFiles.length;
    27. }
    28. loadNextTextFile();
    31. setInterval(loadNextTextFile, 5000);
    32. </script>
    33. <div id="newstext" style="width:600px; height: 20px; border: 0px solid black;"></div>
    34. </body>

    Jetzt geht er!!

    HTML-Quellcode

    1. ​
    3. <script>
    4. $(document).ready(function() {
    5. const textFiles = [
    6. 'assets/txt/main.txt',
    7. 'assets/txt/main2.txt'
    8. ];
    10. const container = $('#newstext');
    11. let currentIndex = 1;
    13. function loadNextTextFile() {
    14. $.get(textFiles[currentIndex])
    15. .done(function(response) {
    16. container.text(response);
    17. })
    18. .fail(function() {
    19. container.text('Fehler beim Laden der Textdatei.');
    20. });
    21. currentIndex = (currentIndex + 1) % textFiles.length;
    22. }
    24. // Initial die erste Textdatei laden
    25. loadNextTextFile();
    27. // Alle 5 Sekunden die nächste Textdatei laden
    28. setInterval(loadNextTextFile, 5000);
    29. });
    30. </script>


    Thema erledigt!

    Dieser Beitrag wurde bereits 4 mal editiert, zuletzt von „Andy2002“ ()

Facebook
Telefonspende