Liste mit jQuery-Funktionen

bertiSR · 12. August 2009

guten abend miteinander.
ich arbeite im moment an einem kleinen projekt bei dem ich jqeury verwende. ich lasse mit php eine banale liste erstellen, deren html code so aussieht.

HTML:

<ul id="user_list">
	<li id="usr-1">Benutzer 1 <a href="#" class="rgstr">Anmelden</a></li>
	<li id="usr-2">Benutzer 2 <a href="#" class="rgstr">Anmelden</a></li>
	<li id="usr-3">Benutzer 3 <a href="#" class="rgstr">Anmelden</a></li>
</ul>

diese liste ist teil eines formulars. am anfang des formulars gibts der benutzer ledeglich seine daten ein und kann danach aus der obigen liste sich bei verschiedenen personen anmelden. das anmelden bei einer / mehreren personen wäre soweit kein problem, könnte man ja über eine checkbox machen.

Ich will aber, dass sich bei einem klick auf den "anmelde"-link eine art "lightbox" öffnet, in der sich ein formular befindet, das eine textarea beinhaltet, in die man einen kurzen text eingeben kann, den man dem jeweiligen benutzer bei der anmeldung mitsenden kann.

ich habe das öffnen der "lightbox" mit dem jqeury plugin "fancybox" gelöst (ob es sinnvoll ist oder nicht wird sich noch zeigen

)

bisher sieht also mein code dann aus wie folgt:

HTML:

<ul id="user_list">
	<li id="usr-1">Benutzer 1 <a href="#" class="rgstr">Anmelden</a></li>
	<li id="usr-2">Benutzer 2 <a href="#" class="rgstr">Anmelden</a></li>
	<li id="usr-3">Benutzer 3 <a href="#" class="rgstr">Anmelden</a></li>
</ul>

<script language="JavaScript">

	$(document).ready(function(){

		$("a.rgstr").fancybox({
			/*'frameHight', 'frameWidth', usw.*/
		});

	});

</script>

so nun nach längerem rumgetexte nun die frage:
wie muss der code aussehen, dass sich bei einem klick auf den link eine fancybox öffnet, in der sich eine textarea befindet und deren inhalt dann später mit dem ganzen formular mitgesendet werden kann? wie bewerkstellige ich es, dass der jeweilige Benutzer dann auch als "ausgewählt" gekennzeichnet wird?

viele grüße der berti

chmee · 12. August 2009

Mit der Fancybox gibst Du

inline

die Maske aus. Da gibt es den callbackOnClose-Event, der die Daten überprüft, mit den Grunddaten mischt und dann absendet.

Inline also in div id data.
Sonstige Infos -> http://fancybox.net/howto

mfg chmee

Maik · 12. August 2009

Hi.

@bertiSR: Beachte in deinen Forenbeiträgen bitte unsere Netiquette bzgl. der erwünschten Groß- und Kleinschreibung - vielen Dank!

mfg Maik

bertiSR · 13. August 2009

Gut also ich lasse jetzt bei einem Klick auf den Link die fancybox öffnen und eine Seite anzeigen. An diese Seite übergebe ich die benötigten Daten. Zugleich lasse ich beim Schließen des Fensters einen callbackOnClose-Event ausführen. Sieht dann bisher so aus.

HTML:

<ul id="user_list">
	<li id="usr-1">Benutzer 1 <a href="rgstr.php?usr_id=1" class="rgstr">Anmelden</a></li>
	<li id="usr-2">Benutzer 2 <a href="rgstr.php?usr_id=2" class="rgstr">Anmelden</a></li>
	<li id="usr-3">Benutzer 3 <a href="rgstr.php?usr_id=3" class="rgstr">Anmelden</a></li>
</ul>

<script language="JavaScript">

	$(document).ready(function(){

		$("a.rgstr").fancybox({
			'frameHeight': 200,
			'frameWidth': 350,
			'hideOnContentClick': false,
			'padding':10,
			'zoomSpeedIn': 450,
			'zoomSpeedOut': 200,
			'callbackOnClose': function() {
				$('a.rgstr').append("hallo");
			} 
		});

	});

</script>

Bei dem callbackOnClose-Event habe zum ausprobieren append verwendet. Wenn ich nun das Fenster also schließe, fügt mir diese Funktiona append den Text "hallo" hinzu. Aber sie fügt sie zu jedem Link hinzu. Wie spreche ich nur den jeweiligen Link an?

Zur weiteren Übergabe der Daten will ich jedem Link ein unsichtbares Feld hinzufügen. Also:

HTML:

<ul id="user_list">
	<li id="usr-1">Benutzer 1 <a href="rgstr.php?usr_id=1" class="rgstr">Anmelden</a><input id="val_usr_1" type="hidden" value="" /></li>
	<li id="usr-2">Benutzer 2 <a href="rgstr.php?usr_id=2" class="rgstr">Anmelden</a><input id="val_usr_2" type="hidden" value="" /></li>
	<li id="usr-3">Benutzer 3 <a href="rgstr.php?usr_id=3" class="rgstr">Anmelden</a><input id="val_usr_3" type="hidden" value="" /></li>
</ul>

Mit Hilfe des callbackOnClose-Events will ich dann den Wert der Textarea aus der Fancybox in dieses Feld eintragen und zur weiteren Verarbeitung übergeben. Sinnvoll?

gruß der berti

chmee · 13. August 2009

Hmm, nu' lässt Du doch in der Fancybox eine "externe" Seite anzeigen. Ich dachte, die Idee mit dem Inline-Text wäre soweit gut, damit Du keine "sicherheitsrelevanten" Informationen von einer Seite zur nächsten hieven musst.

Schau nochmal nach inline. Vielleicht klärt sich dann auch das Link-Problem.

mfg chmee

bertiSR · 13. August 2009

Also wenn ich das howto von Fancybox lese steht bei Inline-Content folgendes:

HTML:

<a id="inline" href="#data">This shows content of element who has id="data"</a>

Mir ist klar was das heist, nur ich habe keine Ahnung wie mir das bei der Lösung meines Problems helfen soll!

HTML:

<ul id="user_list">
	<li id="usr-1">Benutzer 1 <a href="#notice" class="rgstr">Anmelden</a></li>
	<li id="usr-2">Benutzer 2 <a href="#notice" class="rgstr">Anmelden</a></li>
	<li id="usr-3">Benutzer 3 <a href="#notice" class="rgstr">Anmelden</a></li>
</ul>

<textarea id="notice"></textarea>

Wie weise ich den Wert der Textarea dem speziellen Link zu?

EDIT:
Ah sry stand auf der Leitung. Ich werde hinter jedem Link eine Textarea machen und der eine Id zuweisen. Diese wird dann in der Fancybox angezeigt und der Inhalt übernommen. Rictig so?

HTML:

<ul id="user_list">
	<li id="usr-1">Benutzer 1 <a href="#notice_1" class="rgstr">Anmelden</a><span id="notice_1"><textarea></textarea></span></li>
	<li id="usr-2">Benutzer 2 <a href="#notice_2" class="rgstr">Anmelden</a><span id="notice_2"><textarea></textarea></span></li>
	<li id="usr-3">Benutzer 3 <a href="#notice_3" class="rgstr">Anmelden</a><span id="notice_3"><textarea></textarea></span></li>
</ul>

chmee · 13. August 2009

Ich habs nicht ausprobiert. Und auf Anhieb wüsste ich nicht, ob es so geht, aber ich wollte Dich nur auf die inline-Möglichkeit aufmerksam machen, eben wegen möglicher sensibler Daten, die im Klartext rumgeschubst werden müssten.. Wenn es funktioniert, dann ist es schön..

mfg chmee

bertiSR · 14. August 2009

Also nachdem es mit der obigen Methode nicht funktiniert hat, habe ich nun folgendes ausprobiert:

HTML:

<ul id="users">
	<li>Benutzer 1 <a class="rgstr" href="" id="usr_1">Anmelden</a> <input id="nusr_1" type="text" value="" /></li>
	<li>Benutzer 2 <a class="rgstr" href="" id="usr_2">Anmelden</a> <input id="nusr_2" type="text" value="" /></li>
</ul>

<div id="notice" style="display: none;">
	<textarea id="text"></textarea>
	<input id="user_id" type="text" value="" />
	<input id="add_notice" type="button" value="Hinzuf&uuml;gen" />
</div>

<script language="JavaScript">
$(document).ready(function(){

	$("a.rgstr").click(function(){
		var usr = $(this).attr("id");
		$("#notice").slideToggle();
		$("#user_id").attr("value", usr);
	});

	$("#add_notice").click(function(){
		var msg = $("#text").val();
		var usr = $("#user_id").val();
		$("#n" + usr).attr("value", msg);
	});

});
</script>

Mit einem Klick auf anmelden öffnet sich der Container mit dem Formular (noch nicht in Fancybox). Wenn ich das Ganze nun mit dem Inline-Content der Fancybox verwende, was dann aussieht wie folgt, funktioniert das ganze nicht mehr:

HTML:

<ul id="users">
	<li>Benutzer 1 <a class="rgstr" href="#notice" id="usr_1">Anmelden</a> <input id="nusr_1" type="text" value="" /></li>
	<li>Benutzer 2 <a class="rgstr" href="#notice" id="usr_2">Anmelden</a> <input id="nusr_2" type="text" value="" /></li>
</ul>

