Kalender in Ajax "geht nicht"

Fruitgum · 10. Januar 2009

Hallo,

ich habe hier ein Kalender in Ajax... Aus dem Buch Ajax der einfach nicht will. Bin den quelltext zichmal durch, aber eigentlich müsste er gehen.

Kalender.php

PHP:

<title>Kalender</title>
<link rel="stylesheet" href="kal.css" type="text/css" media="screen" />
<script type="text/javascript" src="../kalender/js/prototype.js"></script>
<script type="text/javascript" src="../kalender/js/scriptaculous.js"></script>
<script type="text/javascript">

Event.observe(window, 'load',

		function() {
		  var opt = { method: 'post', postBody: 'aktion=Start' };
		  new Ajax.Updater( {success:'kalender'}, 'kalenderrpc.php', opt);
		  }
);

function zeigeNeuerEintrag() {
	new Effect.Appear('formular');
	}
	
function versteckeNeuerEintrag() 
	new Effect.Fade('formular') 
	}
	
function speichereTermin(datum) {
	var startzeit = $F('startzeit');
	var endzeit = $F('endzeit');
	var titel = $F('titel');
	var notizen = $F('notizen');
	var opt = { method:'post', postBody:'aktion=Speichern&datum='+datum+'&startzeit='+startzeit+'&endzeit='+endzeit+'&titel='+titel+'&notizen='+notizen };
	new Ajax.Updater( {success:'kalender'}, 'kalenderrpc.php', opt);
	}
	
function updateKalender(jahr,monat,tag) {
	var opt = {method:'post', postBody:'aktion=Monatswechsel&jahr='+jahr+'&monat='+monat+'&tag='+tag };
	new Ajax.Updater( {success:'tagesauswahl'}, 'kalenderrpc.php', opt);
	
	}
	
function zeigeTag(datum) {
	var opt = {method:'post', postBody:'aktion=Anzeigen&datum='+datum };
	new Ajax.Updater( {success:'kalender'}, 'kalenderrpc.php', opt);
	}
	
function zeigeNotiz(id) {
	new Effect.Appear(id);
	}
	
function loescheTermin(id,datum) {
	var opt = {method:'post', postBody:'aktion=Loeschen&id='+id+'&datum='+datum };
	new Ajax.Updater( {success:'kalender'}, 'kalenderrpc.php', opt);
	}
	
function editiereTermin(id,datum) {
	var opt = {method:'post', postBody:'aktion=Editieren&id='+id+'&datum='+datum };
	new Ajax.Updater( {success:'id'}, 'kalenderrpc.php', opt);
	}
	
function updateTermin(id,datum) {
	var startzeit = $F(id + '_startzeit');
	var endzeit = $F(id + '_endzeit');
	var titel = $F(id + '_titel');
	var notizen = $F(id + '_notizen');
	var opt = { method:'post', postBody:'aktion=Update&id='+id+'&datum='+datum+'&startzeit='+startzeit+'&endzeit='+endzeit+'&titel='+titel+'&notizen='+notizen };
	new Ajax.Updater( {success:'kalender'}, 'kalenderrpc.php', opt);
	}
</script>
</head>
<body>
<div id="tagesauswahl">

<?php
include("cal.inc.php");
$Kalender = new Kalender();
$Kalender->zeigeKalender();
?>

</div>

<div id="kalender">

<div id="neuereintrag">
</div>

<div id="eintraege">
<h1>test</h1>

</div>

</div>

</body>
</html>

kalenderrpc.php

PHP:

<?php
mysql_error();

