JavaScript Click Event auf dynamischen Inhalt

[RioCoding]

Am besten schaust du dir auch die jQuery Selektoren an: http://api.jquery.com/category/selectors/

Damit kannst du dann das Event an bestimmte Elemente binden.

 

[sprefer]

Nun wird es kompliziert.
Danke für die Lektüren da hab ich mir ja was angetan. Werde mich mal einlesen. Und garantiert kommt die nächste Frage bestimmt...

Danke noch einmal

Ergänzung (15. November 2013)

Hmm irgendwie öffnet sich bei mir die Seite nicht...

Ergänzung (15. November 2013)

OK Seite geht jetzt.
Aber welchen Selektor sollte ich mir da genau anschauen?

 

[RioCoding]

Je nachdem was du brauchst Kommt ja drauf an, wie deine Seite aufgebaut ist und an welche Elemente du deine JS-Funktionalität hängen willst.

 

[sprefer]

Die Seite hat ein Div wo die Userlist als DIV drin ist.

Diese soll, wie beschrieben, bestimmte Benutzer ausgeben. Das Div wird per Ajax aktualisiert und holt sich die PHP-Seite wo die DB-Abfrage drin ist.

Soweit klappt das ja, aber auf jeden Benutzer sollte auch eben dieses Problem-Menü kommen *g*

Nun bin ich irgendwie total wirr, weiß gerade überhaupt nicht mehr wo ich anfangen soll

 

[RioCoding]

Hast du denn schon mal was mit HTML und Javascript / jQuery gemacht?

Bleib erstmal bei deinen Benutzern mit einer Klasse und implementiere die Funktion, die beim Click-Event aufgerufen wird aus.
Ich weiß ja nicht, was dieses Menü überhaupt machen soll. Soll das eine Art Kontextmenü werden?

 

[sprefer]

Also HTML und PHP habe ich recht gute Kenntnisse. Daran scheitert es normal nicht, eher an JS/Ajax *g*

Also die Liste soll halt die Benutzer ausgeben, das habe ich ja soweit schon (siehe erstes Posting). Aber auf jeden benutzer soll eine Menü kommen, so in der art "onthefly" - ein Div was sich dann drüber legt und ein Menü beinhaltet.

 

[RioCoding]

Na dann musst du ja "nur" die Erzeugung des Menüs in die Funktion implementieren. Das ist in erster Linie HTML.
Am Ende musst du das fertigte Menü nur noch im DOM hinzufügen.

 

[sprefer]

*Kopfkratz*
Das ist ja genau das Problem. Ich habe eine Ausgabe der Benutzer. Aber wie ich das Öffnen des Menüs per JS schreiben muß weiß ich nicht. Daran scheitert es doch

Ein Menü kann ich ja per eigener PHP/HTML-Seite gestalten, die in das DIV geladen wird.

Ergänzung (15. November 2013)

Gut, wie man ein Div ein und ausblendet weiß ich, z.B. so:

function toggleDiv(element){
 if(document.getElementById(element).style.display == 'none')
  document.getElementById(element).style.display = 'block';
 else
       document.getElementById(element).style.display = 'none';
}

Aber da komme ich so nicht weiter.

Ergänzung (15. November 2013)

Ok andere Frage, habe gerade nach langem Suchen etwas gefunden.
Weiß nur nicht ob es sinnvoll ist, aber scheint mir plausibel, aber kann auch aus der Urzeit der Programmierungen zu sein.

Folgendes. Das Div wo die Benutzer ausgegeben werden:
ich schreibe mal in Kurzform

onclick="select_user($(this)

Das Menü:

<div id="user_menu" style="position:absolute; overflow:hidden; display:none;min-width:130px;">
<ul style="min-width:150px;">
<li onclick="local_time('');"><?php echo $lang['localtime'];?></li>
usw...

Die Funktion dazu

function local_time(name)
	{
		$.get('time.php?name='+name,function(data)
			{
				$(data).appendTo('#showbox');
				
			});
		$('#user_menu').hide();
	}

