# in einer form aktion ausführen, ohne Seite zu aktualisieren



## dooofi (3. Oktober 2011)

Hallo Forum, 

ich habe ein Formular, um einen Datenbankeintrag zu erstellen.
Hier werden zuerst Daten eingegeben, und dann bei klick auf einen Button ein weiteres template geladen, in dem die Konfiguration des Datensatzes erfolgen soll.


```
<?php
if(!defined('pkFRONTEND') || pkFRONTEND!='public')
	die('Direct access to this location is not permitted.');
if(!getrights('designer'))
	{ pkEvent('access_refused'); return;}

pkLoadLang('status');	
print_r($_POST);


if(isset($_GET['action']) and $_GET['action']=="new")
{
	$display=" style=\"display:inline;\"";
	$diskonf=" style=\"display:none;\"";
	$getSystem=$SQL->query("SELECT 
		NAME
		FROM tsystem
		GROUP BY NAME
	");
	if (mysql_num_rows($getSystem)>=1)
	{ 
		$nSys = "<select name=\"nSystem[]\" size=\"" . mysql_num_rows($getSystem) . "\" multiple=\"multiple\">";
		while ($row = mysql_fetch_array($getSystem)) 
		{
			$nSys .= "<option value=\"" . $row['NAME'] . "\">" . $row['NAME'] . "</option>";
		}
		$nSys .= "</select>";
	}
	
	eval("\$site_body = \"".pkTpl("einheit_neu")."\";");
}
```

Hier ist der Code für das Template "einheit_neu.htm"

```
<link rel="stylesheet" type="text/css" href="css/status.css">


<table border="0" cellpadding="0" cellspacing="0"  width="100%" >
	<tr>
		<td class="heads" align="left">Neue Einheit anlegen...</td>
		<td class="heads" align="right" nowrap="nowrap"><a href="javascript:history.back()"><img src="images/button/back.gif" border="0" title="zur&uuml;ck" align="absmiddle"></a></td>
	</tr>
</table>
<br>
<table border="0" cellpadding="0" cellspacing="2"  width="70%" align="center">
<tr>
<td width="100%">
<form name="einheitneu" method="post" action="?path=einheit_neu">
<table class="status" width="100%" align="left" cellpadding="5" cellspacing="0" border="1">
<tr>
<td class="status">Einheit-Name:<br><span class="statsmall">(Bsp: FGS Bayern)</span></td><td class="statush"><input type="text" name="nName" size="50" value="$nName"></td>
</tr>
<tr>
<td class="status">Typ-Klasse:</td><td class="statush"><input type="text" name="nKlasse" size="50" value="$nKlasse"></td>
</tr>
<tr>
<td class="status">Standort:</td><td class="statush"><input type="text" name="nStandort" size="50" value="$nStandort"></td>
</tr>
<tr>
<td class="status">Systeme:<br><span class="statsmall">(mehrere Syteme mit STRG + Mausklick ausw&auml;hlen)</span></td><td class="statush">$nSys</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" name="save" value=" speichern " $display>
<input type="hidden" name="action" value="senden" />
<input type="reset" value=" abbrechen " $display>
</td>
</tr>
</table>
</form>&nbsp;
<div align="center" $diskonf><br><b>Konfiguration festlegen:<br></div>
$einh_konf
</td>
</tr>
</table>
```







Beim Klicken auf Speichern soll nun für jedes ausgewählte element in dem Select eine neue Tabelle erstellt werden...


