Personal Homepage, Tutorials & Blog

Ajax: Seiteninhalt laufend aktualisieren (jQuery)

Ajax: Seiteninhalt laufend aktualisieren (jQuery)

14. September '10

In diesem Artikel habe ich beschrieben, wie mit Hilfe der Ajax-Technologie ein PHP-Script einmalig nachgeladen werden kann. In diesem Artikel zeige, wie ein PHP-Script andauernd aktualisiert werden kann, ohne dass die Seite neu geladen werden muss.

Für was benötige ich die Ajax-Technologie?

Ein Anwendungsbeispiel für den laufenden Reload wäre z.B. in einem Nachrichtensystem das Überprüfen neuer Nachrichten. So muss der Benutzer nicht mehr jedes Mal die Seite aktualisieren, um zu überprüfen, ob er eine neue Nachricht bekommen hat, sondern bekommt die Anzahl der neuen Nachrichten sofort angezeigt.

Beispiel

Folgender Code wird in den head-Bereich der Homepage geschrieben:

<script type="text/javascript">
     $(document).ready(function() {
       $("#refresh").load("refresh.php");
       var refreshId = setInterval(function() {
          $("#refresh").load('refresh.php?' + 1*new Date());
       }, 1000);
    });
</script>

Folgender Code wird dorthin geschrieben, wo später die Ausgabe des PHP-Scripts erscheinen soll:

<div id="refresh" style="text-align:center;"></div>

Erklärung

Im head-Bereich wird das Javascript ausgeführt, das das PHP-Script im Intervall von 1000 Millisekunden (entspricht 1 Sekunde) neu lädt. Der erste load-Befehl lädt das Script, das beim ersten Aufruf der Seite angezeigt werden soll, der zweite load-Befehl enthält das Script, das dann im Intervall aufgerufen werden soll. Optional können auch hier bei beiden Aufrufen Parameter übergeben werden.
Auf der Homepage ist ein div-Container platziert, in dem die Ausgabe der PHP-Scripte angezeigt wird.

Demo

 

Wenn Ihnen dieser Artikel gefallen hat, oder Sie Anregungen/Kritik haben, würde ich mich freuen, wenn Sie einen Kommentar schreiben oder das RSS Feed abonnieren, um immer automatisch über die neuesten Artikel auf dieser Seite informiert zu werden. Sie dürfen diesen Artikel oder die gesamte Seite auch gerne verlinken.

93 Kommentare

  1. CpunktS /

    Hallo,
    bei mir geht das Script nicht ich hab das kleine Script

    $(document).ready(function() {
           $("#refresh").load("refresh.php");
           var refreshId = setInterval(function() {
              $("#refresh").load('refresh.php?' + 1*new Date());
           }, 1000);
        });

    in einem „lib“ Ordner und wird über

    echo '<script src="www.seite.de/lib/ajax.js"></script>';

    im Header aufgerufen, der Header wird aus einem „sys“ Ordner geladen in eine Seite wo dieser DIV-Container platziert ist

    <div id="refresh"></div>

    in dem selben Ordner ist auch die refresh.php
    Datei.

    Woran kann das liegen das es nicht funktioniert?

    Wenn Du noch Infos brauchst schreib mich einfach an, wie z.B. die refresh.php, hier werden mehrere

    echo '';

    ausgegeben

  2. Hallo,
    ich habe das Script bei mir auch eingebaut, jedoch wird bei mir anschließend nur eine weiße Seite angezeigt.
    Was habe ich falsch gemacht?

    Grüße

  3. Hallo.

    Ich versuche meinen Header (.html) kommplett in dem Div zu laden, aber er zeigt mir nur teile und den code an.

    Wie kann ich es machen, das er mir ganz normal den header (Funktionsfähig) ohne code anzeigt?

    Grüße.

    PS: Einmal einloggen dann ist das Problem direkt zusehen.

  4. Hallo,

    ich habe alles versucht nachzubauen, jedoch funktioniert es nicht. Ich habe in meiner .php eine Twitterverbindung die Tweets fetched, diese sollen automatisch aktualisieren. Ich habe schon so gut wie alles versucht was mir eingefallen ist.

    Leider ohne Erfolg.

    • Jürgen /

      Hallo,

      bei mir hat das Skript eigentlich gleich funktioniert.
      Nur funktioniert es nicht am Windows Phone8.1,wo ich mir eine kleine webapp zusammengeklickt habe.
      Bzw. wird meine ausgabe nicht aktualisiert. Erst wenn ich wieder refreshe, dann wird der Status aktualisiert.

      Bitte um Eure hilfe !

      <!DOCTYPE HTML>

      <html lang="en">
          <head>
              <meta charset="UTF-8">


      <script type="text/javascript" src="http://192.168.178.59/jquery-2.1.3.js"></script>


              <title>Kaffee </title>
          </head>


      <div align="center">

       <script>
         jQuery.noConflict();
         jQuery(document).ready(function(){
                jQuery("#refresh").load("http://192.168.178.59/schaltstatus.php");
                var refreshId = setInterval(function() {
                        jQuery("#refresh").load("http://192.168.178.59/schaltstatus.php");
                }, 1000);
         });
       </script>
  5. Lukas /

    Hallo,

    das Skript läuft wunderbar und funktioniert perfekt wenn man den echo-Befehl schon in der PHP- Datei benutzt.
    Ich gebe über die PHP-Datei mehrere Datenbank einträge aus und würde die gerne auf meiner HTML-Seite verteilen, d.h. in verschiedenen Tabellen und Bereichen.

    Nun könnte ich das ja über einen Include Befehl im Header der HTML Datei machen und dann den echo Befehl dort eintragen wo ich ihn benötige in meiner Seite.
    Leider klappt das mit dem Refresh dann aber nicht. Also ich kann die php Datei nicht refreshen lassen und dann die „variablen“ auf der html seite benutzen.

    Hätte da jemand einen ansatz wie man das realiseren könnte?

    • php-coder /

      Befolgen sie bitte diese reienfolge.
      schritt.
      fügen sie diese div id täg auf ihre Tabbellen. (merken sie sich gut, welche datei sie refresehn möchten).

      Schritt 1:

      <div id="useronline"></div>

      schritt 2:

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

      schritt: 3

        <script>

      function useronline (){  
       
       
       $("#useronline").load("beispiel.php");
       
      }  
      setInterval(useronline, 1000);


       </script> ';
       
      }

      Wiederholen sie den vorgang.
      beachten sie, jedes mal wenn Sie eine neue datei benutzen, müssen
      sie auch den Code verändern.

      Die datei name „beispiel.php“ ist nur beispiel.
      das bitte verändern 😀
      Falls sie weiter fragen haben bitte hier.
      LG: php-coder

  6. Hi wir wollen für unseren webradiosender gerne das script verwenden um die titelanzeige zu aktualisieren aber leider funktioniert es nicht hier der von mir verwendete code

    index.php

    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>Flashplayer-WebRadioNetwork</title>
       
        <script src="www.webradionetwork.de/stream/jquery-1.4.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
         $(document).ready(function() {
           $("#refresh").load("www.webradionetwork.de/stream/refresh.php");
           var refreshId = setInterval(function() {
              $("#refresh").load('www.webradionetwork.de/stream/refresh.php?' + 1*new Date());
           }, 1000);
        });
    </script>
      </head>
      <body>
    <div align="center">

    <!-- Aktueller Track -->
    <div id="refresh" style="text-align:center;"></div>
    <!-- Ende Aktueller Track -->

    </body>
    </html>

    refresh.php

    <?php echo file_get_contents('http://stlouis.webradionetwork.org:7777/currentsong?sid=1'); ?>

    hab ich was vergessen oder falsch gemacht ?

    • das prof /

      hi,

      tausche mal aus

      <html lang="en">
        <head>
          <meta charset="utf-8">
          <title>Flashplayer-WebRadioNetwork</title>
          <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        </head>
        <body>
      <div align="center">

      <script>
        jQuery.noConflict();
        jQuery(document).ready(function(){
               jQuery("#refresh").load("www.webradionetwork.de/refresh.php");
               var refreshId = setInterval(function() {
                       jQuery("#refresh").load("www.webradionetwork.de/refresh.php");
               }, 1000);
        });
      </script>

      <!-- Aktueller Track -->
      <div id="refresh" style="text-align:center;"></div>
      <!-- Ende Aktueller Track -->

      </body>
      </html>

      außerdem solltest du die refresh.php nicht in einem unterordner haben, da macht jquery bei mir auch probleme

      • Hi,
        danke für die antwort
        so funktionierts 😀

        jetzt muss ich jquery nur dazu birngen die finger von meinem wordpress menü zu lassen aber ich glaub das ist ein anders thema 😛

      • das prof /

        was macht es denn da?

      • nun ja das menü ist horizontal angeordnert und sollte wenn man auf einen menüpunkt mit der maus fährt ein horizontales submenü anzeigen
        leider aber wird das menü bei eingebettetem jquery vertikal angezeigt
        ich konnte den fehler bis jetzt noch nicht finden versuche es aber weiter
        der quellcode ist ja nicht ohne von jquery 😀

      • das prof /

        ich nehme mal an, dass das problem daran liegt, dass dein quelltext nicht richtig ist.

        mit im body machst du weitere

        </body>
        </html>

        auf und zu.

        zb. in zeile 256, 298, 299, 311, 312, 313, 323, 324, 333, 334.

        es ist nicht richtig, wenn du eine datei mitten im DOM includierst, dass diese datei ebenfalls mit html, body und metas versehen ist.

        so wie ich es sehe, icludierst du die index.php mitten im document, da kannst bzw. MUSST du auf alles verzichten was bereits da ist.

        <script src="www.webradionetwork.de/stream/jquery-1.4.1.min.js" type="text/javascript"></script>
            <script type="text/javascript">
             $(document).ready(function() {
               $("#refresh").load("www.webradionetwork.de/stream/refresh.php");
               var refreshId = setInterval(function() {
                  $("#refresh").load('www.webradionetwork.de/stream/refresh.php?' + 1*new Date());
               }, 1000);
            });
        </script>

        das wäre vollkommen ausreichend!

      • Der Sack /

        Danke

  7. Hallo,

    danke das Script funktioniert, ich habe nur ein Problem. So sieht meine refresh.php aus, die Anzahl wird auch ausgegeben.

    $anzahl_stoerungen = $db->executeQuery("SELECT * FROM stoerungen WHERE status = 'open' "); 
    $stoerungen_gesamt_aktuell = $anzahl_stoerungen->getRowCount();
           
    echo $stoerungen_gesamt_aktuell

    Allerdings kann ich die Variable $stoerungen_gesamt_aktuell sonst nicht verwenden. Sie wird innerhalb des Divs angezeigt aber ich benötige die Variable auf der Seite zum berechnen. Was mach ich nun?

  8. Hi,

    ie10 läuft nicht!

    die Ausgabe wird nicht aktualisiert, also der Container.
    die refresh.php wird aber korrekt abgerufen.

  9. Hallo :)

    Ich habe in der refresh.php eine mySQL-Abfrage und als Ausgabe einen HTML-Code. Es scheint, als ob die refesh.php bei mir gar nicht abgefragt wird. Es müsste ja zumindest der HTML-Code angezeigt werden :)

    Danke für einen Tipp!
    Klemens

  10. das prof /

    sehr gut! dein tut hat mir grade arbeit abgenommen… nach 3 tagen vergeblichen googelns ^^

  11. Hallo,

    ich finde Ihr Script super und es funzt auch einwandfrei. Was ich noch unbedingt bräuchte und mir dabi schon die Finger wund gegoogelt habe ist, daß der Timer sich dynamisch mit den Inhalten aus einer MySQL-DB ändert. Timerangaben werden mit den Datensätzen geliefert. nur wie realisiere ich, dass sich der timer ändert? das script ist in einer index.php. dem script steht eine mysql-abfrage vorraus. die refresh beinhaltet widerum eine mysql-abfrage. es funktioniert super nur leider mit statischem timer. es soll ein kundeninformationssytem sein, dass ganztags von selber läuft. Vielen Dank schonmal für Hilfe! Ich weiß der Beitrag ist schon 2,5 Jahre alt aber ich hoffe Sie lesen es :)
    Viele Grüße Stefan

  12. Hallo,

    danke, das Script funktioniert einwandfrei. Ich muss jetzt aber mehrere Elemente auf einer Seite aktualisieren und möchte natürlich nicht für jedes Element eine einzelne php-Datei machen. Die einzelnen Elemente sind Abfragen aus einer mysql-Datenbank. Ich gehe davon aus, dass ich in der refresh.php Variabeln für die Abfragen definieren kann. Wie muss ich diese Variabeln dann im Script wieder abrufen? Danke schon im voraus.

  13. Hallo, hab mal eine Frage.

    Würde das auch mit größeren Projekten gehen? Also ich meinte eigendlich 1 Sekunde nachladen ist ja schon ziehmlich Performance Lastig oder ist das egal bei AJAX/Jquery? :)

    Gruß,
    Karl

    • Nein egal ist das nicht, das sind normale Serveranfragen, das selbe als wenn du nonstop eine Seite neu laden würdest. Jedes mal ist das eine Serveranfrage die verarbeitet werden muss. Im schlimmsten Fall passiert das der Server einen Fehler ausspuckt also quasi zumacht. Wie hoch die Toleranz ist hängt von vielen Faktoren ab. Facebook z.B. könnte sowas nicht laufen lassen 😉

      • Ahhh .. okay Danke für die schnelle Antwort! Ich hab mich auch mal bisschen darüber Informiert, ich wollte nehmlich ein großes Projekt starten und da kommt der Chat zum Einsatz bei mir aber nur (Privat zu Privat, wie bei Facebook) Dann wird das warscheinlich so eine art Socket Server? Wo man eine dauerhafte Verbindung hat, ist ja bei Facebook genauso wenn man kein Internet hat, fliegt man auch aus dem Chat raus, Bei einer Pinnwand wird das wahrscheinlich genauso gemacht. Aber ein Ajax chat mit ständigen Request wäre dann wie du beschrieben hast nicht so angebracht.

  14. Ich habe das Script jezt so eingesetzt, wie es oben steht, doch die refresh.php Datei wird einfach nicht geladen. Woran kann das liegen?

  15. Alex /

    Hallo,

    bei mir wird die Seite lokal nicht aktualisiert.

    Habe mySQL-Datenbank dahinter und habe dort direkt
    die Daten geändert.

    Dachte mir das dann sofort die Daten auf der lokalen
    Seite automatisch frisch angezeigt werden.

    Tut es aber nicht.

    Muss ich die refresh.php in meine update.php wo Dein Code liegt umschreiben?

    $(document).ready(function() {
    $(„#refresh“).load(„refresh.php“);
    var refreshId = setInterval(function() {
    $(„#refresh“).load(‚refresh.php?‘ + 1*new Date());
    }, 1000);
    });

    Hab ich gemacht funzt aber nicht.

    Und den DIV auch in die selbe Seite?

    für was btteschön?

    Wenn die Seite mit dem script refreshed,dann soll
    doch automatisch die ganze Seite ständig neu geladen werde.

    Also wenn meine Seite online ist,und ich ändere Daten in der Datenbank,und ein user sieht sich gerade einen Artikel an den ich in der Datenbank soeben geändert habe,dann müsste er doch sofort und ohne selber die Seite zu aktualisieren,den neuen Artikel sehen?

    Oder habe ich da etwas falsch verstanden?

    Mit freundlichen Gruß

    Alex

  16. sevket /

    Beim Funktioniert es nicht. Warum? Weis ich nicht 😀

    also ich habe folgenden code:

    $(document).ready(function() {
    $(„#refresh“).load(„refresh.php?uhrzeit=“);
    var refreshId = setInterval(function() {
    $(„#refresh“).load(„refresh.php?uhrzeit=“ + 1*new Date());
    }, 1000);
    });

    und die refresh.php

    $uhrzeit = date(„H:i:s“);
    echo $uhrzeit;

    Wenn ich die Hauptseite aufrufe wird nur die aktuelle Uhrzeit angezeigt. Sie läuft aber nicht weiter. Also es wird nicht refreshd…

    Bitte um Antwort…

    Gruß

    • Gast /

      Du musst das über dem script schreiben:

      sonst funtioniert das nicht.

      • Gast /
      • php-coder /

        Was mach ich falsch.

        Code:

        <script type="text/javascript">
             $(document).ready(function() {
               $("#refresh").load("refresh.php");
               var refreshId = setInterval(function() {
                  $("#refresh").load('refresh.php?' + 1*new Date());
               }, 1000);
            });
        </script>

        Und die Datei:

            <?php
            $uhrzeit = date("H:i:s");
            echo $uhrzeit;
         
            ?>
            <div id="refresh" style="text-align:center;"></div

        Bitte helf mir :(.
        Ich komme nicht weiter.

      • php-coder /

        Update: Ich meinte, es refreshd
        Nicht.

        Bitte helf mir.
        Code ist oben.

  17. Florian Wäsch /

    Super Code. Habe nur ein Problem. Aktuell klappt alles soweit einwandfrei. In einer DIV-Box zeigt er die aktuelle Uhrzeit und aktualisiert fleißig jede Sekunde. Wenn ich jetzt darunter gerne noch die Uhrzeit bei Aufrufen der Seite (Beginn) hätte, dann habe ich diese ganz am Anfang in eine Variable z.B. $A geschrieben. Diese wird auch beim ersten Aufruf angezeigt, nach dem ersten Refresh ist die Variable aber plötzlich leer?! Woran kann das liegen?

    • Florian Wäsch /

      Erledigt, war ja klar. Hab das jetzt mit Sessions gelöst und somit die Variablen „übergeben“.

  18. Meine letzte Rettung.
    Ist es mit diesem Code möglich eine komplette php datei erst nach ca. 5 sec einmalig auszuführen. Habe eine abfrage für neu Registrierte User geschrieben. Bekomme dann eine Push nachricht auf das iPhone allerdings wird mein code schneller ausgeführt ,als die Registrierung für den Datenbankeintrag braucht. Meine einzige chance sehe ich jetzt darin meinen datei später auszuführen.
    Hoffe konnte es ungefähr beschreiben

  19. Tommy /

    Frage:
    Wozu eigentlich + 1*new date?

  20. depaddy /

    mhh iwie will das nicht

    ich will en einfach test mit der ner zahl 7 wo sekundär +1 hochgezählt wird.

    $test = "7";
    echo "
    <script type='text/javascript'>

    $(document).ready(function() {
    $('#refresh').load(“$test);
    var refreshId = setInterval(function() {
    $('#refresh').load(‘$test + 1;
    }, 1000);

    ";

    wieso funktioniert das nicht :(

  21. BeKu /

    Was anderes, wäre es denn nicht möglich in der refresh.php auch ein kleinen JS-Code zu plazieren, welcher dann die Variable aus diesem Dokument prüft und wenn sie leer ist, sich dann selbst nach z.B. 3 Sekunden neu lädt?

    • Tobias Fonfara /

      Natürlich wäre das möglich, dann benötigt man aber den Aufruf der refresh.php gar nicht mehr. Diese können Sie dann direkt aufrufen.

  22. BeKu /

    Das Script funktioniert super!

    Da ich kein JavaScript Experte bin, hätte ich da aber folgende Frage.

    Wie kann man es machen dass das Script auf eine php-variable in refresh.php reagiert?
    Stelle mir folgendes vor…

    refresh.php ist ein PHP-Scritpt in dem eine externe Textdatei geladen wird, diese Textdatei hat aber nicht immer Inhalt. Nun dachte ich, das ich, wenn die Textdatei Inhalt hat eine Variable z.B. $js = „set“; setze, wenn nicht $js = „“;

    Und nun müsste man Ihren JS-Code so anpassen das er auf die Veränderung der $js reagiert, wenn diese leer soll die refresh.php alle 5 Sekunden neu geladen werden, ist sie nicht leer dann alle 40 Sekunden.

    Ist das machbar? falls ja, ich würde mich freuen wenn Sie mir helfen würden.

    • Tobias Fonfara /

      Wenn Sie statt der Zeile

      $("#refresh").load('refresh.php?' + 1*new Date());

      die Funktion aus diesem Beispiel verwenden, können Sie Variablen zurückgeben und dann auch auswerten. Alles was in der PHP Datei ausgegeben wird, z.B. mit echo, kann abgefangen werden, im Beispiel wird das dann in die Variable „nachladen“ geschrieben.

      • BeKu /

        Verstehe nicht ganz wie ich das machen könnte, wo gebe ich dann die Zeiten an nach wieviel Sekunden neugeladen wird usw.?

        Würde es ihnen ws ausmachen wenn Sie ein kleines Beispiel machen würden? würde mich freuen.

  23. Hallo, ist ein gutes Skript was sie da veröffentlicht haben, nur für meine Zwecke funktioniert es noch nicht ganz.
    Ich habe mit JQuery zwei Tabs die aktualisiert werden müssen, jedoch gibt es nur eine id für Content. Die beiden Tabs werden in tabs-container ausgegeben, mit Ihrem Code kann ich nur einen Link eingeben und somit haben beide Tabs den gleichen Inhalt, ich habe aber zwei PHP-Dateien und nur eine ID. Gibt es da eine andere Lösung? Meine JQ bzw. JS Kenntnisse sind noch sehr begrenzt so das ich auf Anhieb selbst keine Lösung gefunden habe.

    Hier mal ein Teil des HTML-Codes.

    <div id="page">
            <ul class="mytabs" id="tabs">
                <li class="current"><a href="http://localhost/xxx/text_tab.php">Text</a></li>
                <li><a href="http://localhost/xxx/video_tab.php">Videos</a></li>
            </ul>
            <div id="content_tabs">
            <div class="mytabs-container" id="tabs-container">
                Laden, bitte warten...
            </div>
        </div>
        </div>

    JS Code:

    var containerId = '#tabs-container';
    var tabsId = '#tabs';

    $(document).ready(function(){
        // Preload tab on page load
        if($(tabsId + ' LI.current A').length > 0){
            loadTab($(tabsId + ' LI.current A'));
        }

        $(tabsId + ' A').click(function(){
            if($(this).parent().hasClass('current')){ return false; }

            $(tabsId + ' LI.current').removeClass('current');
            $(this).parent().addClass('current');

            loadTab($(this));
            return false;
        });
    });


    function loadTab(tabObj){
        if(!tabObj || !tabObj.length){ return; }
        $(containerId).addClass('loading');
        $(containerId).fadeOut('fast');

        $(containerId).load(tabObj.attr('href'), function(){
            $(containerId).removeClass('loading');
            $(containerId).fadeIn('fast');
        });
    }
    • So ich habe jetzt mein Script geändert so das ich zwei Div-Elemente mit zwei Ids zur Verfügung habe, ich habe dann den erweiterten Code angewendet, jedoch lädt die Seite jetzt sofort immer wieder neu, ununterbrochen. An was kann das liegen?
      Ich denke mal der ruft irgendwas doppelt auf was dann eine Endlosschleife ergibt. Idee an was das liegen kann?

      $(document).ready(function() {
             $("#refresh").load("refresh.php");
             var refreshId = setInterval(function() {
                $("#refresh").load('refresh.php?' + 1*new Date());
             }, 1000);
             $("#refresh2").load("refresh2.php");
             var refreshId2 = setInterval(function() {
                $("#refresh2").load('refresh2.php?' + 1*new Date());
             }, 1000);
          });
      • Tobias Fonfara /

        Sie produzieren die Endlosschleife doch selbst, indem Sie alle 1000 Millisekunden die Seiten neu aufrufen. Wenn Sie stattdessen 10000 verwenden, werden die Seiten nur noch alle 10 Sekunden neu geladen.

      • Stimmt, mein Fehler, hatte vorhin zwar die Zeit vergrößert gehabt, aber hatte da noch einen anderen Fehler drin gehabt, somit habe ich das Zeitproblem übersehen. Besten dank :-)

  24. Salmen /

    Ich find cool

  25. Alien /

    Hallo,
    also, ich bekomm es nicht hin, eine Variable zu senden. Weiss jemand wo der Fehler liegt??
    so sieht das aus:
    $(document).ready(function() {
    $(„#refresh“).load(„abruf.php?x=$zeit1“);
    var refreshId = setInterval(function() {
    $(„#refresh“).load(‚abruf.php?x=$zeit1‘ + 1*new Date());
    }, 5000);});

    auf der abruf.php steht dann: echo $zeit1;

    und auf der Hauptseite (wo abgeholt wird)
    $rein1=$_GET[$zeit1];

    aber leider ist $_GET[$zeit1] immer leer.

    Kein Plan mehr.

    • Tobias Fonfara /

      Hallo,
      ich habe Ihnen bereits eine E-Mail geschrieben.

      $_GET[‚zeit1‘] ist deswegen leer, weil Sie es gar nicht übergeben. Die Variable, die Sie übergeben heißt „x“.

      Versuchen Sie doch mal den Aufruf $(„#refresh“).load(‚abruf.php?zeit1=‘ + 1*new Date());
      und geben Sie die Variable dann mit echo $_GET[‚zeit1‘] aus.

      Viele Grüße

      • Alien /

        Hallo nochmal,

        hab das jetzt so gemacht wie Sie beschrieben haben, aber leider geht das auch nicht.

        P.S. Die mail war hier erst später eingetroffen, sorry. Yahoo ist die letzten Tage oft nicht erreichbar.

        Viele Grüsse

  26. Geri /

    Hallo!

    Ich habe jetzt mal in eine test.html datei das eingetragen:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <script type="text/javascript">
          $(document).ready(function() {
            $("#refresh").load("refresh.php?x=");
            var refreshId = setInterval(function() {
               $("#refresh").load('refresh.php?x=' + 1*new Date());
            }, 1000);
         });
    </script>

    </head>

    <body>

    <div id="refresh" style="text-align:center;"></div>

    </body>
    </html>

    in der refresh.php steht:

    <?php
    echo $x;
    ?>

    Das funktioniert aber leider nicht…

    was mach ich falsch?

    mfg, Geri

    • Geri /

      hab den fehler gefunden…

      das script sollte auch includiert sein :)
      war doch zu schnell am testen…

      mfg,
      Geri

  27. Schön und es funktioniert nur verstehe ich eines nicht…

    Warum wird refresh.php 2 mal geladen bzw. ist es im Script angegeben? ist das nötig und wenn ja warum? ich würde das gerne wissen weil ich es verstehen möchte, danke.

    Dann noch eine Frage, wäre es eventuell möglich das Script als Link zu benutzen? weil ich suche sowas auch dafür wenn ich auf einen Link klicke der Inhalt eines Containers ausgetauscht wird. Irgendwie finde ich nix brauchbares und das hier ist ja wircklich micro klein und eigentlich leicht zu benutzen..dafür danke ich dem Macher hier recht herzlich.

    • Tobias Fonfara /

      Hallo!
      Der erste Aufruf lädt das Script sofort beim Laden der Seite, der zweite Aufruf ist die Schleife. Würde man den ersten Aufruf weglassen, so würde erst der Timer einmal durchlaufen, und dann würde das Script geladen werden.

      Wenn ich Sie richtig verstehe, möchten Sie einen Refresh-Link:

      $("#link").click(function() { $("#refresh").load("refresh.php"); });

      Erstellen Sie einen Link mit der ID „link“. Wird der Link angeklickt, so wird nun das Script geladen.

      Viele Grüße

      • Also wäre es rein technisch auch möglich, beim ersten Aufruf eine ganz andere Seite zu laden? die dann durch die refresh.php ersetzt wird und erst wieder erscheint wenn man im Browser auf aktualisieren klickt?

        Nein, das meint ich nicht, eher das ich sowas suche aber, das beim Klick halt in einem Container der Inhalt ausgetauscht wird. Also nur austauschen nicht refreshen, also Klick -> Seite wurde eingefügt, Klick Link daneben -> eine andere Seite wurde eingefügt und die zuvor entfernt.

      • Tobias Fonfara /

        Ja es ist möglich, einfach beim ersten Aufruf eine andere Seite einsetzen.
        Durch den Code, den ich vorher gepostet habe, wird genau das ausgelöst. Wenn man nun mehrere von dieses Funktionen einbaut (z.B. #link1, #link2) und jedem Link eine andere Seite in load-Bereich zuweist, dann erhält man den oben beschrieben Effekt :)

  28. DerAlien /

    Ja ich dann nochmal. Ist es möglich mit dem Script auch aus PHP Seite zum Beispiel die Strings $a, $B, $c abzuholen und dann an verschiedenen Stellen!!! der Seite einzubinden?? Ohne das Script 3mal verschieden aufzurufen?? Bin nicht so der Java Script Mensch, bin in PHP fitt. Hab einige Seiten, wo dieser Ablauf Sinn macht, und nicht immer der komplette DIV-Container.

    Thx

    • Tobias Fonfara /

      Nun also zuerstmal zum Ablauf: Beim Aufruf der Seite wird zuerst das komplette PHP Script ausgeführt (Serverseitig), dann wird die Seite an den Client (Browser) gesendet und dort wird dann das Javascript ausgeführt.
      Mir ist jetzt der Sinn der ganzen Operation nicht klar, warum geben Sie die Variablen nicht einfach mit echo $a etc. aus?
      Es ist allerdings möglich, dass Sie in Javascript Variablen definieren, denen Sie einen PHP Wert zuweisen:

      var a = <?php echo $a; ?>

      Nun können Sie mit der (Javascript-) Variablen weiterarbeiten.

      • DerAlien /

        Hallo und danke.
        Der Sinn: ich hole Php + xml Seiten bei Shoutcast ab, die ich aber auf einer PHP seite zusammenführe und auswerte. Darin befinden sich diverse Variablen die ich aber nur 1mal abholen möchten, aber die Ausgabe an verschiedenen Stellen der Seite habe. Da das Script ja die komplette Seite ausliest, müsste es doch möglich sein die mit echo ausgegebenen Daten zu separieren?
        Wie gesagt, bin nicht der Java Script Versteher.

        Und danke für diese galaktische schnellen Antworten.

      • Tobias Fonfara /

        Also ich vermute die einfachste Methode wäre, das PHP Script im Javascript-Aufruf mit einem Parameter zu versehen (refresh.php?var=a) und dann in PHP auf $_GET[‚a‘] etc. zu prüfen und bereits dort zu separieren.
        Alternativ (vermutlich das was Sie möchten) können Sie ein Array zurückgeben und dieses auswerten. Da im aktuellen Script allerdings keine Auswertung vorgenommen werden kann, müssten Sie das Script aus diesem Artikel verwenden und statt der Zeile 5 des aktuellen Scripts einsetzen. Dann können Sie die Javascript-Variable (heißt im Beispiel „nachladen“) prüfen und ggf. das Array zerlegen und in verschiedenen Containern ausgeben.

      • DerAlien /

        Yep danke. Verstanden hab ich das leider nicht. Dies Script hat nur 4 zeilen, da kann ich dann nicht Zeile 5 austauschen?? Oder wat mach ich da falsch? Wie gesagt, Java net mein Ding.

        Aber trotzdem vielen Dank!!!

      • Tobias Fonfara /

        Die Zeile

        $("#refresh").load('refresh.php?' + 1*new Date());

        austauschen mit dem Javascript-Code dieses Artikels (natürlich ohne

        <script type="text/javascript">

        und

        </script>

        ). Dann müssen nur noch Kleinigkeiten wie z.B. der Scriptaufruf und die Container-ID angepasst werden!

      • DerAlien /

        Hi,
        alles tutti.

        Werde es am Abend umbauen. Danke Danke.

        Tipp: Diese Variante hier auch auf die Seite stellen!

        Gruss aus Hamburg

      • DerAlien /

        Jo nochmal hier. Hab mal nen Test gebaut. Aber in den $_GET[‚paramerter1‘] kommt nix an. Sind immer leer.
        Gedankenfehler oder muss das Ajax Script doch anders sein??

        Wenn ich die Abholseite an sich selbst schicke, werden die Parameter mitgeschickt.

      • Tobias Fonfara /

        Ok, ich gehe jetz davon aus, dass Sie 3x das Script aufrufen, mit „refresh.php?var=a“, „refresh.php?var=b“ und „refresh.php?var=c“.
        Im PHP Script benötigen Sie also eine if-Struktur:

        if($_GET['var'] == 'a') { echo "A"; } elseif($_GET['var'] == 'b') { echo "B"; } elseif($_GET['var'] == 'c') { echo "C"; }

        Nun wird in den Containern der Buchstabe A, B oder C ausgegeben. Wenn Sie jetzt vor den echo-Befehl (den Sie in irgendeiner Form zwingend benötigen) Ihre Abfrage platzieren und dann das Ergebnis der Abfrage mit echo ausgeben, dann sollte Ihr Problem gelöst sein!

  29. DerAlien /

    Hi,
    da script funzt wunderbar.

    Aber wie wohl immer, noch eine Frage.
    Wie ist es möglich mit dem Scipt verschiedene Seiten abzufragen und dann in verschiedenen DIV-Containern darzustellen?

    Danke schon mal im Vorraus

    • Tobias Fonfara /

      Hallo,
      dazu müssten Sie das Script erweitern, etwa so:

      $(document).ready(function() {
             $("#refresh").load("refresh.php");
             var refreshId = setInterval(function() {
                $("#refresh").load('refresh.php?' + 1*new Date());
             }, 1000);
             $("#refresh2").load("refresh2.php");
             var refreshId2 = setInterval(function() {
                $("#refresh2").load('refresh2.php?' + 1*new Date());
             }, 1000);
          });

      Entsprechend müssen dann auch Container mit den IDs „refresh“ und „refresh2“ auf der Seite vorhanden sein.

      • DerAlien /

        Oh man, das ging schnell.

        Ja wunderbar. Wie Weihnachten. Danke

        DerAlien

      • Tobias Fonfara /

        Ich freue mich, dass ich Ihnen helfen konnte.
        Viele Grüße

  30. Danke, war mir nur etwas unklar da ich mit JavaScript bzw. Ajax noch nie was gemacht habe.

    Finde diese Sache super erklärt und ich als Anfänger habe das auch schnell umgesetzt.

    Würde mich über mehr derartiger Tipps/Tricks hier freuen z.B. würde mich mal interessieren, wie man mit so einem Script wie dieses, in Verbindung mit z.B. einem PHP-Script eine Textdatei auf aktualität prüft und einen Inhalt in einem Container nur aktualisiert wenn sich der Inhalt dieser Textdatei auch geändert hat.
    Also nicht nach Zeit sondern wenn sich eine Datei geändert hat. Eine Anleitung wie sowas funktionieren könnte wäre super.

    Danke.
    P.S. Tolle Seite!

    • Tobias Fonfara /

      Das könnte etwas schwierig werden, da ja der Inhalt der Datei mit irgendetwas verglichen werden müsste. Auf die Schnelle würde mir da bloß das Änderungsdatum einfallen, der Code in der refresh.php in etwa so:

      <?php
      // Gibt z.B. aus:  somefile.txt was last modified: 29. December 2002 22:16:23.

      $filename = 'somefile.txt';
      if (file_exists($filename)) {
          echo "$filename was last modified: " . date ("d. F Y H:i:s.", filemtime($filename));
      }
      ?>

      Solange die Datei nicht verändert wird, ändert sich auch die Ausgabe nicht. Erst wenn eine Änderung vorgenommen wird, und damit auch die Zeitstempel der letzten Änderung aktualisiert wird, ändert sich der Containerinhalt. Um eine andere Ausgabe zu erhalten als den Zeitstempel müsste man einfach auf die Dauer prüfen, als Schema:

      <?php if ((JETZT - ÄNDERUNGSDATUM) > SEKUNDEN) { echo "alte Datei"; } else { echo "neue Datei"; } ?>
      • Ja, es geht eigentlich nur mit dem Zeitstempel, das Problem aber ist, das JavaScript fügt trotzdem Inhalt in den Container ein egal ob neu oder alt, also eingefügt wird nach der anmgegebenen Zeit immer was weil das Script ja nicht weiß ob da jetzt was neues drin steht oder nicht.

        Vielmehr dachte ich an etwas wie…

        JavaScript startet, schaut in eine Kontroll-Datei „temp“ wo der letzte Zeitstempel steht, vergleicht diesen Zeitstempel mit dem der aktuellen Datei, sind die Stempel identisch macht das JavaScript nichts, es bricht also ab = fügt garnichts ein. Sind die Zeitstempel unterschiedlich dann startet die refresh Routine bzw. Funktion und tauscht den Inhalt in den Container aus und aktualisiert die Kontroll-Datei mit dem neuen Zeitstempel.
        Man müsste also ein Ajax-Script haben welches min. 2 Funktinen hat.
        Die erste Funktionen vergleicht die Zeitstempel, gibt es ein true wird die Refreshfunktion ausgeführt, gibt es ein false wird das Script einfach abgebrochen und der alte Inhalt bleibt unberührt.

        So würde es keine unnötigen Requests/Aktualisierungen geben und nur dann Inhalt aktualisiert wenn sich dieser geändert hat. Nur wie könnte man sowas machen?
        Geht das per Ajax überhaupt?

      • Tobias Fonfara /

        Ich habe Ihnen ein kleines Beispiel geschrieben. Ich hoffe, dass ich Ihre Frage richtig aufgefasst habe.
        → zum Artikel

    • Hallo,

      ich möchte ein Nachrichtensystem mit Ajax verwirklichen auf der Mainpage sollte ein Menülink sein wo steht Nachrichten (0) und daneben ein kleines brief icon, diese anzahl soll sich sofern neue eintreffen reloaden (1 Minuten intervall).

      Könnte ihr mir hier ansätze oder tipps oder „snippeds“ posten würdet mir sehr sehr helfen big thanks 😉

  31. Hallo

    Eine Frage dazu. Wird immer nur der Inhalt zwischen den .. aktualisiert oder auch das also Container auch? bzw. muss die Seite welche das Script nonstop einfügt auch den Container beinhalten? also 1:1 sein?

    Also:

    Die Seite refresh.php <— muss diese auch diesen div container beinhalten oder reicht nur der Inhalt?

    z.B.
    Das Script oben ist bei mir im <head … eingebunden, an einer Stelle in der index.php ist dann halt der Container definiert, nun möchte ich wissen ob dieser Container auch in der Seite die immer eingefügt wird auch diesen Container beinhalten muss?

    • Tobias Fonfara /

      Hallo!

      Es wird immer nur der Inhalt des div-Containers aktualisiert. Wäre das nicht so, gäbe es ja beim zweiten Aktualisierungsvorgang schon keinen Container mehr, der aktualisiert werden könnte.

      Die refresh.php muss keinen Container beinhalten, es genügt eine einfache Ausgabe. Selbstverständlich können Sie aber dort Container etc. verwenden.

  32. Delaya /

    Hey Tobias,
    also ich find deine Seite schonmal recht gut. Kurz und bündiig erklärt und dein Demo läuft auch Super bei mir. Auch im IE.

    Allerdings habe ich dein Script kopiert und hab es aufm localem Server sowie auf 2 verschiedene Server von verschiedenen Anbietern.

    Allerdings aktualisiert sich MEINE Seite nicht.
    Woran kann das liegen ?

    • Tobias Fonfara /

      So komplett ohne Code kann ich dazu leider nichts sagen, aber vielleicht haben Sie das jQuery-Framework noch nicht eingebunden?
      Download: jquery.com
      Code:

      <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
  33. Tobias Fonfara /

    Habe die Demo und den Artikel aktualisiert, das Script läuft jetzt auch im Internet Explorer.

    $("#refresh").load('refresh.php?' + 1*new Date());
  34. Jemand /

    Vielleicht haben Sie in Ihrem Browser Javascript deaktiviert?

    Neee ich bin Webmaster und wuerde sowas niemals tun.

  35. Jemand /

    ( Im IE )

  36. Jemand /

    Die Demo läuft nicht.

    • Tobias Fonfara /

      Die Demo funktioniert einwandfrei, wurde gerade überprüft. Vielleicht haben Sie in Ihrem Browser Javascript deaktiviert?

      • Jemand /

        In Firefox laueft sie aber im Internet explorer nicht.

Trackbacks/Pingbacks

  1. SQL Abfrage aktualisieren - php.de - […] noch schwer mit den ganzen Syntaxen, etc. Ich habe das schon mit Ajax versucht. Anleitung --> http://www.tfonfara.de/ajax-seitenin...n-jquery.xhtml Hat…

Einen Kommentar schreiben