Es geht mir jetzt um den Ablauf, ich klicke einen Benutzer an, dort wird er mit this selektiert. Dabei wird ein Menü aufgerufen was auch den Namen des Benutzers übergibt. Ist dieser Weg sinnvoll? Habe es leider noch nicht zum Laufen bekommen, wenn es sinnvoll ist könnt ihr mir da noch Hilfestellung geben?

 

[Lawnmower]

das Menü kannst direkt in dem userlist.php machen, am besten erstellst Du das erstmal so dass es ganz "hässlich" bei jedem User zu sehen ist.
Dann blendest Du alle Menüs per CSS display:none aus.
Als nächstes musst Du eigentlich nur analog dem Beispiel oben mit dem Click einfach das Menü wieder einblenden.

Am einfachsten für uns wäre es wenn Du das ganze Projekt nimmst und öffentlich auf einem Webserver bereitstellen kannst (also so dass man es im Browser ansehen kann), für die Userdaten kannst ja ein paar Fake Beispiele nehmen.
Dann kann man Dir auch direkt helfen, so ist es alles andere als optimal.

 

[sprefer]

OK das ist glaube ich der sinnvollste Weg.
Ich lade es mal hoch und gebe noch einmal Bescheid

Ergänzung (15. November 2013)

Ok habs jetzt mal ganz einfach gemacht, ohne viel drumherum...
http:// sprefer.comeze.com/

 

[RioCoding]

Ist das Menü für jeden Benutzer dynamisch? Wenn nicht würde ich das Menü versteckt in der Seite implementieren und je nach Benutzer dementsprechend positionieren.
Was für Funktionen sind denn im Menü?

Ahja und versuche deine Code möglichst klar zu halten. Ich halte wenig davon mitten im HTML irgendwelchen PHP-Code zu schreiben.

 

[sprefer]

Hallo Rio,

also die Benutzer werden aus der userlist.php geholt:

$result = mysql_query("SELECT * FROM `users_online`");


while (list($id, $user_id, $user_type, $user_name) =
	mysql_fetch_row($result))

echo '<div class="user">' . $user_name . '</div>';

So werden die User ausgegeben. Je nachdem kann man ja auch da was ändern wie die Ausgabeliste erfolgt.

Die index.php

function user() {
    $.ajax({
	type: 'POST',
	cache: false,
    url: 'userlist.php',
    async: true,
    context: document.body,
    success: function(data) {
    $('#userlist').html(data);
    $(document).on('click', '.user', function() {
	alert('aha');//Hier muß die Funktion
	});
	window.setTimeout(function () {user();},1000);
    }
    });
}
user();

und

<div id="userlist" style=" width:500px; border: 1px solid #006">userlist</div>

 

[Daaron]

Verbesserungsvorschläge:
1.) schreib keine Inline-Styles für ein Element, dass eh eine ID hat. Damit verschwendest du nur Bandbreite
2.) Deine userlist.php wäre effizienter, wenn du JSON zurückgibst statt eines kompletten HTML-Abschnitts. Vor allem ermöglicht dir eine JSON-Notation, später mal mehr mit den Daten anzustellen, du bist viel flexibler. Den HTML-Code kannst du dann per JS beim User zusammenbauen.
3.) Wenn du schon eine Liste von Usern hast, dann ist von der Semantik her eine <div>-Suppe dafür falsch. Nimm ne unsortierte Liste.

 

[sprefer]

Hallo Admiral,

danke für Deine Antwort.

Ok mit Json hatte ich es auch schon mal getestet. Die Ausgabe bekomme ich hin, zumindest in der Datenbankabfrage. Nur mein Problem ist immer wieder wie ich in JS das abfange. Da habe ich wirklich Probleme. Denke aber Json wäre das Beste, aber ich brauch da wirklich Hilfestellung und einen kleinen Tritt in die richtige Richtung.

Ergänzung (16. November 2013)

Ok also dies wäre meine Datenbankabfrage:

$query_user = sprintf("SELECT id, user_id, user_name FROM users_online");
$user = mysql_query($query_user) or die(mysql_error());
$result = array();
while($row = mysql_fetch_assoc($user)){
$result[]= array(
'id' => $row['user_id'],
'user_id' => $row['user_id'],
'name'=>$row['user_name']
)
;}
echo json_encode($result);