```
elseif (isset($_POST['action']) AND $_POST['action']=="senden")
{
	if (isset($_POST['nName']) AND isset($_POST['nKlasse']) AND isset($_POST['nStandort']) AND isset($_POST['nSystem']) AND 
		($_POST['nName']!="") AND ($_POST['nKlasse']!="") AND ($_POST['nStandort']!="") AND (count($_POST['nSystem'])>=1))
	{ 
		
		$getEinheit=$SQL->query("SELECT
		EINHEIT
		FROM teinheiten
		GROUP BY EINHEIT
		");
		$num_rows=mysql_num_rows($getEinheit);
		$vI=0;
		while($vErg=mysql_fetch_array($getEinheit))
		{
			$arrEinheit[$vI]=strtolower($vErg['EINHEIT']);
			$vI++;
		} 

		$getSystem=$SQL->query("SELECT 
			NAME
			FROM tsystem
			GROUP BY NAME
		");
		$nName = $_POST['nName'];
		if (in_array(strtolower($nName), $arrEinheit))
		{	
			$message = "Die Einheit ist schon vorhanden!";
			eval("\$site_body = \"".pkTpl("error_template")."\";");
		}
		else
		{
			$nKlasse = $_POST['nKlasse'];
			$nStandort = $_POST['nStandort'];
			if (mysql_num_rows($getSystem)>=1)
			{ 
				$nSys = "<select name=\"nSystem[]\" size=\"" . mysql_num_rows($getSystem) . "\" multiple=\"multiple\">";
				while ($row = mysql_fetch_array($getSystem)) 
				{
					if (in_array($row['NAME'],$_POST['nSystem'])) { $nSys .= "<option value=\"" . $row['NAME'] . "\" selected=\"selected\">" . $row['NAME'] . "</option>"; }
					else { $nSys .= "<option value=\"" . $row['NAME'] . " \">" . $row['NAME'] . "</option>"; }
				}
				$nSys .= "</select>";
			}
			
			for($i=0; $i<count($_POST['nSystem']); $i++)
			{
				$cSys = $_POST['nSystem'][$i];
				
				$getVersion=$SQL->query("SELECT 
					VERSION
					FROM tsystem
					WHERE NAME = '" . $_POST['nSystem'][$i] . "'
				");	
				if (mysql_num_rows($getVersion)>=1)
				{	 
					$nVer = "<select name=\"cVersion\" size=\"1\">";
					while ($row = mysql_fetch_array($getVersion)) 
					{
						$nVer .= "<option value=\"" . $row['VERSION'] . "\">" . $row['VERSION'] . "</option>";
					}
					$nSys .= "</select>";
				}
				
				$nStat = "<select name=\"cStatus\" size=\"1\">";
				$nStat .= "<option value=\"0\">" . pkGetLang('0') . "</option>";
				$nStat .= "<option value=\"1\">" . pkGetLang('1') . "</option>";
				$nStat .= "<option value=\"2\">" . pkGetLang('2') . "</option>";
				$nStat .= "<option value=\"3\">" . pkGetLang('3') . "</option>";
				$nStat .= "<option value=\"4\">" . pkGetLang('4') . "</option>";
				$nStat .= "</select>";
				eval("\$einh_konf .= \"".pkTpl("einheit_konf")."\";");
			}
			if ($display=" style=\"display:inline;\"") { $display = " style=\"display:none;\""; }
			if ($diskonf= " style=\"display:none;\"") { $diskonf =" style=\"display:inline;\""; }		
			
			eval("\$site_body = \"".pkTpl("einheit_neu")."\";");
		}
	}
	else
	{
		$message = "Es m&uuml;ssen alle Felder ausgef&uuml;llt werden!";
		eval("\$site_body= \"".pkTpl("error_template")."\";");		
	}
}
```

hier der code für das Template einheit_konf.htm


```
<table class="status" width="100%" align="left" cellpadding="5" cellspacing="0" border="1">
<tr>
<form action="?path=einheit_neu" method="post">
<td class="status" width="80">System:</td><td class="statush"><input type="text" name="cSys" size="20" value="$cSys" readonly="readonly"></td>
<td class="status" width="20">Version:</td><td class="statush" width="100">$nVer</td>
<td class="status" width="20">Status:</td><td class="statush" width="10">$nStat</td>
<td class="status" width="20" align="center">
<input type="submit" value="OK" name="action">
<input type="hidden" name="kEinheit" value=$nName>
<input type="hidden" name="kKlasse" value=$nKlasse>
<input type="hidden" name="kStandort" value=$nStandort>
<input type="hidden" name="kSystem" value=$cSys>


</td>
</form>
</tr>
</table>
<p height="10px">&nbsp;</p>
```






Das klappt auch wunderbar.... 

Jetzt aber mein Problem: in der konfiguration werden ja nun für jedes System OK-Schaltflächen angezeigt. Bei Klick auf eine möchte ich gerne die Einstellungen aus dem Formular in eine DB schreiben, OHNE dass dabei die Seite aktualisiert wird. Es soll sich nur der button in 'erledigt' oder sowas ändern, da ich ja mehrere Systeme haben kann, die ich einzeln in die Datenbank schreiben möchte.

Kompliziert und unübersichtlich, aber ich hoffe, es kann mir jemand einen Tip geben...

lg Micha


----------



## Thomasio (3. Oktober 2011)

Interaktive Änderungen vom Seiteninhalt, ohne neu laden der Seite geht NUR mit JavaScript.
Dummerweise wird JavaScript aber von vielen Browsern jeweils anders behandelt, sprich du müsstest eine Browser-Weiche einbauen und jedes Mal wenn von irgendeinem Browser eine neue Version rauskommt, müsstest du überprüfen, ob noch alles funktioniert.
Darüber hinaus haben viele User JavaScript aus Sicherheitsgründen völlig deaktiviert und in dem Fall ist Essig mit interaktiv.

