JavaScript Click Event auf dynamischen Inhalt

[Daaron]

Ich gehe mal davon aus, daß du das meintest, wenn nicht bitte noch mal treten *g*

Korrekt...

Leider habe ich den Rest nicht ganz verstanden. Das Submenu ist ja in der function mit drin, weiß nur nicht ob das so richtig ist. Aber wie gesagt wollte ja ein Menü "onthefly" auf den Benutzer haben. Wie das geht weiß ich auch nicht wirklich.

Nun ja, dass du pro Benutzer ein separates Menü erzeugen musst, das steht ja scheinbar außer Frage. Der Zaubertrick ist nur: Wie zeige ich das Menü effizient an bzw. blende es wieder aus. Da gibts viele Wege. Einer der hübschesten führt über CSS-Klassen: schreib dein CSS so, dass alle Menüs "unsichtbar" sind. Schreib dazu eine Klasse, die ein Menü sichtbar machen würde. Häng jetzt per JS die Klasse bei Bedarf an deine Elemente oder entfern sie wieder, müsste toggleClass() sein. Das sorgt für Klarheit, weil Optik und Logik stärker getrennt sind.

Ok im Menü kann man ja das ja machen mit den anhängen, aber wie schaut es denn aus wenn ich im Menü eine Funktion aufrufen will?

Hier lohnt es sich wieder, über möglichst effiziente Event Delegation zu gehen.
Den Aufbau des Menüs sollte dein ursprünglicher AJAX-Call machen, dafür hast du ja jetzt JSON im Einsatz. Da kannst du alle Optionen des Menüs mit hinein kodieren.

 

[RioCoding]

Puh, ich glaub das wird noch schwierig dir zu helfen

Vllt solltest du uns noch ein paar Rahmenbedingungen nennen:

• Was willst du überhaupt grundsätzlich tun?
• Welche Browsertypen willst du unterstützen?
• Was willst du mit den Benutzern machen?
• Wie viele verschiedene Benutzertypen gibt es?

Dein Menü wird nichts anderes sein als eine weitere Liste. Gib den Einträgen eine Klasse oder ruf bei Klick eine Funktion auf.

 

[sprefer]

Ok nochmal alles fast auf Null *g*
Ja sehe schon bin ein fast hoffnungsloser Fall, aber ihr beweist Geduld, dafür danke ich auch sehr.

Also von Anfang noch mal:

Auf der Seite werden die Benutzer ja ausgegeben, diese Benutzer sollen klickbar sein und sich ein Menü einblenden. Das haben wir ja schon gut hinbekommen.

In diesem Menü sollen dann Links drin sein, z.B. Aufruf des Profils usw.

Es gibt 4 Benutzertypen. Jeder hat im Prinzip fast das gleiche Menü, manche eben noch ein paar Menüpunkte mehr. Je nach Typ. Da ist die grundsätzliche Frage wie man dann die Menüs baut.

Zudem sollte ja bei jedem Benutzer im Menü die ID oder der Name mitgegeben werden. Ok man kann es per a href auf eine php-Seite machen und die ID oder Namen anhängen.
Aber mal eine Frage dazu, ich habe ja das submenu innerhalb der Function, kann ich in dem submenu ein onclick einbauen, das eine weitere Funktion aufruft?


Ich möchte damit aktuelle Browser ansprechen, wer mit alten Browsern rum rennt ist selbst Schuld *g*

Ergänzung (17. November 2013)

Nun ja, dass du pro Benutzer ein separates Menü erzeugen musst, das steht ja scheinbar außer Frage. Der Zaubertrick ist nur: Wie zeige ich das Menü effizient an bzw. blende es wieder aus. Da gibts viele Wege. Einer der hübschesten führt über CSS-Klassen: schreib dein CSS so, dass alle Menüs "unsichtbar" sind. Schreib dazu eine Klasse, die ein Menü sichtbar machen würde. Häng jetzt per JS die Klasse bei Bedarf an deine Elemente oder entfern sie wieder, müsste toggleClass() sein. Das sorgt für Klarheit, weil Optik und Logik stärker getrennt sind.

Meinst du innerhalb der function mehrere submenu bauen die immer eine andere Klasse haben? Also submenu class="user" und eins mit class="admin" usw?

Ergänzung (17. November 2013)

Also momentan sieht mein Code so aus

var refreshId = setInterval(function(){
    $.getJSON('userlist.php', function(data){
        var html = '';
		var submenu = '';
        for(var i in data){
            if($('#'+data[i].id).length == 0){
			$('li.loading').remove();
				submenu = '<div class="submenu"><ul><li><a href="profile.php?id='+data[i].id+'">Profil</a></li><li>mehr</li><li>mehr</li><li>mehr</li></ul></div>';
                html += '<li class="user" id="'+data[i].id+'"> '+data[i].name+submenu+' </li>';
            }
        }
    $('#userlist').append(html);
    });
}, 3000);

$('#userlist').on('click','li',function(){
$(this).children('div.submenu').fadeToggle('slow');
});

 

[Daaron]

Es gibt 4 Benutzertypen. Jeder hat im Prinzip fast das gleiche Menü, manche eben noch ein paar Menüpunkte mehr. Je nach Typ. Da ist die grundsätzliche Frage wie man dann die Menüs baut.

Deine verfügbaren Menüpunkte hast du in deinem initialen JSON-Objekt ja drin (bzw. kannst du rein packen). Der Rest ist etwas If-Then - Magie über die Attribute des Objekts. Du musst dir halt darüber im Klaren sein, das JavaScript im Klartext beim User ausgeführt wird. Er kann alles manipulieren, was er will.

