✔ AJAX Formular einblenden

D

daniel_sun

Erfahrenes Mitglied
Hallo,

jeder kennt sicher diese Gästebücher (oder auch andere Seiten), wo wenn man auf "Eintrag hinzufügen" klickt keine neues Seite öffnen, sondern ein Formular über der "alten Seite" eingeblendet wird und nach dem Absenden verschwindent und der Eintrag sichtbar ist.

Wie wird soetwas realisiert? Gibt es dar vielleicht iwo ein schönen Tutorial zu? Hab schon gegoogeld wusste aber nicht genau nach welchem Begriff. (habs mit overlay formular versucht :D )

Wie nennt man sowas?

Gruß
daniel_sun
 
Danke. Habe mich für jquery entschieden und es gefällt mir echt super. Klappt auch alles hervorragend.

Nur ein Problem habe ich noch. Gehört eig in den bereich CSS will dafür aber kein neues Thema anfangen:

Habe mir auf der Seite ein eigenes Theme erstellt. Das Formular wird auf den Klick eines Normalen Hyperlinks geöffnet! Durch den Style macht jquery den link aber nun zum Button. Kann man das iwie verhindern?

GRuß
daniel_sun
 
Ohne Code können wir nicht helfen. Denn eigentlich sollte der Link nicht verändert werden, nur weil du einen click-Handler hinzu fügst.
 
Das mit dem Link war mein Fehler. Hab im Link was falsch definiert.

Jquery funktioniert super.

Das ist mein Formular:

HTML: 
<div id="neuesalbum" title="Neues Album erstellen:">
	 <p style="color:red;" class="validateTips"></p>
 	<fieldset>
        <form id="formneuesalbum" action="" method="post">
            <label for="name">Name</label><br />
            <input type="text" name="name" id="name" size="30"  class="text ui-widget-content ui-corner-all" />
            <label for="stattgefundenam">Stattgefunden am</label><br />
            <input type="text" name="tag" id="tag" size="2" maxlength="2" / class="text ui-widget-content ui-corner-all" />
            <input type="text" name="monat" id="monat" size="2" maxlength="2" class="text ui-widget-content ui-corner-all"/>
            <input type="text" name="jahr" id="jahr" size="4" maxlength="4"  class="text ui-widget-content ui-corner-all"/>
        </form>  
	</fieldset>                              
</div>

Und hier wird es mit Jquery geöffnet und bearbeitet:

Code: 
$( "#neuesalbum" ).dialog({
				autoOpen: false,
				modal: true,
				buttons:{
					"Album erstellen":function(){
						//Hier werden die Daten geprüft und abgeschickt
						}
					},
					"Cancel": function() {
						$( this ).dialog( "close" );
					}
				}
			});
			$( "#button_neuesalbum" ).button().click(function() {
				$( "#neuesalbum" ).dialog( "open" );
			});

Das ganze steckt in einem Template, welches dem Benutzer die in der Datenbank abgespeicheren Foto-Alben anzeigt. Unter der auflistung gibt es einen Link "Neues Album erstellen", welches das hier zusehende Formular anzeigt. Dort kann man dann Daten eingeben und so wird das neue Album in die Datenbank (mittels übergabe an PHP) eingefügt.

Soweit hab ich das hinbekommen.

Nun würde ich gerne dieses Formular oder ein identisches im selben Template benutzen, um dem Nutzer die möglichkeit zu geben, existierende Alben zu bearbeiten.

Der Nutzer klickt also beim entsprechenden Eintrag in der liste auf "Daten bearbeiten". Dann müsste mittels PHP der Datenbankeintrag ausgelesen werden und die value-werte Formularfelder gefüllt werden. Zum Schluss müsste dann das Formular angezeigt werden.

Leider habe ich einige Probleme das in der Praxis umzusetzen. Hatte einen Lösungsansatz in dem ich mit dem Klick auf den Link das Formular zum bearbeiten öffne und der Link gleichzeitig auf das PHP-Dokument verweist, welches die Abfrage bearbeitet.

Das Formular wurde auch mit den korrekten werten geöffnet, allerdings verschwand es nach 1 sec (da das Template ja neu geladen werden muss). Macht man das nicht kommt nach einer Sec. ein Weißer bildschirm.


Die Frage ist nun wie kann ich es realisieren, dass der Nutzer einen DB-Eintrag auswählt und Formular mit den entsprechenden werten gefüllt und dann angezeigt wird?