Dann willst du auch noch Daten an ein PHP Script senden, ohne die Seite neu zu laden, sprich du willst interaktiv die Seite auf den Klick reagieren lassen, aber die Antwort vom PHP Script unterdrücken, da beisst sich doch die Katze in den Schwanz.

Webserver und Internetverbindungen sind heutzutage so schnell, dass neu laden einer Seite fast nicht auffällt, darum heisst meine Lösung zu diesem Problem:
Dem Script nicht nur die Daten mitgeben die es braucht um die DB zu aktualisieren, sondern ALLE Daten der Seite, das Script die Daten aktualisieren lassen, ALLES wieder zurück an den Browser schicken und die Seite neu laden.


----------



## dooofi (3. Oktober 2011)

Hallo Thomasio

danke für den Tipp. Die Befürchtung mit Javascript hatte ich auch schon, ich werd mich mal dran versuchen, deinen Vorschlag umzusetzen... 

lg


----------



## saftmeister (3. Oktober 2011)

Es gibt dutzende Ajax-Frameworks wie jQuery, prototype.js und weiß-der-Geier wie die alle heißen. Damit brauchst du dich um so Nebenkriegsschauplätze wie verschiedene Browser schon mal nicht mehr zu kümmern.


----------



## Thomasio (3. Oktober 2011)

Ähem, wofür steht die Erweiterung .js? JavaScript vielleicht?

Ausserdem (berichtige mich wenn ich falsch liege), mal abgesehen davon, dass man sie fertig bekommt, sprich nicht mehr selber coden muss, sind die durch die Bank serverseitig, sprich alles was Ajax, jQuery und weiss der Geier wie sonst noch heisst entspricht auf jeden Fall "Seite neu laden", auch wenns im Browser nicht so aussieht, weil man in Java den EraseBackground austricksen und über das bestehende Bild drüber zeichnen kann, aaaaaaaaber, dazu muss der User Java in der richtigen Version installiert haben und die bringen neue Versionen noch schneller raus als alle Browser zusammen.


----------



## javaDeveloper2011 (3. Oktober 2011)

Hallo,



> Ähem, wofür steht die Erweiterung .js? JavaScript vielleicht?


JA!

1. *Java* ist eine *Programmiersprache*! *JavaScript* ist eine *Client-Seitige Script-Sprache*!
=> JavaScript muss nur nicht im Browser deaktiviert sein
aber auch bei echtem Java kann man eigentlich JRE 5 vorraussetzen!

2. jQuery ist als JavaScript-Framework auch Client-Seitig und oft zum schnellen Design von Cross-Browser UI geeignet. Bei AJAX wird halt der Inhalt neu geladen (XML oder JSON) aber nicht die ganze Seite! (und was hätte das auch sonst für einen Sinn!)

Gruß javaDeveloper2011


----------



## Thomasio (4. Oktober 2011)

Ok, da oute ich mich jetzt mal als Ignorant, aber ich denke, ich bin damit nicht alleine.

Ich habe auf meinem PC nicht nur ALLES was irgendwie nach Script riecht deaktiviert, ich habe auch keinerlei Browser-Plugin installiert, kein Java, kein Flash, absolut NICHTS, im Gegenteil, ich habe von Popup-Blocker und Werbeblocker über Spybot bis Webwasher so ziemlich alles installiert was den Inhalt von Webseiten auf die tatsächliche Information reduziert.

Alle diese Erweiterungen sind Risikofaktoren, was man schon daran sieht, wie oft z.B. Java "kritische Sicherheitsupdates" rausbringt.
Dass es im Browser die Option gibt JavaScript zu deaktivieren kommt nicht von ungefähr, wenn das alles unbedenklich wäre, gäbe es die Option vermutlich gar nicht.

Man kann darüber diskutieren, wie gefährlich das Ganze effektiv ist, man kann dazu verschiedene Meinungen haben, aber es gibt eine Tatsache, die die ganze Argumentation ad absurum führt.
Es gibt jeden beliebigen Inhalt im Web 1000fach, wenn also eine Seite von mir verlangt, dass ich JavaScript aktivieren und/oder Java installieren muss um die Seite sehen zu können, dann werde ich den Teufel tun, ich werde NICHTS installieren oder aktivieren, ich SCHLIESSE die Seite und suche ich mir eine andere Seite, wo ich den selben Inhalt ohne Sicherheitsrisiko bekomme.

