Liste mit jQuery/Ajax erweitern

[augentier]

Hallo,

ich brauche für ein Projekt eine Liste die sich dynamisch mit jQuery/Ajax erweitert.

Ich habe also eine ganz normale Liste

<ul>
  <li>vor 1 Minuten: Lorem ipsum</li>
  <li>vor 4 Minuten: dolor sit</li>
  <li>vor 6 Minuten: Blabla</li>
  <li>vor 10 Minuten: Der Hahn ist tot</li>
</ul>

Zu dieser Liste sollen jetzt neue Listenelemente (per jQuery/Ajax) hinzugefügt werden.

<ul>
  <li>vor 8 Sekunden: noch neuer Nachricht</li>  <!-- Per jQuery/Ajax hinzugefügt -->
  <li>vor 20 Sekunden: Neue Nachricht</li>  <!-- Per jQuery/Ajax hinzugefügt -->
  <li>vor 1 Minuten: Lorem ipsum</li>
  <li>vor 4 Minuten: dolor sit</li>
  <li>vor 6 Minuten: Blabla</li>
  <li>vor 10 Minuten: Der Hahn ist tot</li>
</ul>

Mir ist es bereits gelungen mit Ajax/load die Liste zu ersetzten. Manupulation/prepend hat leider auch nicht funktioniert.

Ich bin ziemlich unerfahren in JavaScript, mit Ajax arbeite ich zum ersten mal. Ich hoffe ich konnte trotzdem mein Problem verständlich schildern.

 

[LowkaZ]

AW: Liste mit jQuery/Ajax erweitern

HTML

<ul>
<li>vor 1 Minuten: Lorem ipsum</li>
<li>vor 4 Minuten: dolor sit</li>
<li>vor 6 Minuten: Blabla</li>
<li>vor 10 Minuten: Der Hahn ist tot</li>
</ul>

Javascript

jquery('ul').prepend('<li>Hello World</li>');

 

[augentier]

AW: Liste mit jQuery/Ajax erweitern

Manupulation/prepend hat leider auch nicht funktioniert.

Normalen Text hinzuzufügen habe ich bereits geschafft, aber der Text soll ja praktisch aus einer anderen Datei kommen (Ajax) und das funktionierte nicht.

 

[FlashSoft]

AW: Liste mit jQuery/Ajax erweitern

Schau dir doch mal dieses Tutorial an.



FlashSoft

 

[sokie]

AW: Liste mit jQuery/Ajax erweitern

Normalen Text hinzuzufügen habe ich bereits geschafft, aber der Text soll ja praktisch aus einer anderen Datei kommen (Ajax) und das funktionierte nicht.

it es nicht unerheblich, ob dein Text 'normal' da eingefügt wird, oder das Ergebnis eine Requests ist?

//ein String
[B]prepend[/B]("<b>Hello </b>");

//inhalt einer variable

var meineVar = "<b>hallo Welt</b>";

[B]prepend[/B](meineVar);

meineVar könnte genauso auch ein String sein, den du aus deinem httpRequest holst, oder ?

Schau dir doch mal dieses Tutorial an.



FlashSoft

da hat jquery auf der Homepage selbst eine bessere Dokumentation.

 

[augentier]

AW: Liste mit jQuery/Ajax erweitern

Ja soweit habe ich das auch verstanden.

Folglich müsste folgender Code funktionieren. Tut er aber nicht.

  var meineVar = load("feed.php");
  $("ul").prepend(meineVar);

Allerdings funktioniert das:

  $("ul").load("feed.php");

 

[uracil]

AW: Liste mit jQuery/Ajax erweitern

Ja soweit habe ich das auch verstanden.

Folglich müsste folgender Code funktionieren. Tut er aber nicht.

  var meineVar = load("feed.php");
  $("ul").prepend(meineVar);

Allerdings funktioniert das:

  $("ul").load("feed.php");

der grund is, dass prepend das dann vor das DOM element "ul" hängt, also nicht in die liste.
was du machen kannst, ist die alten inhalte auslesen, deins anhängen und wieder schreiben.
is zwar ein kleiner workaround, aber so würde ich es machen.

var old = $('ul').html();
var neu = "<li>test</li>" + old;
$('ul').html(neu);

(das funktioniert bei mir)

oder mit der ajax load funktion:

var old = $('ul').html();
var neu = load("feed.php") + old;
$('ul').html(neu);

(das hab ich nicht ausprobiert)

Hoffe ich konnte helfen.

Grüße,
uracil

 

[augentier]

AW: Liste mit jQuery/Ajax erweitern

Hab's jetzt hinbekommen.
Altes auslesen und dann den Ajax-Inhalt hinten anhängen.

Musterlösung

$(document).ready(
function feed(){
var $old = $("ul").html();
$("ul").load('feed.php',function(){ 
        $(this).append($old); 
	});
setTimeout(feed, 1000);	
}
);

@uracil
Deins wird wahrscheinlich nicht funktionieren, da load() immer direkt nach den Selektoren stehen muss.

 

[uracil]

AW: Liste mit jQuery/Ajax erweitern

na gut
wieder was gelernt^^