63130
29.09.2008, aktualisiert am 09.10.2008
7094
30
0
Inputfeld im Popup mit einer live Synchonisation
Ich benötige ein Inputfeld in einem Popup (JavaScriptmäßig), das auf einem Link öffnet und nach "ok" drücken soll sich der Inhalt der eigentlichen Seite leicht verändern.
Aaaaalso: Hier ein Screenshot des aktuellen Standes:
http://img221.imageshack.us/img221/9460/untersuchungto5.jpg
Rot markiert ist der Link, auf den der Nutzer klicken soll. Da soll sich dann eine Inputbox in einem Popup (Wie mans ja von JavaScript kennt) öffnen. Hat der Nutzer dort seine Eingabe gemacht und OK Klickt, soll die änderung direkt statt dem alten "(Keine Beschreibung vorhanden)" erscheinen und der "Hinzufügen" Button soll zum Bearbeitenbutton werden. Der hat auch wieder eine inputbox, aber diesmal soll die den bereits eingegebenen Wert direkt wieder enthalten. Ganz unten soll dann noch ein "bestätigen" button unten hin, da kommt man auf die Seite, die alles in die Datenbank einträgt. Hat jemand eine Idee wie man sowas machen kann?
Hier noch den Quelltext des Seite:
Aaaaalso: Hier ein Screenshot des aktuellen Standes:
http://img221.imageshack.us/img221/9460/untersuchungto5.jpg
Rot markiert ist der Link, auf den der Nutzer klicken soll. Da soll sich dann eine Inputbox in einem Popup (Wie mans ja von JavaScript kennt) öffnen. Hat der Nutzer dort seine Eingabe gemacht und OK Klickt, soll die änderung direkt statt dem alten "(Keine Beschreibung vorhanden)" erscheinen und der "Hinzufügen" Button soll zum Bearbeitenbutton werden. Der hat auch wieder eine inputbox, aber diesmal soll die den bereits eingegebenen Wert direkt wieder enthalten. Ganz unten soll dann noch ein "bestätigen" button unten hin, da kommt man auf die Seite, die alles in die Datenbank einträgt. Hat jemand eine Idee wie man sowas machen kann?
Hier noch den Quelltext des Seite:
<?php
include ("include/db_connect.php");
Echo "<style type=\"text/css\">
body {
background-color: #fff;
margin: 40px;
font-family: Lucida Grande, Verdana, Sans-serif;
font-size: 14px;
color: #4F5155;
}
a {
color: #003399;
background-color: transparent;
font-weight: normal;
}
h1 {
color: #444;
background-color: transparent;
border-bottom: 1px solid #D0D0D0;
font-size: 16px;
font-weight: bold;
margin: 24px 0 2px 0;
padding: 5px 0 6px 0;
}
code {
font-family: courier, Monaco, Verdana, Sans-serif;
font-size: 10px;
background-color: #f9f9f9;
border: 1px solid #D0D0D0;
color: #002166;
display: block;
margin: 14px 0 14px 0;
padding: 12px 10px 12px 10px;
}
h4 {
font-family: Lucida Grande, Verdana, Sans-serif;
font-size: 10px;
color: #4F5155;
}
h2 {
background-color: #fff;
font-size: 14px;
font-family: Lucida Grande, Verdana, Sans-serif;
text-align: right;
}
</style>";
Echo "<h1>Regelerfassung</h1>";
$time = getdate();
$stamp = time();
$zeit = $time[mday].".".$time[mon].".".$time[year];
$ziffer = $_POST[ziffer1];
Echo "<br><br>Für die Regel wurde als Erstellungsdatum der <b>".$zeit."</b> erfasst.<br><br><br><br>";
$abfr = "SELECT titel
FROM vc_goae
WHERE goae = $ziffer";
$besch = mysql_fetch_array(mysql_query($abfr));
$beschreibung = $besch[titel];
if (!empty($beschreibung)){
$leistung = "(<i>".$beschreibung."</i>) ";}
Echo "Die eingegebene Regel besagt, dass Ziffer ".$ziffer." ".$leistung."nicht neben folgenden Ziffern berechnet werden darf:<br><br><br>";
$zaehler = 1;
$x = 0;
Echo "<table border=\"0\" width=\"70%\">";
do {
$z = "ziffer".$zaehler;
if (!empty($_POST[$z])) {
$abfrage = "SELECT id, goae, titel
FROM vc_goae
WHERE goae = $_POST[$z]";
$eab = mysql_fetch_array(mysql_query($abfrage));
$b = $eab[titel];
if ($erf = 1){$add = "<a href=\"leistung_neu.php?ziffer=".$_POST[$z]."\" Target=\"_blank\">Hinzufügen</a>";}
if (empty($b)){$b = "<i>(Keine Beschreibung vorhanden)</i> ".$add."";}
Echo "<tr>
<td>$_POST[$z]<br><br></td>
<td>$b<br><br></td>
</tr>";
$zaehler = $zaehler + 1;
} else {$x = 1;}
} while ($x != 1);
Echo "</table>"
?>
Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 98056
Url: https://administrator.de/forum/inputfeld-im-popup-mit-einer-live-synchonisation-98056.html
Ausgedruckt am: 23.12.2024 um 09:12 Uhr
30 Kommentare
Neuester Kommentar
Wieso trennt hier keiner PHP-Code und Template-Code (HTML). Das ist doch viel zu umständlich, so zu programmieren. Kann ich nur hier das empfehlen:
http://www.smarty.net/
Ok, zu deiner Frage nun: in deinem Link musst du den Aufruf einer Funktion im JavaScript machen, die dann ein neues Fenster erstellt. Dort lädst du dein Formular-Template rein, wo die Eingaben gemacht werden.
Danach würde ich mit AJAX arbeiten, denn dann kannst du die erstellten Daten, ohne Seite neu zu laden, direkt abspeichern und nur die eine Zeile neu laden, wo die neue Daten eben hingehören, oder zumindest einen Block. Das Pop-Up-Fenster wird einfach nach dem Speichern geschlossen und das Hauptfenster, genau gesagt der Inhalt wird neu geladen.
Das wäre der Ablauf. Ich frage dich jetzt ein Mal, ob du AJAX und JavaScript bereits kannst, oder ob du dort auch hilfe brauchst.
Und ich empfehle jedem hier Templates von dem PHP-Code zu trennen, dann spart man sich diese echo mit dem HTML mitten im PHP-Code. Und noch ein Vorteil: Ihr könnt beliebig viele Layouts machen, verändern, erstellen, ohne dabei jedes Mal PHP-Code zu ändern und umgekehrt, PHP-Code ändern, ohne dabei alle Templates auch noch zu ändern.
http://www.smarty.net/
Ok, zu deiner Frage nun: in deinem Link musst du den Aufruf einer Funktion im JavaScript machen, die dann ein neues Fenster erstellt. Dort lädst du dein Formular-Template rein, wo die Eingaben gemacht werden.
Danach würde ich mit AJAX arbeiten, denn dann kannst du die erstellten Daten, ohne Seite neu zu laden, direkt abspeichern und nur die eine Zeile neu laden, wo die neue Daten eben hingehören, oder zumindest einen Block. Das Pop-Up-Fenster wird einfach nach dem Speichern geschlossen und das Hauptfenster, genau gesagt der Inhalt wird neu geladen.
Das wäre der Ablauf. Ich frage dich jetzt ein Mal, ob du AJAX und JavaScript bereits kannst, oder ob du dort auch hilfe brauchst.
Und ich empfehle jedem hier Templates von dem PHP-Code zu trennen, dann spart man sich diese echo mit dem HTML mitten im PHP-Code. Und noch ein Vorteil: Ihr könnt beliebig viele Layouts machen, verändern, erstellen, ohne dabei jedes Mal PHP-Code zu ändern und umgekehrt, PHP-Code ändern, ohne dabei alle Templates auch noch zu ändern.
Ok, dann baue mal schon alles mit JavaScript ein (Fenster öffenen, Fenster schliessen, Fenster durchladen). Um Daten abzuspeichern, brauchst du noch eine PHP-Datei z. B. save_data.php, die du am besten in ein Verzeichnis rein tust, wo kein Zugriff von aussen möglich wäre (also mit .htassecc schützen). Diese Datei macht nichts anders, als die Daten updaten oder z. B. einfügen.
Außerdem brauchst du noch prototype.js -Framework. Die AJAX -Funktion in diesem Fall ist recht einfach und ich schreibe sie dir, wenn du den Rest fertig hast.
Außerdem brauchst du noch prototype.js -Framework. Die AJAX -Funktion in diesem Fall ist recht einfach und ich schreibe sie dir, wenn du den Rest fertig hast.
diese werden von AJAX in Form von Postdaten gesendet, da musst du nichts machen. Also kein Formular <form></form> machen, sondern nur Fälder einbauen und am Ende ein Button der ein onClick - Event hat. Dadurch wird dann entsprechende Funktion aufgerufen in JavaScript, wo dann AJAX läuft und die Daten an die save_data.php sendet, die dann wiederum diese in die DB abspeichert.
Wie gesagt, machen wir Schritt für Schritt am besten. Mach mal erst ein Mal das Pop-Up-Fenster fertig. und die save_data.php kannst du schon so vorbereiten, dass dort alle Sachen mit SQL usw. stehen.
Wie gesagt, machen wir Schritt für Schritt am besten. Mach mal erst ein Mal das Pop-Up-Fenster fertig. und die save_data.php kannst du schon so vorbereiten, dass dort alle Sachen mit SQL usw. stehen.
Ok, nun würde ich prototype-1.6.0.3.js zu prototype.js umbennen und in einen neuen Ordner, z. B. javascript einfügen.
Dann muss du die Datei einbinden in eintragung.php, bzw. im entsprechenden Tamplate.
Nun brauchst du noch ein Script für AJAX:
Somit wird nun die save_data.php im Hintergrund geladen und die Daten in der Variable $_POST['beschreibung'] und $_POST['ziffer'] an die php-Datei übergeben. Dort kannst du diese Daten ganz normal abrufen und in die DB abspeichern.
Da du mit 2 Fenster arbeitest, denk auch daran, wie du eine JavaScript Funktion aufrufst. Somit musst du noch in deinem onClick - Event dann eben diese Funktion aufrufen lassen saveDataAjax als Argument übergibst du ihr dann entsprechnd die Zahl.
Falls noch Fragen sind, dann frag einfach.
Dann muss du die Datei einbinden in eintragung.php, bzw. im entsprechenden Tamplate.
<script type="text/JavaScript" src="javascript/prototype.js"></script>
Nun brauchst du noch ein Script für AJAX:
<script type="text/JavaScript">
function saveDataAjax(zahl){
var data = '';
// Prüfen, ob alle Daten vorhanden sind
if(self.document.getElementsByName('beschreibung') && self.document.getElementsByName('ziffer') && zahl){
// Sicherheitsfrage
qu = confirm("Möchten Sie wirklich diese Daten editieren?");
if(qu == false)return;
// Daten sammeln
data = data+'&beschreibung='+self.document.getElementsByName('beschreibung').value;
data = data+'&ziffer='+self.document.getElementsByName('ziffer').value;
// Daten abschicken
new Ajax.Request('save_data.php', {method:'post',
postBody: data, onSuccess: function(input){
// Wenn Daten erfolgreich gespeichert wurden
alert('Daten wurden erfolgreich gespeichert.');
// Pop-Up-Fenster schliessen Funktion hier aufrufen! }
onFailure: function(input){
// Wenn die Daten nicht gespeichert wurden alert('FEHLER!'); }
} );
}
}
</script>
Somit wird nun die save_data.php im Hintergrund geladen und die Daten in der Variable $_POST['beschreibung'] und $_POST['ziffer'] an die php-Datei übergeben. Dort kannst du diese Daten ganz normal abrufen und in die DB abspeichern.
Da du mit 2 Fenster arbeitest, denk auch daran, wie du eine JavaScript Funktion aufrufst. Somit musst du noch in deinem onClick - Event dann eben diese Funktion aufrufen lassen saveDataAjax als Argument übergibst du ihr dann entsprechnd die Zahl.
Falls noch Fragen sind, dann frag einfach.
Ok, hier ist die Version, die bei mir funktioniert:
eintragung.php
maske.php
außerdem habe ich JavaScript in eine gesonderte Datei ausgelagert:
functions.js
und schliesslich save_data.php
Außerdem empfehle ich dir zum Testen von AJAX/JavaScript Sachen und auch natürlich vielen anderen im Browser Firefox das Add-On Firebug. Damit kannst du alle Infos ablesen! Sehr hilfreich!
eintragung.php
<?php
include ("include/db_connect.php");
echo "<h1>Regelerfassung</h1>";
$time = getdate();
$stamp = time();
$zeit = $time[mday].".".$time[mon].".".$time[year];
$ziffer = $_POST[ziffer1];
echo "<br><br>Für die Regel wurde als Erstellungsdatum der <b>".$zeit."</b> erfasst.<br><br><br><br>";
$abfr = "SELECT titel
FROM vc_goae
WHERE goae = $ziffer";
$besch = mysql_fetch_array(mysql_query($abfr));
$beschreibung = $besch[titel];
if (!empty($beschreibung)){
$leistung = "(<i>".$beschreibung."</i>) ";}
Echo "Die eingegebene Regel besagt, dass Ziffer ".$ziffer." ".$leistung."nicht neben folgenden Ziffern berechnet werden darf:<br><br><br>";
$zaehler = 1;
$x = 0;
Echo "<table border=\"0\" width=\"70%\">";
do {
$z = "ziffer".$zaehler;
if (!empty($_POST[$z])) {
$abfrage = "SELECT id, goae, titel
FROM vc_goae
WHERE goae = $_POST[$z]";
$eab = mysql_fetch_array(mysql_query($abfrage));
$b = $eab[titel];
if ($erf = 1){$add = " <script language=\"javascript\" type=\"text/javascript\">
function popitup(url) {
newwindow=window.open(url,'name','resizable=no,height=200,width=470,dependent=yes,hotkeys=no,location=no,scrollbars=no,status=no,toolbar=no');
if (window.focus) {newwindow.focus()}
return false;
}
</script>
<a href=\"maske.php?ziffer=$_POST[$z]\" onclick=\"return popitup('maske.php?ziffer=$_POST[$z]')\">Hinzufügen</a>
";}
if (empty($b)){$b = "<i>(Keine Beschreibung vorhanden)</i> ".$add."";}
echo "<tr>
<td>$_POST[$z]<br><br></td>
<td>$b<br><br></td>
</tr>";
$zaehler = $zaehler + 1;
} else {$x = 1;}
} while ($x != 1);
echo "</table>"
?>
maske.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="de">
<title>Test</title>
<script type="text/JavaScript" src="javascript/prototype.js"></script>
<script type="text/JavaScript" src="javascript/functions.js"></script>
<body>
<?php
Echo "<h1>Leistung erfassen</h1><br>
<p>Bitte geben Sie eine Leistungsbeschreibung zu Ziffer ".$_GET[ziffer]." ein:<br></p>
<input type=\"text\" id=\"beschreibung\" size=\"70\"><br><br>
<input type=\"button\" value=\"Speichern\" onclick=\"saveDataAjax(".$_GET[ziffer].")\"> ";
?>
</body>
</html>
außerdem habe ich JavaScript in eine gesonderte Datei ausgelagert:
functions.js
function saveDataAjax(zahl){
var data = '';
// Prüfen, ob alle Daten vorhanden sind
if(self.document.getElementById('beschreibung') && zahl){
// Sicherheitsfrage
qu = confirm('Möchten Sie wirklich diese Daten editieren?');
if(qu == false)return;
// Daten sammeln
data = data+'&beschreibung='+self.document.getElementById('beschreibung').value;
// Daten abschicken
new Ajax.Request('save_data.php',
{method:'post',
postBody: data,
onSuccess: function(input){
// Wenn Daten erfolgreich gespeichert wurden
alert('Daten wurden erfolgreich gespeichert.');
// Pop-Up-Fenster schliessen Funktion hier aufrufen!
},
onFailure: function(input){
// Wenn die Daten nicht gespeichert wurden
alert('FEHLER!');
}
}
);
}
}
und schliesslich save_data.php
<?PHP
// Hier kommt das Update rein
echo "HIER BIN ICH";
?>
Außerdem empfehle ich dir zum Testen von AJAX/JavaScript Sachen und auch natürlich vielen anderen im Browser Firefox das Add-On Firebug. Damit kannst du alle Infos ablesen! Sehr hilfreich!
Natürlich kann du dann im JavaScript, nach dem die Daten gespeichert wurden, das Fenster schliessen lassen und du kannst ebenfalls das andere Fenster einfach neu laden lassen. Das wäre eine einfachere Lösung. Du kannst auch beim Neuladen des Fenster auch ein URL dort übergeben, so als wenn einer das Fenster durch einen Link aufrufen würde. Im URL kannst du dann alle deine Variablen mitübergeben.
Zitat von @godlie:
Hm also das mit der htaccess wird nicht funktionieren, da du dann bei
jedem aufruf dich "anmelden" müsstest, oder lieg ich da
grad sehr falsch?
Hm also das mit der htaccess wird nicht funktionieren, da du dann bei
jedem aufruf dich "anmelden" müsstest, oder lieg ich da
grad sehr falsch?
Da liegst du grade sehr falsch, da dort nur die Daten stehen, dass dieser Ordner von aussen nicht direkt ansprechbar wäre. Also, wenn einer das im Browser eingibt:
http://meinewebseite.de/include
Würde er dann keine Auflistung der Dateien bekommen, sondern eine Fehlermeldung, dass der Zugriff verweigert wurde. Somit kann keiner auf die Daten zugreifen, bzw. die Namen der Dateien ermitteln etc.
PHP-Script läuft aber auf dem Server und somit hat immer Zugriffsrechte darauf. Denn die Scripte werden nicht als solche zum Client übertragen, sondern dienen nur zum Generieren von dynamischen HTML-Seiten, die dann übertragen werden.
Bei den Ordnern mit den Bildern kann man das aber nicht so machen, da diese ja zum Client übertragen werden müssen. Somit kann man Bilder immer über einen direkten Link erreichen. Was man gegen Auflistung eines Ordners mit den Bildern machen könnte, um somit zumindest den Zugriff zu erschweren, eine index.htm in so einen Ordner packen, wo z. B. steht: "<h2>Bitte keinen direkten Link nutzen!</h2> Somit, wenn man z. B. das angibt:
http://www.meinewbseite.de/images
Dann nur die obere Meldung erhält und nicht die Liste aller Bilder.
Zitat von @63130:
Hast du vielleicht dazu auch ein Script? Ich weiß nämlich
nicht wie ich den "ok" Button mit den entsprechenden
Aktionen (Nachladen der Stammseite, schließen der Eingabemaske)
belegen kann.
Hast du vielleicht dazu auch ein Script? Ich weiß nämlich
nicht wie ich den "ok" Button mit den entsprechenden
Aktionen (Nachladen der Stammseite, schließen der Eingabemaske)
belegen kann.
Du brauchst nur nach dieser Zeile alert('Daten wurden erfolgreich gespeichert.'); in der Datei functions.js noch das einfügen:
window.parent.location.href = url;
wobei in url übergibst du den Link mit allen Parametern zum Reloaden.
Und danach schliesst du das Pop-Up-Fenster:
window.close();
Ich habe das nicht getestet, daher musst du vielleicht bei de.selfHTML.org nachschauen, wie man verschiedene Fenster genau anspricht, muss aber so ungefähr sein.
Vermutlich, weil AJAX Script im neuen Fenster geladen wurde und daher "das alte Fenster" nicht kennt. Musst du ein bisschen ausprobieren, z. B. function.js im Hauptfenster laden und dann in onClick-Event noch opener.saveDataAjax ersetzen, damit das Pop-Up-Fenster auf die Funktion aus dem Hauptfenster zugreift. Danach musst du natürlich auch noch JS ändern, so dass reload() nun dann auf sich selbst angewendet wird usw.
Dass die Post Variablen nicht da sind, kannst du mit Firebug für Firefox rausfinden, ob diese überhaupt übergeben werden. Ich könnte vermuten, dass du in deinem Formular vergessen hast statt name="beschreibung" id="beschreibung" zu machen, da JavaScript nach elementById abfragt und somit logischerweise keine Werte bekommt, wenn du aber dort name="beschreibung" stehen hast.
Kann dir momentan nicht wirklich weiter helfen, da nicht an meinem Hauptrechner bin. Probiere einfach mal aus.
Dass die Post Variablen nicht da sind, kannst du mit Firebug für Firefox rausfinden, ob diese überhaupt übergeben werden. Ich könnte vermuten, dass du in deinem Formular vergessen hast statt name="beschreibung" id="beschreibung" zu machen, da JavaScript nach elementById abfragt und somit logischerweise keine Werte bekommt, wenn du aber dort name="beschreibung" stehen hast.
Kann dir momentan nicht wirklich weiter helfen, da nicht an meinem Hauptrechner bin. Probiere einfach mal aus.
Ja, wieso fragst du Ziffer ab, wenn du im HTML zahl übergibst?
Du übergibst an die JavaScript -Funktion die Variable zahl: function saveDataAjax(zahl)
In der Funktion übergibst du aber:
data+'&ziffer='+self.document.getElementById('ziffer').value;
Diese ist ja nicht im HTML-Formular vorhanden, weil auch nicht nötig.
Also es muss entweder so aussehen:
data+'&ziffer='+zahl;
dann brauchst du nur die JavaScript-Datei zu ändern,
ODER:
data+'&zahl='+zahl;
dann musst du aber auch noch die Variable in sava_data.php abändern.
Du übergibst an die JavaScript -Funktion die Variable zahl: function saveDataAjax(zahl)
In der Funktion übergibst du aber:
data+'&ziffer='+self.document.getElementById('ziffer').value;
Diese ist ja nicht im HTML-Formular vorhanden, weil auch nicht nötig.
Also es muss entweder so aussehen:
data+'&ziffer='+zahl;
dann brauchst du nur die JavaScript-Datei zu ändern,
ODER:
data+'&zahl='+zahl;
dann musst du aber auch noch die Variable in sava_data.php abändern.
Die Zeile: data+'&ziffer='+zahl; ist falsch.
Es muss heißen:
data=data+'&ziffer='+zahl;
Außerdem würde ich immer bei $_REQUEST die Namen in den Klammern in ' ' schreiben:
$goae = $_REQUEST['ziffer']; Außerdem würde ich sie z. B. auch gleich auf den richtigen Format bringen: z. b.
$goae = intval($_REQUEST['ziffer']);
Um, rauszubekommen, ob die Daten von AJAX / bzw. JavaScript übergeben werden, nutze am Besten Firebug und zumindest alert - Funktion. Somit kannst du zumindest mit alert(data); sehen, welche Variablen und welche Werte übergeben werden.
Es muss heißen:
data=data+'&ziffer='+zahl;
Außerdem würde ich immer bei $_REQUEST die Namen in den Klammern in ' ' schreiben:
$goae = $_REQUEST['ziffer']; Außerdem würde ich sie z. B. auch gleich auf den richtigen Format bringen: z. b.
$goae = intval($_REQUEST['ziffer']);
Um, rauszubekommen, ob die Daten von AJAX / bzw. JavaScript übergeben werden, nutze am Besten Firebug und zumindest alert - Funktion. Somit kannst du zumindest mit alert(data); sehen, welche Variablen und welche Werte übergeben werden.