kostenloser Webspace werbefrei: lima-city


Ajax / jquery reload mit Zähler oder Klick anhalten?

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    promohit

    promohit hat kostenlosen Webspace.

    Hallo
    ich habe ein kleines AJAX / jquery Konstrukt um alle x Sekunden
    eine PHP-Datei neu zu laden und deren Inhalt in einem DIV auszugeben

    das funktioniert soweit auch, aber ich habe 2 Fragen dazu

    1. wie kann ich da jetzt einen Zähler einbauen,
    damit nach z.B. 10 Aufrufen die Schleife abbricht (stoppt)

    2. wie kann ich die Schleife per Klick (auch schon vorher) stoppen?

    hier mein Code (als BSP)

    Datei index.php ... oder wie auch immer, die Seite für Browser-Aufruf
    <html>
    <head>
    <title>Seitentitel</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script> 
    <script type="text/javascript" src="reloader1.js"></script> 
    </script>
    </head>
    
    <body>
    <div id="refresh" style="text-align:left;"></div>
    </body>
    
    </html>




    Datei jquery-1.6.2.min.js ... die aktuelle jquery
    ... findest Du bei http://jquery.com zum Download



    Datei: reloader1.js .... JavaScript zum neu Laden alle x Sekunden (benötigt jquery)
    var datei2load = "test1.php";  // --- zu ladende PHP Datei
    var sek2load = 10;             // --- alle x Sekunden 
    
    /* ------------------------------------- */ 
    var milisec = (sek2load*1000); 
    
         $(document).ready(function() {
           $("#refresh").load(datei2load);
           var refreshId = setInterval(function() {
              $("#refresh").load(datei2load);
           }, milisec);
        });
    /* ------------------------------------- */



    Datei test1.php ... Dein PHP-Script das alle x Sekunden laufen soll
    <?php 
    $showdatum = date("d.m.Y. (H:i:s)" , time() ); 
    echo "<br />".$showdatum."\r\n"; 
    ?>



    EDIT:
    gibt es evtl eine bessere Methode, um eine php-Datei alle x Sekunden neu zu laden
    mit der Möglichkeit die Aktion zu stoppen, nach Ablauf max. Durchläufe und/oder per Klick
    ?

    Danke!

    Beitrag zuletzt geändert: 2.8.2011 1:48:36 von promohit
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. var i = 0,
        datei2load = 'test1.php',  // --- zu ladende PHP Datei
        sek2load = 10,            // --- alle x Sekunden
        milisec = (sek2load * 1000),
        refreshId;
    
    /* ------------------------------------- */ 
    $(document).ready(function () {
        function countUp() {
            if (i < 10) {
                i += 1;
                $("#refresh").load(datei2load);
            } else {
                clearInterval(refreshId);
            }
        }	
    	
        refreshId = setInterval(countUp, milisec);
    
        $('body').click(function () {
            clearInterval(refreshId);
        });
    });
    /* ------------------------------------- */


    Ungetestet, sollte aber funktionieren.

    Beitrag zuletzt geändert: 2.8.2011 2:12:30 von fabo
  4. Autor dieses Themas

    promohit

    promohit hat kostenlosen Webspace.

    Hallo

    Danke, der Zähler funktioniert.

    die Klick-Funktion habe ich noch etwas erweitert, für mehrere Durchläufe :)

    Jetzt kann man Stopp und Start im aktuellen Durchlauf klicken

    und Next für Beginn eines neuen Durchlaufs ( im BSP mit 10 Schritten alle 2 Sekunden)

    BSP: reloader1.js
    /* ------------------------------------- */ 
    
    var i = 0,
        a = 1,
        iende = 10,
        datei2load = 'inc-test1.php',  // --- zu ladende PHP Datei
        sek2load = 2,                 // --- alle x Sekunden
        milisec = (sek2load * 1000),
        refreshId;
    
    /* ---------------------- */ 
    
    $(document).ready(function () {
    
           $("#refresh").text(' ... gleich gehts Los ... ');
    	   
    /* ---------------------- */ 
        function countUp() {
            if (i < iende) {
                i += 1;
                $("#refresh").load(datei2load);
    			$("#refreshinfo").text('Lauf: '+ a +' Nr: '+ i +' Sekunden: ' + sek2load );
            } else {
                clearInterval(refreshId);
                $('#next').fadeIn(1500); 
            }
        }	
    /* ---------------------- */ 
    
        refreshId = setInterval(countUp, milisec);
    	
    /* ---------------------- */ 
    
    	$('#stopp').click(function () { 
    		clearInterval(refreshId);
    	});
    
    /* ---------------------- */ 
    
    	$('#start').click(function () { 
    		clearInterval(refreshId);
    		refreshId = setInterval(countUp, milisec);
    	});
    
    /* ---------------------- */ 
    
    	$('#next').click(function () { 
    		$('#next').fadeOut(1500); 
    		clearInterval(refreshId);
    		i = 0; 
    		a += 1; 
    		refreshId = setInterval(countUp, milisec);
    	});
    
    /* ---------------------- */ 
    
    });
    
    /* ------------------------------------- */



    HTML:
    <html>
    <head>
    <title>Seitentitel</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script> 
    <script type="text/javascript" src="reloader2.js"></script>
    
    <style type="text/css">
    <!--
    #next {display:none;}
    -->
    </style>
    
    </head>
    
    <body>
    <br />
    <div id="refresh" style="text-align:left;">&nbsp;</div>
    <br />
    <div id="refreshinfo" style="text-align:left;">&nbsp;</div>
    <br />
    <br />
    <div id="stopp" style="text-align:left;">Stopp</div>
    <br />
    <div id="start" style="text-align:left;">Start</div>
    <br />
    <br />
    <br />
    <div id="next" style="text-align:left;"><strong>Next</strong></div>
    <br />
    <br />
    </body>
    
    </html>


    Ziel ist es, mehrere <a> Durchläufe mit je <i> Schritten zu <x> Sekunden zu machen
    OK, die Anzahl der Durchläufe sollte man noch begrenzen ...

    EDIT:
    umd die Variablen i und a an die PHP-Datei zu übergeben,
    einfach in der countUp Funktion vor load einfügen:
    datei2load = datei2load+'?vara='+a+'&vari='+i+'';

    Dann stehen mit $_GET die Werte in der PHP zur Verfügung.
    :)




    Beitrag zuletzt geändert: 4.8.2011 16:09:42 von promohit
  5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!