Ergänzung (17. November 2013)

Bin noch ein Stück weiter gekommen, hier die JS-Function

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

 

[Daaron]

Na so klappt das nicht. So baust du ja ein komplettes <ul> pro User-Eintrag auf.

Machs lieber in etwa so:

<ul id="userlist">
<li class="loading"><img src="loading.gif" alt="loading content"></li>
</ul>

So sieht der HTML-Code vor der Abarbeitung des JS aus. Wichtig ist: Listen dürfen nicht leer sein.

Wenn JS dann zündet und du das erste Mal per AJAX deine Daten hast, entfernst du als erstes das li.loading aus dem DOM und schreibst deine Serverantwort rein (bestehend aus vielen vielen <li>s, ohne <ul>)

 

[sprefer]

Bin schon etwas weiter.

Und zwar so, gefällt mir noch nicht so ganz, aber funktioniert schon ein wenig

in der index:

<ul id="userlist" style=" width:500px; border: 1px solid #006"></ul>

die Function:

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 style="display:none"><ul><li>Menu</li></ul></div>';
                html += '<li class="user" id="'+data[i].id+'"> '+data[i].name+submenu+' </li>';
            }
        }
    $('#userlist').append(html);
    });
}, 3000);

$(document).on('click', '#userlist li', function() {
var li = $('#userlist li');
var index = li.index(this);
li.eq(index).find('div').fadeToggle('slow');
//alert('index')
});

Vorab die Frage, ist es denn so richtig?

Das Menü wird ausgegeben, allerdings innerhalb der Liste, ich hätte es gern schwebend über den Benutzernamen.
Und ich brauch im Menü weitere Functions, da muß man dann mal schauen, erst einmal wäre ich froh wenn mir jemand sagen kann ob das so richtig ist

 

[Daaron]

Wie ich schon sagte, ein leeres <ul></ul> (oder ol, dl) ist nicht valide. Listen müssen mindestens ein Listenelement beinhalten. Außerdem solltest du halt keine Inline-Styles verwenden.

Was deine Click-Events angeht: Ich würde das alles viel enger stricken, und natürlich stärker mit $(this) arbeiten. Du könntest z.B. sagen $('#userlist').on('click','li',function(){//dein Code}); DAs müsste genauso auf die Clicks reagieren, dabei aber weniger Speicher benötigen. Dein Click-Event sollte eigentlich "this" passend belegen, also kannste mit $(this).children('div.submenu') weiterarbeiten.... (also wenn dein Submenü die Klasse submenu hätte).
Ich hab übrigens festgestellt, dass man sich viel JS-Stress ersparen kann, wenn man den ganzen Styling-Kram nicht in JS macht, sondern per JS nur CSS-Klassen hinzufügt und entfernt.

 

[sprefer]

Hallo Daaron,

mit dem leeren ul meintest du sicher diesen Code:

<ul id="userlist" style=" width:500px; border: 1px solid #006"></ul>

Habs mit einem image per li versehen zum Laden. Wird auch mit

$('li.loading').remove();

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

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.

Kannst du mitr vielleicht nochmals mit dem Code helfen?

Ergänzung (17. November 2013)

Ah doch jetzt hab ich es verstanden

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

 

[RioCoding]

Was meine Frage noch war: Ist das Menü für alle Benutzer gleich?

Wenn ja, würde ich das schon beim Rendern der Seite erzeugen und verstecken. Sobald ein Nutzer ausgewählt wird, wird das Menü angezeigt. Das Menü kannst du dann mit CSS jeweils über und / oder neben dem Benutzernamen positionieren. http://www.w3schools.com/css/css_positioning.asp

 

[sprefer]

Nein je nach Benutzertyp sollte ein anderes Menü erscheinen. Und im Menü muß der Name oder die ID übergeben werden, sprich man will z.B. das Profil des Benutzers aufrufen dann muß ja eben die id oder der Name angehangen werden

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?