Zudem sollte ja bei jedem Benutzer im Menü die ID oder der Name mitgegeben werden. Ok man kann es per a href auf eine php-Seite machen und die ID oder Namen anhängen.

Die einfachste Methode sind tatsächlich GET-Parameter, die du passend auswertest. Daran soll es ja wohl kaum scheitern.

Aber mal eine Frage dazu, ich habe ja das submenu innerhalb der Function, kann ich in dem submenu ein onclick einbauen, das eine weitere Funktion aufruft?

Klar. Du kannst so viele anonyme Funktionen ineinander schachteln wie du willst. Frag dich eher, ob es SINN macht. Wenn du an 100 User je eine Funktion bindest, dann hast du 100 Funktionen im Speicher. Wenn du die Funktion an das Eltern-Element der User hängst und dann delegierst, hast du nur eine FUnktion im Speicher. Das wird schnell zu einem großen Problem auf kleinen Geräten.

Meinst du innerhalb der function mehrere submenu bauen die immer eine andere Klasse haben? Also submenu class="user" und eins mit class="admin" usw?

Ist natürlich möglcih, macht aber wenig Sinn.
Ich dachte eher an <div class="submenu"> und, wenn es sichtbar sein soll, <div class="submenu active">, wobei du in .submenu{} alles definierst, wie deine Menüs aussehen sowie ein display: none;. In .submenu.active{} brauchste dann bloß noch n display:block; packen und schon taucht der Kram auf... wenn auch nicht hübsch animiert. Aber da kann man tricksen. CSS kann vieles animieren, nur (z.B.) kein "display". Es kann aber z.B. Positionsangaben animieren, oder Höhen, Breiten und die Opacity.

Hübsch kanns eh am Ende werden, erst einmal muss es gehen.

 

[sprefer]

Puh danke, nun hab ich viel Input. Ich hoffe ich habe das irgendwie verstanden und versuche die Punkte mal abzuarbeiten.

Ergänzung (18. November 2013)

Nee sorry ich versteh es einfach nicht so ganz.

If-Abfragen in PHP sind ja echt kein Problem, aber ich verstehe es nicht in JS. Wohin und wie muß die Abfrage denn? Und mit den Funktionen delegieren ist für mich gleich noch mehr ein rotes Tuch *g*

Kannst du mir vieleicht mit Beispielen weiter helfen?

 

[RioCoding]

Dann kriegst du jetzt noch mehr zu lesen:
Event Delegation mit jQuery: http://www.sitepoint.com/event-delegation-with-jquery/
Javascript if conditions: http://www.w3schools.com/js/js_if_else.asp

Aber ich muss mal grundsätzlich fragen: Wieso tust du dir das an?
Und vor Allem: Was willst du genau machen? Mir scheint das ganze Vorgehen ziemlich abenteuerlich. Und von irgendwelchen Sicherheitsaspekten (Absicherung der Seite, Absicherung von Funktionen, Schutz gegen sämtliche Injections) will ich noch gar nicht anfangen.

 

[sprefer]

Einerseits weil ich es gerne lernen möchte und anderseits weil ich es für mein Projekt brauche.
Wegen der Sicherheit... Bin ich denn auf dem Holzweg?

 

[RioCoding]

Bislang hast du überhaupt keine drin
Das hängt aber stark davon ab, wie dein Projekt gestaltet ist. Ist es ein Projekt für die Schule / Studium oder wird das auf die breite Öffentlichkeit losgelassen?

Du musst dir halt im Klaren sein, dass wenn du die ID als GET-Parameter verwendest. Jeder Benutzer diese ID abändern kann und damit einen völlig anderen Nutzer anpassen kann.

Ich glaube aber, du solltest dich grundsätzlich erstmal mit Webentwicklung und im speziellen HTML und Javascript auseinander setzen.
Evtl. findest du ja ein kleines Tutorial, was dir das näher bringt.

Wenn du dir die Funktionalität so halbwegs zusammen schusterst und wir dich hier mit irgendwelchen Fachbegriffen und Links bewerfen, die deinen Kenntnisstand überschreiten, ist dir nicht wirklich geholfen.

 

[sprefer]

Hmm ok.
Das Projekt sollte schon irgendwann auf die Menschit losgelassen werden, ja.

Aber so ein Hexenzauber kann es doch nicht sein, es gibt doch auch viele Chatsysteme die sowas haben. Eine Benutzerliste im Chatraum wo man einen Benutzer anklick und dann das Menü aufgeht.

Ergänzung (18. November 2013)

Wie zum Beispiel bei diesem hier:
sedesign.de/chat3test/
Eine Benutzerliste wo man die Benutzer anklicken kann und schon geht ein Menü auf.
So hatte ich mir das vorgstellt. Ohne Chat natürlich, nur die Liste

 

[Daaron]

Dann mach es dir doch leicht: Lies deren Code. JavaScript wird immer im Klartext übertragen udn ausgeführt. Schlimmstenfalls wird etwas Code Obfuscation durchgeführt, entweder um Abschnitte mutwillig unleserlich zu gestalten, oder einfach von einem Kompressions-Werkzeug wie YUI, um ein paar kByte zu sparen.

Es ist ja grundsätzlich nichts falsch daran, die IDs per GET zu übertragen. Warum auch? Es muss nur VOR der Reaktion des Servers überprüft werden, ob die Person, die die Anfrage gestartet hat, das für diesen Fall überhaupt darf.
Sicherheit ist 100% Server-Sache, JavaScript sollte niemals sicherheitsrelevante Funktionen enthalten. Natürlich kann man Formulare erst einmal mit HTML5 udn JS validieren, aber das dient nur der Nutzerfreundlichkeit. Eine echte Validierung erfolgt trotzdem immer beim Server.