In kurz: JavaScript, Java, Ajax und was weiss ich sonst noch alles existiert, ist für mich der perfekte Weg seine User zu verlieren und zu nichts weiter zu gebrauchen, weil man niemals sicher sein kann, ob der User es überhaupt sehen kann oder will.


----------



## saftmeister (4. Oktober 2011)

Nicht ohne Grund gibt es den HTML-Tag "noscript". Es liegt im Ermessen des Webentwicklers, ob er den Weg ohne dynamische Aktualisierungen über JS+DOM gehen will oder nicht. Insofern bist du nicht ignorant sondern nur konsequent. In so einem Falle wäre der Webentwickler ignorant.

Das befreit dich aber nicht davon, dir Wissen anzueigenen, was den Bereich angeht, vor allem wenn du bei der Diskussion mitwirken willst ;-)


----------



## Thomasio (4. Oktober 2011)

Das hast du schön gesagt 
Ich habe dafür sogar schon eine persönliche Lösung, die heisst VirtualPC.
Ein ansonsten leeres System, mit einem Dutzend Browsern installiert, ganz ohne Einschränkungen, mit kompletter Installation von dem ganzen Unsinn, wo ich gefahrlos herumprobieren kann.
Man muss sich nur angewöhnen nach jedem Test die virtuelle Platte zu löschen und eine neue Kopie des sauberen Backups zu verwenden.


----------



## saftmeister (4. Oktober 2011)

Was ich aber eigentlich damit zum Ausdruck bringen wollte: Eine installierte Java-Runtime von Java SE (JRE) wirkt sich in keinster Weise auf die Möglichkeiten vom Webbrowser aus, JavaScript auszuführen, auch nicht das Fehlen jener welchen.

IE kann JS ohne (auch mit) JRE, FF kanns, Opera, und wie sie noch alle heißen mögen. Java (die Runtime) hat rein überhaupt nichts mit dem JavaScript des Browsers am Hut. Das einzige was du mit der Installation einer JRE erreichst, ist, das dein Browser sog. Java-Applets ausführen kann, bspw. den IRC-Chat von (Achtung: Werbung ;-)) bassdrive.com oder diversen anderen kleinen nützlichen und unnützen Dingen die die Welt (nicht) braucht.

Zurück zu On-Topic: Hier ging/geht es um Ajax (Asynchronous JavaSCRIPT And XML), und insbesondere um den sog. XMLHttpRequest, der bei diversen Browser-Herstellern unterschiedlich implementiert ist. Sog. Ajax-Frameworks wie o.g. ermöglichen den Betrieb ohne Browser-Weichen, da die Frameworks bereits eine Weiche implementieren.

Mit Hilfe von diesem ominösen XMLHttpRequest kannst du ein PHP-Script (oder jede andere Webserver-App) asynchron aufrufen und mit Hilfe der DOM-Manipulationsmöglichkeiten von JS einzelne Elemente (Forms, Divs, $whatever) ausblenden, austauschen, $insert_your_action_here ohne die komplette Seite neu zu laden. Und genau das war, wenn ich mich recht entsinne der Ursprungswunsch des OP.


----------



## javaDeveloper2011 (4. Oktober 2011)

Hallo nochmal,

zu JavaScript: als Web-Entwickler hat man es schon schwehr genug, IE-Anpassungen und auch ansonsten der ganze langweilige Cross-Browser-Kram. Wenn man also ein schönes Webdesign will - schaffe zumindest ich es nicht immer ohne jQuery & co. Dann soll auch noch alles mit Standart-Technologien passieren, die keiner extra installieren muss. Und am Ende klappt bei manchen dann aus irgend einem grund immer noch nicht. Ich persönlich erlebe bei meinen progammen ständig nerfige / absurde Sicherheitswahnengen.
Klar, wer vielleicht schonmal große Probleme mit Malware hatte wird anders reden, aber ich komme ohne JavaScript nicht aus!
Ich lass den noscript-Teil aber auch weiterhin weg!

Außerdem:
was ist dann mit Software die du runterlädst, sonstige Dateien die du von anderen geschickt bekommst, ect.
Ganz zu schweigen von anderen Risiken, wie Speicherung, Verkauf, Klau, Missbrauch, .. deiner Datein durch / bei facebook und co.? (da mach ich wegen solcher Bedenken z.B. nicht mit!)

Ist Überzeugungsversuch, einfach nur meine Meinung,
javaDeveloper2011


----------

