[JavaScript] "Popup" Script mit Formular-Funktion gesucht

[OliOli]

Hallo zusammen,

ich möchte auf einem Projekt gern ein Formular mit Ajax realisieren, welches in einer Lightbox untergebracht ist. Es sollte nach dem Absenden vom Server bearbeitet werden und eventuelle Fehler bzw. eine Erfolgsmeldung im selben Lightbox-Popup erscheinen.

(Ich verwende hier Lightbox als Oberbegriff für diese neumodische Art von Javascript Popups)

Getestet habe ich bisher das auf jquery basierende ThickBox, allerdings reagiert mein Ajax Code nicht auf Calls aus dem Popup. Mit anderen Worten, $('#button').click(function() {... } funktioniert nicht, wenn der button #button sich im Popup befindet.

Jetzt suche ich entweder eine einfach Lösung wie ich das mit ThickBox realisieren könnte oder ein alternatives LightBox Script, welches solche Formular-Funktionen bereits integriert hat.

Mit besten Grüßen und in Hoffnung auf schnelle Antwort,

Oli

[tontechniker]

Getestet habe ich bisher das auf jquery basierende ThickBox, allerdings reagiert mein Ajax Code nicht auf Calls aus dem Popup. Mit anderen Worten, $('#button').click(function() {... } funktioniert nicht, wenn der button #button sich im Popup befindet.

Das Problem ist, dass du dort mit Frames arbeitest - normalerweise sollte es da auch eine Funktion geben mit der du HTML ohne iframe anzeigen kannst.

[PHP-Desaster]

Meinst du mit Popup jetzt auch deine Lightbox oder ein weiteres Fenster? Denn dann musst du deinen Aufruf vorher noch an das richtige Fenster richten, bei einem Popup wirst du wohl opener verwenden!

[OliOli]

Hallo,

danke für die Hilfe.

@tontechniker: Den Inhalt als iframe anzuzeigen ist zwar auch möglich, aber hier geschieht es inline. CSS Eigenschaften und so werden ja auch von der Hauptseite übernommen.

@PHP-Desaster: ich meine schon die Lightbox.

[tontechniker]

@tontechniker: Den Inhalt als iframe anzuzeigen ist zwar auch möglich, aber hier geschieht es inline. CSS Eigenschaften und so werden ja auch von der Hauptseite übernommen.

Dann sollte das Javascript aber auch darauf zugreifen - schon mal in die Fehlerkonsole geschaut?

[OliOli]

Hallo,

So bin ein wenig weiter.

Stand der Dinge: Error Console sagt nix. Ich kann beim Button in der Lightbox mit onClick="javascript.." auf eine Javascript funktion in der xx.js datei zugreifen. Das geht also, genau wie er CSS übernimmt.

jquery erkennts allerdings nicht. Jetzt hab ich folgende Theorie:

Um jquery zu "starten" schreibt man ja zu Beginn

$(function() {
			  // hier dann irgendwelcher code
			});

Jquery wird jetzt erst aufgerufen wenn die Seite komplett geladen ist. Allerdings geschieht dies ja dann BEVOR die Lightbox aufgemacht ist, also beim Öffnen der Lightbox "updatet" sich jquery nicht irgendwie, es sind ja ein paar Elemente dazugekommen.

Ich versuche also beim Öffnen der Lightbox, jquery erneut zu "initialisieren" oder wie das auch bezeichnet werden soll.

Grüße

[tontechniker]

also beim Öffnen der Lightbox "updatet" sich jquery nicht irgendwie, es sind ja ein paar Elemente dazugekommen.

Das ist eigentlich Quatsch, jQuery speichert die Objekte ja nicht irgendwo sondern greift direkt über DOM darauf zu.

[OliOli]

So, gelöst.

Allerdings mit Prototype und Control.Modal .

Ein bisschen Code falls es jemanden interessiert:

###Link zum Öffnen der Lightbox

<a href="popup.php" id="popup">Open</a>


###In der selben Datei (unten) Code mit ein paar Optionen für das Popup:

<script>
new Control.Modal('popup',{
	opacity: 0.8,
      width: 322,
      height: 200,
	fade: true,
	overlayCloseOnClick: false
});
</script>


###Das Formular im Popup

<form id="popup" method="post" action="sendform.php">
	<textarea name="text" /></textarea>
	<input type="button" value="senden" onClick="javascript:send()" />
</form>


###Das Javascript bzw. der Ajax Call fürs Senden

function send(){
	$('popup').request({
		method: 'post',
		encoding: 'UTF-8',
		onComplete:function(t){
			  
			 Control.Modal.current.update(t.responseText);
		}.bind(this)
	});
}