if ($_POST['aktion'] == 'Start') {

$datum = mktime(0,0,0, date("m"), date("d"), date("Y"));
$datum_heute = date("Y-m-d", $datum);

//Ausgabe
include("tag.inc.php");
$Ausgabe = new Tagesansicht();
$Ausgabe->Anzeigen($datum);

} elseif ($_POST['aktion'] == 'Speichern') {
 $datum = $_POST['datum'];
 $startzeit = $_POST['startzeit'];
 $endzeit = $_POST['endzeit'];
 $titel = $_POST['titel'];
 $notizen = $_POST['notizen'];
 
//Datenbankeingabe
include('config.php');
$query = "INSERT INTO terminkalender SET datum='$datum', startzeit='$startzeit', endzeit='$endzeit', titel='$titel', notizen='$notizen'";
mysql_query($query);

//Datum Timestamp umwandeln

$datum = explode("-", $datum);
$datum_neu = mktime(0,0,0, $datum[1], $datum[2], $datum[0]);

//Ausgabe des gewälten Textes

include('tag.inc.php');
$Ausgabe = new Tagesansicht();
$Ausgabe->Anzeigen($datum_neu);

} elseif ($_POST['aktion'] == 'Monatswechsel') {

$tag = $_POST('tag');
$monat = $_POST('monat');
$jahr = $_POST('jahr');

include('cal.inc.php');
$Kalender = new Kalender();
$Kalender->setzeDatum($tag,$monat,$jahr);
$kalender->zeigeKalender();
} elseif ($_POST['aktion'] == 'Anzeigen') {

$datum = $_POST['datum'];

//Datum in Unix-Timestamp umwandeln
$datum = explode("-",$datum);
$datum_neu = mktime(0,0,0, $datum[1], $datum[2], $datum[0]);

//Ausgabe
include("tag.inc.php");
$Ausgabe = new Tagesansicht();
$Ausgabe->Anzeigen($datum_neu);

} elseif ($_POST['aktion'] == 'Loeschen') {

$datum = $_POST['datum'];
$id = $_POST['id'];

//Datenbankeintrag entfernen
include("config.php");
$query = "DELETE FROM terminkalender WHERE id='$id' LIMIT 1";
mysql_query($query);

//datum in Timestamp
$datum = explode("-",$datum);
$datum_neu = mktime(0,0,0, $datum[1], $datum[2], $datum[0]);

//Ausgabe
include("tag.inc.php");
$Ausgabe = new Tagesansicht();
$Ausgabe->Anzeigen($datum_neu);

} elseif ($_POST['aktion'] == 'Editieren') {
$datum = $_POST['datum'];
$id = $_POST['id'];

//Datenbankabfrage
include("config.php");
$query = "SELECT starzeit, endzeit, titel, notizen FROM terminkalender WHERE id='$id'";
$result = mysql_query($query);
$line = mysql_fetch_array($result);
$startzeit = id . "_startzeit";
$endzeit = id . "_endzeit";
$titel = id . "_titel";
$notizen = id . "'_notizen";
 
echo <<<EOF
<table width="100%" cellpadding="0" cellspacing="0">
<tr><td>Beginn:&nbsp;</td><td><input type="text" id="$startzeit" value="$line[startzeit]" /> </td></tr>
<tr><td>Ende:&nbsp;</td><td><input type="text" id="$endzeit" value="$line[endzeit]" /> </td></tr>
<tr><td>Titel:&nbsp;</td><td><input type="text" id="$titel" value="$line[titel]" /> </td></tr>
<tr><td>Notizen:&nbsp;</tr><td><textarea style="height:100px" id="$notizen">$line[notizen]</textarea></td></tr>
<tr><td colspan="2" style="text-align:right"><input type="button" onclick="updateTermin('$id', '$datum')" value="Speichern"/>
<input type="button" onclick="versteckeNeuerEintrag()" value="Abbrechen"/></td></tr>
</tr>
</table>
EOF;




mysql_free_result($result);
mysql_close();


} elseif ($_POST['aktion'] == 'Update') {
 
 $datum = $_POST['datum'];
 $id = $_POST['id'];
 $startzeit = $_POST['startzeit'];
 $endzeit = $_POST['endzeit'];
 $titel = $_POST['titel'];
 $notizen = $_POST['notizen'];
 
include("config.php");
$query = "UPDATE terminkalender SET startzeit='$startzeit', endzeit='$endzeit', titel='$titel', notizen='$notizen' WHERE id='$id' LIMIT 1";
mysql_query($query);

//datum in Timestamp
$datum = explode("-",$datum);
$datum_neu = mktime(0,0,0, $datum[1], $datum[2], $datum[0]);

//Ausgabe
include("tag.inc.php");
$Ausgabe = new Tagesansicht();
$Ausgabe->Anzeigen($datum_neu);
}


?>

cal.inc.php

PHP:

<?php
mysql_error();
class Kalender
{
 
 var $m_date;
 
 function Kalender()
 
 {
 
 set_time_limit( 1 );
 $this->m_date = getdate();
 
 }
 
 function setzeDatum($tag,$monat,$jahr)
{
 
 if ($tag != "" && $monat != "" && $jahr != "")
 {
 $this->m_date["mday"] = $tag;
 $this->m_date["mon"] = $monat;
 $this->m_date["year"] = $jahr;
 }
 else
 return false;
 }
 
 function Monatswechsel ($neuer_monat)
 {
 $neues_datum = mktime (0,0,0, ($this->m_date["mon"] + $neuer_monat), $this->m_date["mday"], $this->m_date["year"] );
 return $neues_datum;
 }
 
 function zeigeKalender ()
 {
 if ($this->m_date =="")
 return false;
 else
 $datum = $this->m_date;
 
 $monatsname = array();
 $monatsname[1] = "Januar";
 $monatsname[2] = "Februar";
 $monatsname[3] = "M&Auml;rz";
 $monatsname[4] = "April";
 $monatsname[5] = "Mai";
 $monatsname[6] = "Juni";
 $monatsname[7] = "Juli";
 $monatsname[8] = "August";
 $monatsname[9] = "September";
 $monatsname[10] = "Oktober";
 $monatsname[11] = "November";
 $monatsname[12] = "Dezember";
 
 $wochen_beginn = 2;
 echo("<table align=\"center\" border=\"0\" cellspacing=\"4\" cellpadding=\"0\">\n");
 echo("<tr><td colspan=\"7\">");
 
 echo("<table cellspacing=\"0\" cellpadding=\"0\" width=\"100%\"><tr>");
 
 $neuer_monat = $this->Monatswechsel (-1);
 echo( "<td style=\"text-align:left\"><a href=\"#\" onclick=\"updateKalender('" . date("Y", $neuer_monat) . "','" . date("n", $neuer_monat) . "','1')\">&laquo;</a></td>");
 
 echo("<td style=\"text-align:center\">" . $monatsname[$datum["mon"]] . "&nbsp;" . $datum["year"] . "</td>");
 
 //nächster monat
 
 $neuer_monat = $this->Monatswechsel(+1);
 echo("<td stle=\"text-align:right\"><a href=\"#\" oneclick=\"updateKalender('" . date("Y", $neuer_monat) . "','" . date("n", $neuer_monat) . "','1')\">&raquo;</a></td>");
 
 echo("</td></tr></table></td>\n");
 
 $maximaletage = date("t", mktime(0,0,0, $datum["mon"], 1, $datum["year"] )) + 1;
 
 for($suchTag = 1; $suchTag <= $maximaletage; $suchTag++ )
 {
 $tagnummer = date("w", mktime(0,0,0, $datum["mon"], $suchTag, $datum["year"] )) + 1;
 
 if ($suchTag == 1)
 {
 echo("<tr style=\"text-align:center\"><td>Mo</td><td>Di</td><td>Mi</td><td>Do</td><td>Fr</td><td>Sa</td><td>So</td></tr>\n");
 	echo("<tr>\n");
	for ($Tag = $wochen_beginn; $tagnummer != $Tag; $Tag++)
	{
		echo( "<td>&nbsp;</td>\n" );
	if ( $tagnummer == 1 && $Tag == 7 )
	{
		echo ( $this->zeigeZelle($suchTag ) );
		break;
		}
		if ($Tag > 15 )
		break;
		}
		if ($tagnummer == $Tag)
		    echo( $this->zeigeZelle($suchTag));
			
			
			}
		else if ($tagnummer == $wochen_beginn)
		{
				echo "</tr><tr>\n";
			echo( $this->zeigeZelle($suchTag));
			}
			else
			echo( $this->zeigeZelle($suchTag));
			}

$suchTag = $suchTag  - 6;
$tagnummer = date("w", mktime(0,0,0, $datum["mon"], $suchTag, $datum["year"]));
while ( $tagnummer != $wochen_beginn)
{
echo("<td>&nbsp;</td>\n");
$suchTag++;
$tagnummer = date("w", mktime(0,0,0, $datum["mon"], $suchTag, $datum["year"]));
}

echo("</table>\n");
return true;
}

function zeigeZelle($tag)
{
$currdate = date("Y-m-d", mktime(0,0,0, date("m", $this->Monatswechsel(0) ), $tag, date("Y", $this->Monatswechsel(0) )));
$wochentag = date("w", mktime(0,0,0, date("m", $this->Monatswechsel(0)), $tag, date("Y", $this->Monatswechsel(0) )));

if ( date("Y-m-d") == $currdate ) //Heute
$style = "datum_heute";

else if( $this->pruefeTermine($currdate))
$style = "datum_termin";

else if( $wochentag == 6 || $wochentag == 0 ) //Wochenende
$style = "datum_wochenende";
else
$style = "datum_normal";

$wert = "<td style=\"text-align:right\" class=\"".$style."\"><a href=\"#\" onclick=\"zeigeTag('".$currdate."')\">&nbsp;".$tag."&nbsp;</a></td>\n";
return $wert;
}

function pruefeTermine($datum)
{
include("config.php");
$query = "SELECT count(id) FROM terminkalender WHERE datum='$datum'";
$result = mysql_query($query);
$line = mysql_fetch_array($result);
echo mysql_error();

if ($line[0] > 0)

return true; //termin an diesem Tag vorhanden

else

return false; // keine Termine vorhanden

mysql_free_result($result);
mysql_close();

return false;
	}
}