Ich hoffe ich konnte deutlich machen, worauf ich hinaus will.
 
Du solltest dir mal http://api.jquery.com/jQuery.get/ und http://api.jquery.com/jQuery.post/ ansehen. Vergiss den gedanken, dass du weiterhin ein Formular zum Absenden verwendest und mach alles im Hintergrund. Wenn jemand auf "bearbeiten" klickt, zeigst du eine Ladegrafik und holst z.B. via $.get('albumdetails.php?id=123') die Werte, die du für die Textfelder brauchst. Sobald die Daten da sind, verschwindet die Ladegrafik und du füllst die Textfelder. Auch http://api.jquery.com/jQuery.getJSON/ ist sehr empfehlenswert.
 
Die Post-geschichte kannte ich (so fülle ich ja meine) Datenbank. Hatte nur keinen Befehl gefunden der das ganze auch anders zum macht.
 
Mir ist allerdings schleierhaft, wie ich die id übergeben soll. Hatte es mit einem onClick versucht:

<href="#" onClick="getData(1)">1 Datensatz bearbeiten</a>
<href="#" onClick="getData(2)">2 Datensatz bearbeiten</a>
<href="#" onClick="getData(2)">3 Datensatz bearbeiten</a>

Das geht aber nicht, da im Javascript die funktion getData() gar nicht geöffnet wird. Hab mit alert getestet ob sie überhaupt abgesprochen wird aber scheint nicht so zu sein.

Könnte zwar ne ID vergeben und dann mit $("#XYZ").click() die bearbeitung auslösen aber so bekomme ich ja keinen werd übermittelt.
 
Naja, dein HTML sieht doch bestimmt anders aus als einfach nur Links?

Angenommen du hast sowas

HTML: 
<ul class="albumlist">
    <li class="albumitem" data-albumid="17">Mein tolles Album (<a href="#" class="edit-album">bearbeiten</a>)</li>
    <li class="albumitem" data-albumid="24">Noch ein tolles Album (<a href="#" class="edit-album">bearbeiten</a>)</li>
    <li class="albumitem" data-albumid="99">Das beste Album der Welt (<a href="#" class="edit-album">bearbeiten</a>)</li>
</ul>

Dann kämst du so an die ID

Javascript: 
$('.edit-album').click(function(e) {
    e.preventDefault();

    alert( $(this).parent().data('albumid') );
});

Wenn dir das data-attribut nicht gefällt, z.B. weil du XHTML 1 oder HTML 4 valide sein willst, dann verstau die ID eben anders, z.B. in einem hidden-input.
 
Ich lasse mir mit PHP die Daten aus der Datenbank in ner Tabelle anzeigen:

HTML: 
 <table id="users" class="ui-widget ui-widget-content">
                                        <thead>
                                            <tr class="ui-widget-header ">
                                                <th>Vorschau:</th>
                                                <th>Albumname:</th>
                                                <th>Bilderanzahl:</th>
                                                <th>Erstellt am:</th>
                                                <th>Erstellt von:</th>
                                                <th>Status:</th>
                                                <th>#</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        	<?php foreach ($table_data as $td_row): ?>
                                            <tr>
                                                <td><?=$td_row['vorschau']?></td>
                                                <td><?=$td_row['album_name']?></td>
                                                <td><?=$td_row['bilderanzahl']?></td>
                                                <td><?=$td_row['erstellt_am']?></td>
                                                <td><?=$td_row['autor']?></td>
                                                <td><?=$td_row['status']?></td>
                                                <td><a href="#" onclick="getdata(<?=$td_row['id']?>)">Bearbeiten</a></td>
                                            </tr>
                                            <?php endforeach;?>
                                        </tbody>
                                    </table>

Das PHP-Dokument holt halt alle Einträge aus der DB füllt das array und ruft mit require_once das Template auf.

Wollte ich die Daten nun mit PHP bearbeiten würde ich ja einfach nen link zur Datei (z.b edit_data.php) setzen die ID übergeben und diese öffnet dann ein Formular mir den aktuellen werten.

Das will ich nun über JQuery lösen! Das problem ist das ich schon bei der ID übergabe scheiter. Das was danach kommt ist mir in der theorie klar. Ich muss mit JQuery holt sich mit Hilfe eines PHP-Dokuments (welches die MYSQL-Abfrage durchführt) die Werte. Diese kann ich dann im Formular einfühen und es dann anzeigen.

Fühle mich in etwa so wie damals, als ich mich von html an php herrangewagt habe :D
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück