bodo92
Aktives Mitglied
Guten Tag zusammen,
ich habe ein paar Startschwierigkeiten mit Ajax:
Zum Lernen habe ich mir zum einen zwei Buttons erstellt mit denen ich mir Datum und Uhrzeit anzeigen lasse:
-----------------------------------------------------------------------------------------------------------------------------------------------------------
Zum zweiten wollte ich eine Website mit nachladendem Content erstellen:
Danke vorab.
ich habe ein paar Startschwierigkeiten mit Ajax:
Zum Lernen habe ich mir zum einen zwei Buttons erstellt mit denen ich mir Datum und Uhrzeit anzeigen lasse:
Es funktioniert auch wie gewollt, jedoch beim zweiten drücken des Buttons lädt die Seite den schon zuvor geladenen Inhalt. ( Hat das mit meinem Browser zu tun oder hab ich einen Fehler gemacht! )
• http://87.106.6.247/entwicklung/ajax/
index.php
load.php
• http://87.106.6.247/entwicklung/ajax/
index.php
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Entwicklungsumgebung für jQuery - Ajax</title>
<style type="text/css">
.datum_zeit {
border-widht: 1px;
border-style: solid;
border-color: red;
background-color: yellow;
display: none;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
function loadFrame(id, value) {
$.get('./load.php?value='+value, function(data) {
$('#'+id).fadeIn('slow');
$('#'+id).html(data);
})
}
</script>
</head>
<body>
<table>
<tr>
<td>
<button onclick="loadFrame('frame1', 'datum')">Datum</button>
</td>
<td>
<div class="datum_zeit" id="frame1"></div>
</td>
</tr>
<tr>
<td>
<button onclick="loadFrame('frame2', 'zeit')">Uhrzeit</button>
</td>
<td>
<div class="datum_zeit" id="frame2"></div>
</td>
</tr>
</table>
</body>
</html>
load.php
PHP:
<?php
$value = $_GET['value'];
switch ($value) {
case "datum":
$date = date("d.m.Y");
echo $date;
break;
case "zeit":
$time = date("H:i:s");
echo $time;
break;
default:
echo "FEHLER";
}
?>
-----------------------------------------------------------------------------------------------------------------------------------------------------------
Zum zweiten wollte ich eine Website mit nachladendem Content erstellen:
Gleiche Problem wie oben ( ändere ich in der Textdatei die mittels anfrage Übertragen wird zeigt sich die Änderung auf der Website nicht. )
Ich habe auch das "JQuery Address Plugin" eingebunden jedoch ohne Erfolg!
• http://87.106.6.247/eckardts/v1.1/
index.html
Im dem Ordner liegen dann die jeweiligen *.txt Dateien zum Inhalt laden.
Ich hoffe Ihr versteht mein Problem.Ich habe auch das "JQuery Address Plugin" eingebunden jedoch ohne Erfolg!
• http://87.106.6.247/eckardts/v1.1/
index.html
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Willkommen</title>
<style type="text/css">
html, body {
background-color: #333;
}
#container {
width: 900px;
margin: 0 auto 0 auto;
padding: 10px;
background-color: #FFF;
border: 1px solid #000;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#navi {
border-bottom: 2px solid #333;
}
#content {
margin-top: 10px;
font-family: sans-serif;
font-size: 16px;
}
#navi ul {
list-style: none;
text-align: center;
}
#navi ul li {
display: inline;
padding-right: 15px;
}
#navi ul li a {
font-family: sans-serif;
font-size: 24px;
color: #000;
text-decoration: none;
}
#navi ul li a:hover {
border-bottom: 3px solid #000;
}
</style>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript" src="jquery.address-1.5.min.js"></script>
<script type="text/javascript">
var object = null;
var Objectdata = false;
function loadContent(page) {
$.get(page+'.txt', function(data) {
if (data) {
Objectdata = data;
$('#content').fadeOut(function() {
$('#content').html(Objectdata).fadeIn();
});
$('title').html(object);
} else {
$('#content').fadeOut(function() {
$('#content').html("Es wurde keine Seite gefunden!").fadeIn();
});
$('title').html("Error 404");
}
});
}
$(document).ready(function(e) {
$('.naviLink').click(function(e) {
object = e.currentTarget.innerHTML;
Objectdata = false;
loadContent(object);
e.preventDefault();
});
$.address.externalChange(function(e) {
if (e.value.replace(/^\//, '')) {
object = e.value.replace(/^\//, '');
loadContent(object);
}
});
});
</script>
</head>
<body onLoad="loadContent('Home')">
<div id="container">
<div id="navi">
<ul>
<li><a class="naviLink" href="#" rel="address:/Home">Home</a></li>
<li><a class="naviLink" href="#" rel="address:/Info">Info</a></li>
<li><a class="naviLink" href="#" rel="address:/Kontakt">Kontakt</a></li>
</ul>
</div>
<div id="content"></div>
</div>
</body>
</html>
Im dem Ordner liegen dann die jeweiligen *.txt Dateien zum Inhalt laden.
Danke vorab.