?>

tag.inc.php

PHP:

<?php
mysql_error();

class Tagesansicht
{
function Tagesansich()
{
return 1;
}
function Anzeigen($datum)
{

$datum_gewaehlt = date("Y-m-d".$datum);




//Tag, Monat, Jahr einzeln
$tag = date("d", $datum);
$monat = date("m", $datum);
$jahr = date("Y", $datum);
//Datenbankabfrage
include ("config.php");
$query = "SELECT id, starzeit, endzeit, titel, notizen FROM terminkalender WHERE datum='$datum_gewaehlt' ORDER BY startzeit ASC";
$result = mysql_query($query);

echo <<<EOF
<h1>Tageskalender</h1>
<div id="neuereintrag"
<a href="#" conclick="zeigeNeuerEintrag()">Neuer Eintrag &raquo;</a><br/><br/>
<div id="formular" style="display:none">
<table width="100%" cellpadding="0" cellspacing="0">
<tr><td>Beginn:&nbsp;</td><td><input type="text" id="startzeit" value="" /> </td></tr>
<tr><td>Ende:&nbsp;</td><td><input type="text" id="endzeit" value="" /> </td></tr>
<tr><td>Titel:&nbsp;</td><td><input type="text" id="titel" value="" /> </td></tr>
<tr><td>Notizen:&nbsp;</tr><td><textarea id="notizen"></textarea></td></tr>
<tr><td colspan="2" style="text-align:right"><input type="button" onclick="speichereTermin('$datum_heute')" value="Speichern"/>&nsub;
<input type="button" onclick="versteckeNeuerEintrag()" value="Abbrechen"/></td></tr>
</table>
</div>
</div>

<div id="eintraege">
<h3> Termine  f&uuml;r den $tag.$monat.$jahr</h3>
<table border="0" cellpadding="0" cellspacing="2" width="100%">
<tr>
  <td><strong>Beginn</strong></td>
  <td><strong>Ende</strong></td>
  <td><strong>Terminbeschreibung</strong></td>
</tr>
EOF;

while ($line = mysql_fetch_array($result)) {

$notizen = str_replace("\n", "<br/>", $line[notizen]);

$termine .= <<<EOF
<tr>
   <td>$line[startzeit]</td>
   <td>$line[endzeit]</td>
<td>
<a href="#" oneclick="zeigeNotiz('$line[id]')">$line[titel]</a>
<div id="$line[id]" style="display:none">
$notizen<br><br>
<input type="button" value="Editieren"
onclick="editiereTermin('$line[id]','$datum_gewaehlt')" />&nbsp;
<input type="button" value="L&Ouml;schen"
onclick="loescheTermin('$line[id]','$datum_gewaehlt')" />
</div>
</td>
</tr>
EOF;

}

if (! $termine) {
$termine = <<<EOF
<tr><td colspan="3"> Es gibt keine Termine f&uuml;r den heutigen Tag!</td></tr>
EOF;
}

// Termine ausgeben

echo $termine;

echo <<<EOF
</table>
</div>

EOF;

mysql_free_result($result);
mysql_close();
}
}
?>

