Kalender in Ajax "geht nicht"


Fruitgum

Erfahrenes Mitglied
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.


:mad:


Grüße
 

Anhänge

  • Archiv.zip
    30,1 KB · Aufrufe: 12

SimonErich

Erfahrenes Mitglied
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

Erfahrenes Mitglied
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

Erfahrenes Mitglied
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
 
M

Maik

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
 

Neue Beiträge