kostenloser Webspace werbefrei: lima-city


nach Ajax load('timer.php'); startet Javascript nicht

lima-cityForumProgrammiersprachenPHP, MySQL & .htaccess

  1. Autor dieses Themas

    dunkeltuten

    Kostenloser Webspace von dunkeltuten

    dunkeltuten hat kostenlosen Webspace.

    Hallo,
    wenn ich auf die Schaltfläche von index.php klicke,dann wird zwar timer.php gestartet.
    In timer.php wir ein <span> ausgegeben und dann über Javascript einen Timer gewechselt.
    Problem: Der <span> wird nach dem load('timer.php'); zwar aktualisiert angezeigt, aber Javascript startet im Anschluß nicht!

    Wenn ich nur timer.php aufrufe, dann startet alles korrekt -> also auch Javascript!

    index.php
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<script src="http://code.jquery.com/jquery-latest.js"></script>
    	</head>
    	<body>
    		<div id="testid">
    			<?php include("timer.php"); ?>
    		</div>
    		<hr>
    		<button id='buttonid1'>Klick mich an!</button>
    		<div>Es wurde bisher <span id='spanid1'>0</span> Mal auf die Schaltfläche [Klick mich an!] geklickt.</div>
    		<script>
    			$( '#buttonid1' ).click(function() 	{
    														$('#testid').load('timer.php');
    														update( $( '#spanid1' ) );
    												});
    			function update( j ) 					{
    														var n = parseInt( j.text(), 10 );
    														j.text( n + 1 );
    													}
    		</script>
    	</body>
    </html>


    timer.php
    <?php
    	/*
    	http://andrewu.co.uk/clj/countdown/pro/
    	Es muss ein <span> zusammengebaut werden, der wie folgt aussieht:
    	<span id='countdown1'>2018-02-05 11:01:08 GMT+1</span>
    	*/
    	$u = time();
    	$spaeter = mktime (date("H",$u) , date("i",$u)+0, date("s",$u)+60, date("m",$u)+0, date("d",$u), date("Y",$u));	
    	$t = "<span id='countdown1'>";
    	$t .= strftime("%Y-%m-%d %H:%M:%S",$spaeter);
    	$gmt = date("Z") / (60*60);		// date("Z") gibt immer die Server-Zeitzone aus! in Deutschland also GMT+1 (Sommerzeit: GMT+2) 
    	$t .= " GMT+$gmt</span>";
    	echo $t;		// Hier erfolgt die Ausgabe der Restzeit!
    	echo "<script type='text/javascript' src='countdownpro_expanded.js' defer='defer'></script>";	//Hier wird der <span> ausgelesen und dann in einen TIMER verwandelt
    ?>


    Was mache ich falsch?

    Gruss Dunkeltuten
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. Hallo

    stellt sich die Frage, wie es in der JavaScript Datei countdownpro_expanded.js aussieht ?!
    ob diese (mit jQuery?) die id="countdown1" richtig ausliest ... oder andere Fehler ?

    ohne diese JavaScript Datei kann man Dir da leider nicht helfen,
    gib uns doch mal einen Link zu ner Test-Seite, wo wir auch an den Quellcode der JS Datei kommen

    eine Idee wäre, weil der Inhalt des <span> dynamisch von jQuery geändert wird
    musst Du anstatt das
    $( '#buttonid1' ).click(function() 	{... }

    es mit "on" machen

    $( "#buttonid1" ).on( "click", function() {
      /*  ...  */
    });


    siehe dazu: http://api.jquery.com/on/

    jQuery get value from dynamic content .... mit .on()
    ... früher(bis jQuery v.1.7) war das .live()

    ... was willst Du eigentlich auslesen,
    ... die #spanid1 (=Zähler) ... oder die #testid (=Datum + Zeit)

    Beispiel für einen Test (in der index.php)

    $( '#buttonid1' ).on( "click", function() {
     alert( "\n Zaehler: " + $('#spanid1').text() + "\n Datum: " + $('#testid').text() + "\n" );
    });



    Du hast im Code <span id='testid'> aber im Script <span id='countdown1'>

    ... gib mal Link zu Test-Seite, damit wir die JS-Datei ansehen können


    Beitrag zuletzt geändert: 5.2.2015 15:53:06 von hellotext
  4. Autor dieses Themas

    dunkeltuten

    Kostenloser Webspace von dunkeltuten

    dunkeltuten hat kostenlosen Webspace.

    Ich bin mitten beim Editieren meiner Antwort an helotext aus dem Forums geflogen. :wall:
    Dadurch ist ein Reply ohne Antwort entstanden, sorry!

    Der Link auf die Javascript Datei steht bereits in der Kommentarzeile der timer.php !
  5. ok

    ... LOL
    wer liest schon Kommentare .. :xD

    ... LOL
    so ein aufgeblasenes Script für einen simplen CountDown
    auch ohne jQuery lässt sich das Vorhaben sicher deutlich einfacher umsetzen.

    in Deinem Code (index.php) fehllen Settings in Meta-Tags <meta scheme="countdown1" ...
    und auch ein TAG (egal ob div oder p) mit id="countdown1" fehlt ... oO

    wo soll das Script auch was rein schreiben wenn die id nicht vorhanden ist ?!


    einfaches CountDown Script Beispiel ohne jQuery ... mit setTimeout();

    <html>
    <head>
    <title>Test CountDown</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    
    function countdown(time,id){
    	
    	t = time;
    	d = Math.floor(t/(60*60*24)) % 24; 
    	h = Math.floor(t/(60*60)) % 24;
    	m = Math.floor(t/60) %60;
    	s = t %60;
    	
    	dstr = (d>1) ? 'Tage':'Tag'; 
    
    	d = (d > 0) ? d+" "+dstr+", ":""; 
    	h = (h < 10) ? "0"+h + ":" : h + ":"; 
    	m = (m < 10) ? "0"+m + ":" : m + ":"; 
    	s = (s < 10) ? "0"+s + "": s + "";
    
    	strZeit = d + h + m + s;
    	
    	if(time > 0) { window.setTimeout('countdown('+ --time+',\''+id+'\')',1000); }
    	else { strZeit = "Fertig"; }
    	
    	document.getElementById(id).innerHTML = strZeit;
    }
    
    
    function countdown2(d,h,m,s,id,cd_style) {
    	countdown(d*60*60*24+h*60*60+m*60+s,id);
    }
    
    </script>
    
    </head>
    <body bgcolor="#FFFFFF" text="#000000">
    
    <br>
    
    <p>Beispiel 1 ----- <span id="cd1"> <script type="text/javascript"> countdown(100000, 'cd1'); </script> </span> </p> 
    <p>Beispiel 2 ----- <span id="cd2"> <script type="text/javascript"> countdown(7525, 'cd2'); </script> </span> </p> 
    <p>Beispiel 3 ----- <strong id="cd3"> <script type="text/javascript"> countdown(60, 'cd3'); </script> </strong> </p> 
    <p>Beispiel 4 ----- <span id="cd4">  <script type="text/javascript"> countdown2(5,3,20,1, 'cd4'); </script> </span> </p> 
    
    <br>
    <br>
    
    </body>
    </html>



    und auch mit jQuery gehts ... mit setInterval(function(){ ... }); ..
    hier ohne formatierte Zeit, nur als Zahl

    <html>
    <head>
    <title>Test CountDown</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    
    $(function(){
    var timer = setInterval(function(){
    $("#count_num").html(function(i,html){
       
    if(parseInt(html)>0) {
       return parseInt(html)-1;
       }
       else {
       clearTimeout(timer);
           return ".... fertig .... ";
       }
     });
    
    },1000);
     
    });
    
    </script>
    
    </head>
    <body bgcolor="#FFFFFF" text="#000000">
    
    <br>
    <span id="count_num">5</span>
    <br>
    <br>
    
    </body>
    </html>




    Beitrag zuletzt geändert: 5.2.2015 23:55:56 von hellotext
  6. Autor dieses Themas

    dunkeltuten

    Kostenloser Webspace von dunkeltuten

    dunkeltuten hat kostenlosen Webspace.

    Hallo Hellotext!

    Vorweg: Danke für Deine Antworten! :thumb:

    Ja, OK wer liest schon Kommentarzeilen? Auch ich lasse die häufig links liegen :smokin:

    In der index.php kann kein META fehlen: Beim ersten Aufruf ohne $('#testid').load('timer.php'); klappt alles einwandfrei!

    In der timer.php wird ein <span> zusammengebaut. Das <span> hat die id='countdown1'.
    Beispiel: <span id='countdown1'>2018-02-05 11:01:08 GMT+1</span>
    Solch ein <span> wird dann durch den Start des Javascripts
    <script type='text/javascript' src='countdownpro_expanded.js' defer='defer'></script>
    in einen echten Timer verwandelt.
    Dieser Timer zeigt die verbleibende Zeit in Sekunden an, allerdings getrennt nach Tagen/Stunden/Minuten uns Sekunden.

    Wie gesagt beim ersten Aufruf klappt alles einwandfrei.

    Bleibt der Verdacht, daß es tatsächlich einen Bug in der <script src="http://code.jquery.com/jquery-latest.js"></script> gibt! Wie von Dir schon vorgeschlagen werden ich das Script mal temporär gegen ein deutlich simpleres Script austauschen und testen :wave:

    Oder, hast Du noch weitere Ideen?

    Gruss Dunkeltuten
  7. 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!