kal.css

HTML:

html {
padding:0;
margin:0;
}

body {
background:#e1ddd9;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#564b47;
padding:0px 20px;
margin:0;
}

#tagesauswahl {
float:left;
width:250px;
background:#fbfbfb;
border:1px dotted #000;
overflow: auto;
text-align:center;
}

#kalender {
float:left;
background:#fff;
padding:10px;
margin:0 0 250px 0;
overflow:auto;
width:600px;
}

table {
font-size:12px;
}

td {
vertical-align:top;
}

a,a:link {
color:#000;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

.datum_normal {
color:#000;
}

.datum_wochenende {
background:#888;
}

.datum_wochenende a {
color:#fff;
}

.datum_heute a {
font-weight: bold;
color:#888;
}

.datum_termin a {
font-weight: bold;
}

config.php

PHP:

$host   = "eure_datenbank.de";   // Datenbank-Host           
$name   = "xxx";           // Benutzername           
$pass   = "lxxx";          // Zugehoeriges Passwort
$db   = "xxxx";          // Datenbank


mysql_connect($host, $name, $pass) or die (mysql_error());
mysql_select_db($db) or die (mysql_error());

und datenbank.sql

Code:

CREATE TABLE `terminkalender` (
`id`INT NOT NULL AUTO_INCREMENT ,
`datum` TEXT NOT NULL ,
`startzeit` TEXT NOT NULL ,
`endzeit` TEXT NOT NULL ,
`titel` TEXT NOT NULL ,
`notizen` TEXT NOT NULL ,
UNIQUE (
`id`
)
) ENGINE = MYISAM ;

im Anhang findet ihr noch die 2 javascripts die ihr braucht.
sollte der Anhang nicht gehen sind sie hier mit drine http://www.prototypejs.org/assets/2008/1/25/prototype-1.6.0.2.js

Vielleicht geht das ja bei Einem oder ihr findet den Fehler.

Grüße

SimonErich · 10. Januar 2009

Hallo @Fruitgum

Ich habe mir den ganzen Quellcode nicht durchgelesen.
Was heißt er geht nicht ?
Fehlermeldung bzw. Erklärung was passiert.
Und eine Seite, mit dem ganzen Kalender drauf wär eine gute Sache, dann kann man es eventuell im Browser evaluieren.

Grüße Simon

Fruitgum · 10. Januar 2009

Es kommt ja keine Fehlermeldung!

Der Kalender wird angezeigt, aber das Formular für die Eingabe und die Ausgabe bleiben weg. Auch kann ich keinen Monat weiterschalten, geht einfach nicht. Ich denke das es am JS liegt... Aber ich kenne mich damit noch nicht sehr gut aus.

hier mal einen Link zum Kalender.

http://www.baabe-ostseestern.de/kalender/kalender.php

Grüße

Fruitgum · 11. Januar 2009

Javascript fehler

Hallo,

ich habe hier ein Javascript, was mit prototype.js und scriptaculous.js läuft.

Script:

Code:

Event.observe(window, 'load',

		function() {
		  var opt = { method: 'post', postBody: 'aktion=Start' };
		  new Ajax.Updater( {success:'kalender'}, 'kalenderrpc.php', opt);
		  }
);

function zeigeNeuerEintrag() {
	new Effect.Appear('formular');
	}
	
function versteckeNeuerEintrag() 
	new Effect.Fade('formular'); 
	}
	
