Hallo zusammen,
da ich momentan am lernen von Ajax, jQuery und JS allgemein bin, habe ich mir heute ein mini-script geschrieben, dass per knopf 1 eine .php datei laden soll und per knopf 2 die ausgabe wieder löschen sollen.
Funktioniert an sich auch gut. Allerdings habe ich 2 Fragen, die wie ich denke irgendwie zusammenhängen:
1. Wenn ich auf "lösch mich" drücke, nachdem ich zuvor auf "lade mich" geklickt habe, verschwindet die Ausgabe, soweit so gut. Drücke ich allerdings zuvor 2x Mal auf "lade mich", verschwindet die Ausgabe nur ganz kurz und läd dann wieder, sprich iwie werden die Intervalle nicht resetet. Es sieht wohl so aus, dass wenn ich zwei mal drücke, dass mehrere Intervalle erzeugt werden, das kann ich zumindest in der Netzwerkanalayse im Browser sehen. Wieso? Die Variable müsste doch eig. jedesmal überschrieben werden.
2. Eine an sich kleine Frage, wieso kann ich über die Konsole nicht die Variablen wie "interval" abfragen, aber im Script mit console.log schon?
Hier der Code:
ajaxtest.js
test.php
Danke für eure Hilfe!
André
da ich momentan am lernen von Ajax, jQuery und JS allgemein bin, habe ich mir heute ein mini-script geschrieben, dass per knopf 1 eine .php datei laden soll und per knopf 2 die ausgabe wieder löschen sollen.
Funktioniert an sich auch gut. Allerdings habe ich 2 Fragen, die wie ich denke irgendwie zusammenhängen:
1. Wenn ich auf "lösch mich" drücke, nachdem ich zuvor auf "lade mich" geklickt habe, verschwindet die Ausgabe, soweit so gut. Drücke ich allerdings zuvor 2x Mal auf "lade mich", verschwindet die Ausgabe nur ganz kurz und läd dann wieder, sprich iwie werden die Intervalle nicht resetet. Es sieht wohl so aus, dass wenn ich zwei mal drücke, dass mehrere Intervalle erzeugt werden, das kann ich zumindest in der Netzwerkanalayse im Browser sehen. Wieso? Die Variable müsste doch eig. jedesmal überschrieben werden.
2. Eine an sich kleine Frage, wieso kann ich über die Konsole nicht die Variablen wie "interval" abfragen, aber im Script mit console.log schon?
Hier der Code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="ajaxtest.js"></script>
</head>
<body>
<h1>Meine erste Ajax.load abfrage</h1>
<input id="ajaxbtn" type="button" value="lade mich">
<input id="ajaxdel" type="button" value="lösch mich"> <p>
<div id="testdiv" style="font-size:20px;width:400px;height:200px;border:3px solid red;padding-left:5px;"></div>
</body>
</html>ajaxtest.js
HTML:
$(document).ready(function(){
var interval;
$("#ajaxbtn").click(function(){
$("#testdiv").load( "test.php");
interval = setInterval(function() {
$("#testdiv").load( "test.php");}, 1000);
console.log(interval);
});
$("#ajaxdel").click(function(){
$("#testdiv").empty();
clearInterval(interval);
});
});test.php
PHP:
<?php
$time = date("H:i:s");
$i = 20;
$y = "Das ist ein String";
$str = "Dies ist eine Variablen Ausgabe!";
$str .= "<br>";
$str .= "Variable i = ";
$str .= $i;
$str .= "<br>";
$str .= "Variable y = ";
$str .= $y;
$str .= "<br>";
$str .= "Uhrzeit: ";
$str .= $time;
echo $str;
?>Danke für eure Hilfe!
André
