kostenloser Webspace werbefrei: lima-city


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

lima-city: kostenloser WebspaceForumProgrammiersprachenPHP, MySQL & .htaccess

  1. Autor dieses Themas

    dunkeltuten

    Kostenloser Webspace von dunkeltuten

    Benutzer, kostenlos WebspaceBenutzer, kostenlos WebspaceBenutzer, kostenlos Webspace Knecht

    1012 Gulden

    7 positive Bewertungen
    0

    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. hellotext

    Benutzer, kostenlos Webspace Ketzer

    44 Gulden

    0 positive Bewertungen
    0

    hellotext hat kostenlosen Webspace.

    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

    Benutzer, kostenlos WebspaceBenutzer, kostenlos WebspaceBenutzer, kostenlos Webspace Knecht

    1012 Gulden

    7 positive Bewertungen
    0

    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. hellotext

    Benutzer, kostenlos Webspace Ketzer

    44 Gulden

    0 positive Bewertungen
    0

    hellotext hat kostenlosen Webspace.

    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

    Benutzer, kostenlos WebspaceBenutzer, kostenlos WebspaceBenutzer, kostenlos Webspace Knecht

    1012 Gulden

    7 positive Bewertungen
    0

    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!