function speichereTermin(datum) {
	var startzeit = $F('startzeit');
	var endzeit = $F('endzeit');
	var titel = $F('titel');
	var notizen = $F('notizen');
	var opt = { method:'post', postBody:'aktion=Speichern&datum='+datum+'&startzeit='+startzeit+'&endzeit='+endzeit+'&titel='+titel+'&notizen='+notizen };
	new Ajax.Updater( {success:'kalender'}, 'kalenderrpc.php', opt);
	}
	
function updateKalender(jahr,monat,tag) {
	var opt = {method:'post', postBody:'aktion=Monatswechsel&jahr='+jahr+'&monat='+monat+'&tag='+tag };
	new Ajax.Updater( {success:'tagesauswahl'}, 'kalenderrpc.php', opt);
	
	}
	
function zeigeTag(datum) {
	var opt = {method:'post', postBody:'aktion=Anzeigen&datum='+datum };
	new Ajax.Updater( {success:'kalender'}, 'kalenderrpc.php', opt);
	}
	
function zeigeNotiz(id) {
	new Effect.Appear(id);
	}
	
function loescheTermin(id,datum) {
	var opt = {method:'post', postBody:'aktion=Loeschen&id='+id+'&datum='+datum };
	new Ajax.Updater( {success:'kalender'}, 'kalenderrpc.php', opt);
	}
	
function editiereTermin(id,datum) {
	var opt = {method:'post', postBody:'aktion=Editieren&id='+id+'&datum='+datum };
	new Ajax.Updater( {success:'id'}, 'kalenderrpc.php', opt);
	}
	
function updateTermin(id,datum) {
	var startzeit = $F(id + '_startzeit');
	var endzeit = $F(id + '_endzeit');
	var titel = $F(id + '_titel');
	var notizen = $F(id + '_notizen');
	var opt = { method:'post', postBody:'aktion=Update&id='+id+'&datum='+datum+'&startzeit='+startzeit+'&endzeit='+endzeit+'&titel='+titel+'&notizen='+notizen };
	new Ajax.Updater( {success:'kalender'}, 'kalenderrpc.php', opt);
	}

Aber nichts geht! daraufhin habe ich alert("Sie befinden sich auf dem Host " + window.location.host); in jedes JS eingefügt. Bei scriptaculous.js und prototype.js gibt mir der Browser den Host zurück nur wenn ich es in dem oberen Javascript eingebe und starte, meldet der Browser mir nichts zurück.

Ist in der Syntax ein Fehler den ich nicht sehe? Gibt es ein Tool was die Syntax testen kann?

Liebe Grüße

Maik · 11. Januar 2009

Hi,

ich war mal so frei, deine Frage mit deinem gestern eröffneten Thema "Kalender in Ajax "geht nicht"" zusammenzuführen, da es sich hierbei offensichtlich in den Grundzügen um denselben Script-Code handelt, und möchte dich darum bitten, zukünftig solche Doppelposts im Forum zu vermeiden, zumal sie laut Netiquette (Nr.12) nicht erwünscht sind. Vielen Dank!

mfg Maik

Kalender in Ajax "geht nicht"

Fruitgum

Erfahrenes Mitglied

Anhänge

SimonErich

Erfahrenes Mitglied

Fruitgum

Erfahrenes Mitglied

Fruitgum

Erfahrenes Mitglied

Maik

Neue Beiträge