JavaScript dynamisches Menü erstellen (Daten kommen per Ajax)

[ismon]

Hallo zusammen,

ich habe folgendes vor.

Ich möchte über ein HTML Form Daten erfassen (z.B. Namen von RSS Feeds) und diese in einer DB speichern.
Die erfassten Namen sollen direkt nach dem erfassen auf der gleichen Seite in einer Liste ausgegeben werden. Dazu lade ich, nach dem speichern eines Namens, die komplette Liste aller Namen per Ajax und zeige diese an.
Das machen ich indem ich die Antwort des Ajax Request einem DIV Element zuweise.
Das funktioniert auch ohne Problem.

Nun möchte ich aber das beim Klick auf einen Namen aus der Liste eine JavaScript Funktion ausgeführt werden.
Das funktioniert aber leider nicht.

Meine PHP Datei welche das Ergebnis des Ajax Request liefert, erzeugt folgendes echo:

while ($row = mysql_fetch_object($FeedList)) {

$countNews=NewsCount($row->ID,$userID);
$Feedtitle=substr($row->feedTitle,0,19);
echo ("<a href='#' onclick='setRequest($feedID,'1')'>$Feedtitle [$countNews]</a><br>");
			
}

Auf der Hauptseite gibt es ein dann eine ensprechende JavaScript Funktion welche die Antwort des Request einem DIV zuweist:

var FeedList = request_FeedList.responseText;
document.getElementById('FeedList').innerHTML =FeedList;

Als Ausgabe bekomme ich dann auch eine Liste aus den entsprechenden Einträge als Links aber beim Klick wird die JavaScript Funktion (setRequest()) nicht ausgeführt.

Ich denke es liegt daran das ich die Ausgabe einem DIV zuweise.

Wie könne ich mein Vorhaben lösen. Hat einer ne Idee?

Gruß
Simon

 

[Daaron]

Was sagt denn die JS-Konsole? Im Zweifel haste einen trivialen Fehler in setRequest().

 

[omaliesschen]

Hi,

Daten aus Ajax requests werden nicht ohne weiteres mit schon vorhandenem JS erfasst. Der einfache Weg wäre es das entsprechende Skript mit in das echo zu setzen. Damit würde es zusammen mit dem Request geladen und würde funktionieren.

Mit jquery kann man die live() Methode verwenden.

 

[Spike S.]

In verschiedenen Browsern das gleiche Verhalten?

Noch zum Ansatz: Ajax ist eine praktische Sache um Platz und Traffic zu sparen. Daher würde ich nicht eine Liste von Links schicken, sondern eine Liste von Einträgen und damit die Links per JS erstellen. Der a-Tag in deinen ausgetauschten Daten ist ja so ziemlich redundant. Durch die Möglichkeit im JSON Format Daten auszutauschen, kann man sich auf das wesentliche (Daten) konzentrieren und hat im JS ein doch recht nützliches Objekt zum bearbeiten. Bei Interesse kann ich gern näher darauf eingehen.

 

[ismon]

Erstmal vielen Dank für die schnellen Antworten.

Das Verhalten ist in allen Browsern gleich. Die Java Script Console gibt beim Klick auf einen entsprechenden Link folgendes aus:
Uncaught SyntaxError: Unexpected token "," ..../showfeed.php:1

Ich kann mir die Meldung aber nicht erklären...

showfeed.php ist die Seite von der alles ausgeht.

Einen Fehler in setRequest() kann ich, denke ich, aus ausschließen weil die Funktion funktioniert wenn ich einen Link mit onclick direkt erzeuge (ohne das die Daten per Ajax kommen und einem DIV zugewiesen werden).

Grundsätzlich habe ich auch schon daran gedacht per Ajax nur eine Liste mit den Einträge zu laden (z.B. per XML oder Json) und dann in der JavaScript Funktion die den Request auswertet pro Eintrag in der Liste einen Link zusammenbaue.
Aber da ich ziemlicher Neuling im bereich JavaScript und Ajax bin fehlt mir irgenwie die Idee zu Umsetzung.

 

[Spike S.]

Welche Zeichenkodierung hat showfeed.php? Wenn es UTF8 sein soll, ist zu empfehlen die Dateien mit UTF8 ohne BOM zu speichern. Einen komischen Fehler in Zeile 1 konnte ich damit mal beseitigen.

Bei der JSON Lösung wird auf der php Seite ein JSON String ausgegeben, statt dem HTML Code. Den kann man manuell per Stringverknüpfung erstellen oder besser alles in einem PHP Array sammeln und dann per json_encode den String für die Ajax antwort ausgeben.
Beispielausgabe:

{ 'feeds': [ {'id':1, 'title':'Feed A', 'newscount':4}, {'id':2, 'title':'Feed B', 'newscount':2} ] }

In Javascript kann man dann wunderbar über das Objekt drüberlaufen (vorausgesetzt, in der Ajax Funktion als JSON Objekt korrekt übernommen):

for(i=0; i < feeds.length; i++) {
	alert(feeds[i].id + ": " + feeds[i].title);
}

Links erzeugen ist dann die leichte Übung, kommt nur drauf an ob JS nativ eingesetzt wird oder ein Framework genutzt wird. Letzteres macht das Erstellen der Links, i.d.R. dann auch noch mal eine Ecke leichter.

 

[ismon]

Vielen Dank, ich denke ich werde es über Json versuchen.

Dazu bräuchte ich aber nochmal deine Hilfe.

Ich habe zum Test jetzt folgendes.

eine Index.html mit folgendem Inhalt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>

<script type="text/javascript" src="JQuery.js"></script>

<script type="text/javascript">

function test(){

$.ajax({
type: "json",
url:  "getFeedList.php",
data: {},
success: function(result)
{

 
  document.getElementById('feeds').innerHTML =result;

}
});

}

</script>


</head>
<body onLoad="test();">


<div id="feeds"></div>


</body>
</html>

Und folgende PHP getFeedList.php (Auszug):

$i=0;
while ($row = mysql_fetch_object($FeedList)) {


$countNews=NewsCount($row->ID,$userID);
$Feedtitle=substr($row->feedTitle,0,19);


$test['feeds'][$i]=array('ID'=>$row->ID,'title'=>$Feedtitle,'count'=>$countNews);

$i++;			
}	

echo json_encode($test);

Mit dem aktuelle Code bekomme ich in der Index.html folgenden json Array ausgegeben:

{"feeds":[{"ID":"1","title":"SPIEGEL ONLINE - Sc","count":69},{"ID":"2","title":"SPIEGEL ONLINE - Na","count":25},{"ID":"3","title":"ComputerBase","count":32},{"ID":"4","title":"Golem.de","count":51}]}

Jetzt bräuchte ich noch einen Tipp wie in der success Funktion von der JQuery Ajax Funktion an die einzelnen Teile des Array drankommen.
Mit deiner For-Schleife klappt es irgendwie nicht.
Oder ist mein Array nicht korrekt?

Danke schonmal.

Ergänzung (15. Mai 2013)

Ich glaube ich habe gefunden:

var Test=JSON.parse(result);
alert(Test.feeds[3].title);

Ich test noch bissel was.

 

[Spike S.]

So schon halbwegs richtig, jedoch:

• In der Ajax Funktion heißt der Parameter "dataType": "json", nicht nur "type"... (type ist der HTTP Header Typ, GET ist hier Standard)
• Dadurch war es nötig im Success JSON.parse zu verwenden. Du bekommst so nämlich einen einfachen String zurück
• mit dem richtigen dataType brauchst du nicht mehr parsen, "result" ist dann schon das fertige Objekt (vorausgesetzt ein valider JSON String wird von der PHP erzeugt)
• ich sehe du nutzt JQuery, hervorragend!

Was passiert mit meiner Schleife bei dir? Sollte so eigentlich laufen:

...
success: function(result) {
	for(var i=0; i < result.feeds.length; i++) {
		var nLine = $("<a>").attr("href","#").html(result.feeds[i].title + " (" + result.feeds[i].count + ")" ).append( $("<br>");
		$(nLine).on("click", setRequest( result.feeds[i].ID ,'1') );
		$("#feeds").append( nLine );
	}
}
...

Ich hoffe dieses onclick wird so korrekt zugewiesen, bin mir da immer nicht so absolut sicher.

Und noch eine generelle Bemerkung: leider ist es notwendig bei dieser Lösung alle PHP Meldungen im Ajax Gegenpart abzuschalten. Wenn PHP irgendwelche Meldungen ausgibt ("Warning Line X: ..."), ist dies ja kein JSON. Auch im Fall du machst irgendwelche Test-echos/var_dumps. Das "result" in deinem Fall ist dann glaube ich einfach komplett leer und success wird nicht aufgerufen. Beim genauen Verhalten von JS in solch einem Fall, bin ich mir aber nicht so sicher. Lässt sich aber relativ einfach herausfinden.

Und noch ein Tipp: F12 drücken
Im Firefox (mit Firebug) und Chrome hat man dadurch äußerst hilfreiche Entwicklerwerkzeuge. Hier kannst du bei beiden Browsern dir auch direkt den Anfrage- und Antwort-Header (in Rohform) anschauen, falls nicht klar ist warum JS nicht macht was du erwartest.