<div id="notice" style="display: none;">
	<textarea id="text"></textarea>
	<input id="user_id" type="text" value="" />
	<input id="add_notice" type="button" value="Hinzuf&uuml;gen" />
</div>

<script language="JavaScript">
$(document).ready(function(){

	$("a.rgstr").fancybox({
		'hideOnContentClick': false,
		'callbackOnStart': function(){
			var usr = $(this).attr("id");
			$("#user_id").attr("value", usr);
		},
		'callbackOnClose': function() {
			var msg = $("#text").val();
			var usr = $("#user_id").val();
			$("#n" + usr).attr("value", msg);
		}
	});

});
</script>

Funktioniert das Ganze wie ich es mache mit jQuery schlichtweg so nicht oder habe ich einen Denkfehler oder einen Fehler im Script?

Quaese · 14. August 2009

Hi,

ganz so einfach ist das Problem nicht. Du versuchst in folgendem Codefragment

Code:

		'callbackOnStart': function(){
			var usr = $(this).attr("id");
			$("#user_id").attr("value", usr);
		},

mit this auf den auslösenden Link zuzugreifen. this referenziert jedoch das fancybox-Objekt.

Um Zugriff auf den auslösenden Link zu erhalten, ist eine Änderung im fancybox-Script selbst notwendig.

Mit folgenden Änderungen sollten die callback-Funktionen das auslösende Element als Parameter übergeben bekommen. Die Änderungen sind jedoch ohne Gewähr und es sollte vom Orginalscript eine Sicherungskopie erstellt werden.

Im Script (z.B. jquery.fancybox.js) werden folgende Passagen gesucht.
1.

Code:

			if ($.isFunction(opts.callbackOnStart)) {
				opts.callbackOnStart();
			}

2.

Code:

			if ($.isFunction(opts.callbackOnShow)) {
				opts.callbackOnShow();
			}

3.

Code:

			if ($.isFunction(opts.callbackOnClose)) {
				opts.callbackOnClose();
			}

Diese werden wie nachstehend abgeändert.
1.

Code:

			if ($.isFunction(opts.callbackOnStart)) {
				opts.callbackOnStart(elem);
			}

2.

Code:

			if ($.isFunction(opts.callbackOnShow)) {
				opts.callbackOnShow(elem);
			}

3.

Code:

			if ($.isFunction(opts.callbackOnClose)) {
				opts.callbackOnClose(elem);
			}

Jetzt wird den callback-Funktionen das benötigte Argument übergeben.

Weiterhin wird es noch notwendig, den Wert der Textarea beim Schliessen der Box in die Orignal-Textbox zu schreiben.

Folgendes Fragment funktioniert bei mir mit deinem HTML-Code:

Code:

$(document).ready(function(){
  $("a.rgstr").fancybox({
    'hideOnContentClick': false,
    'callbackOnStart': function(_this){
      var usr = $(_this).attr("id");
      $("#user_id").attr("value", usr);
    },
    'callbackOnClose': function(_this) {
      $("#text").val($("#fancy_div").find('textarea').val());
      var msg = $("#text").val();
      var usr = $("#user_id").val();
      $(_this).parent().find('input').val(msg);
    }
  });
});

Vielleicht hilft dir das weiter.

Ciao
Quaese

bertiSR · 15. August 2009

Ah super danke. Ich wäre nie auf die Idee gekommen, dass ich in der Stammdatei selbst etwas ändern muss. Nur noch eine Frage.

Code:

    'callbackOnClose': function(_this) {
      $("#text").val($("#fancy_div").find('textarea').val());
      var msg = $("#text").val();
      var usr = $("#user_id").val();
      $(_this).parent().find('input').val(msg);
    }

Hier "findest" du ja mit find alle input-Tags. Wenn ich in einem Listenelement nun mehrere solcher input-Tags habe wird in jeden Tag der Wert aus der Textarea übergeben.
Mit find findet man alle Tags. Wenn ich nun find durch filter ersetzt müsste ich doch dann die id des betreffenden Feldes finden, was aber irgendwie nicht geht?!

Code:

    'callbackOnClose': function(_this) {
      $("#text").val($("#fancy_div").find('textarea').val());
      var msg = $("#text").val();
      var usr = $("#user_id").val();
      $(_this).parent().filter('#n' + usr).val(msg);
    }

EDIT: Problem erledigt. Hatte nur übersehen aus den Tags zu filtern. Danke

Liste mit jQuery-Funktionen

bertiSR

Mitglied

chmee

verstaubtes inventar

Maik

bertiSR

Mitglied

chmee

verstaubtes inventar

bertiSR

Mitglied

chmee

verstaubtes inventar

bertiSR

Mitglied

Quaese

Moderator

bertiSR

Mitglied

Neue Beiträge