Jquery Formatierung, Anfänger Syntax Problem...?!

[Blaubär]

Hallo liebes Forum,

ich versuche gerade als Neuling ein wenig mit Jquery usw. herumzuspielen, nur leider hänge ich an einem, wie ich meine, blöden Anfängerfehler...
Ich habe eine kleine Anleitung gefunden, mit der man ein Xml ausliest und ausgibt, soweit funktioniert das auch erst einmal, nur wenn ich versuche die Ausgabe der Xml ein wenig zu formatieren, funktioniert nichts mehr.
Hier mal eine kleiner Einblick:

$ ("#mediaContainer").append("<li>"+title+"<p>"+id+" # "+description+" # "+genre+"</p></li>");

Diese Zeile soll dafür "sorgen", die Daten in das <div> mit der id=mediaContainer zu schreiben.
Ich möchte aber die gesamte Ausgabe noch mit dem <ul data-role="listview">Tag umschliessen, was aber nicht funktioniert.
Ich habe schon rumprobiert, und es ist mir auch gelungen an der richtigen Stelle das <ul data-role="listview"> einzufügen, nur dann
wird auch gleich das close-Tag </ul> direkt angefügt und der eigentlich Inhalt liegt dann nicht innerhalb des <ul>.
Habt Ihr einen Tipp, wie man das Problemchen lösen kann?
Bin für jede Hilfe dankbar

Viele Grüße Blaubär

 

[Jan-Frederik Stieler]

Hi,
warum nimmst du das UL nicht gleich in das .append mit rein?
Ansonsten kannst du dir mal .wrap() und .wrapAll() anschauen.

Viele Grüße

 

[Blaubär]

Hallo Jan,

vielen Dank für Deine Antwort. Dass in das .append mit rein zu nehmen hatte ich ja probiert, nur wurde das entweder ignoriert, oder das <ul> wurde sofort wieder geschlossen. Aber ich denke ja auch, dass ich das einfach von der Syntax falsch angestellt habe, und es deshalb nicht richtig funktioniert...
Zum .wrap: Muss das dann über "('.inner').wrap" aufgebaut werden?
Ich habe es jetzt auch mal so im <div> selbst probiert:

<div id="mediaContainer">
<script type="text/javascript">
$('#mediaContainer').wrap(function() {
return "<ul data-role='listview' >";
});
</script>
</div>

Dann liegt aber das <ul> ausserhalb des divs?
Ich checkes irgendwie nicht, sorry

Gruß, Blaubär

 

[Blaubär]

Ich verstehe es nicht! Egal was ich mache es kommt irgendwie nur Murks bei raus.

$ ("#mediaContainer").wrap("<ul data-role='listview' >").append("<li>"+title+"<p>"+id+" # "+description+" # "+genre+"</p></li>");

Hatte zwischendurch oberes probiert, klappt aber auch nicht.
Wieso werden im append eigentlich weitere Tags "verschluckt", wenn ich dort z.B. ein </ul> am Ende einbaue?
Ich möchte doch nur, alle durch die Xml-Datei erzeugten <li> Tags, mit einem <ul data-role='listview' ></ul> umschliessen.
Habt Ihr nicht noch einen Tipp für mich?

Viele Grüße
Blaubär

 

[Jan-Frederik Stieler]

Hi,
in deinem Fall ist natürlich .wrappInner() besser geeignet.
http://jsbin.com/alirev/3/edit

Wenn du das jQuery-Chaining verwenden willst dann bezieht sich dies natürlich auf den ersten Selektor,
in deinem Fall #mediaContainer.
Du kannst dein Vorhaben auch in zwei Schritte aufteilen mit

$ ("#mediaContainer").append("<li>"+title+"<p>"+id+" # "+description+" # "+genre+"</p></li>");
$ ("#mediaContainer li").wrap('<ul data-role='listview' >');

Find ich aber nicht gut. Inwiefern das von der Performance zu sehen ist weiß ich nicht.

Viele Grüße

 

[Blaubär]

Hallo Jan,

vielen Dank für Deine Hilfe, doch leider funktioniert das Codebeispiel bei mir nicht. Wenn ich das einbaue, wird im Firefox nichts von der Xml angezeit? Opera und Chrome zeigen aber etwas an, nur geht da alles durcheinander?

<div id="mediaContainer">
<li>
<ul data-role="listview">
<ul data-role="listview">
test1
<p>001 # bla # text</p>
</ul>
</ul>
</li>
<li>
</div>

Vielleicht ist ja auch meine Herangehensweise nicht so die Richtige, kennst Du, oder kennt vielleicht jemand, ein erst mal simples Tutorial um Inhalte aus einer Xml mit Jquery auszulesen und diese dann "halbwegs" formatiert darzustellen? Das Ganze sollte als WebApp funktionieren...

Gruß, Blaubär

 

[Jan-Frederik Stieler]

HI,
das Tutorial welches du verwendest zeigt ja doch eigentlich schon alles was nötig ist.
Ohne jetzt den gesamten Code von dir zu kenen ist es eigentlich recht schwer etwas zu deinem Problem zu sagen.

Grüße

 

[Blaubär]

Hallo Jan

<body>
<script type="text/javascript">

$(document).ready(function()
   {
 
        // ganze XML-datei einlesen und in variable 'XMLmediaArray' speichern
        $.get("xml.xml", function(XMLmediaArray){
 
         // suche nach jedem (each) 'bluray' abschnitt
        $(XMLmediaArray).find("bluray").each(function(){
 
        // gefundenen abschnitt in variable zwischenspeichern (cachen)
        var $myMedia = $(this);
        // einzelne werte auslesen und zwischenspeichern
        // attribute: funktion 'attr()'
        // tags: nach dem tag suchen & text auslesen
        var id = $myMedia.attr("id");
        var title = $myMedia.attr("title");
        var description = $myMedia.find("description").text();
        var genre = $myMedia.find("genre").text();
  
        // daten von jeden treffer ausgeben
        // unformatiert...nur zum zeigen!
        // append = inhalt/string dem kontainer anhängen
		
		$ ("#mediaContainer").append("<li>"+title+"<p>"+id+" # "+description+" # "+genre+"</p></li>");
		//$ ("#mediaContainer li").wrapInner("<ul data-role='listview' >");

	});
      });
    });   

   </script>

<div id="mediaContainer">

</div>
 <a href="mob1.html" data-role="button" data-inline="true">Back</a>
</body>

Ich hatte das folgende Tutorial als Basis verwendet:Link
Ich dachte ja auch, es würde sich etwas einfacher gestalten, die gewünschten Änderungen vorzunehmen - vielleicht etwas leichtsinnig
Gruß, Blaubär

 

[Jan-Frederik Stieler]

Hi,
also grundsätzlich sollte es so funktionieren:

        // ganze XML-datei einlesen und in variable 'XMLmediaArray' speichern
        $.get("xml/media.xml", function(XMLmediaArray){


        // suche nach jedem (each) 'bluray' abschnitt 
        $(XMLmediaArray).find("bluray").each(function(){

		
		    // gefundenen abschnitt in variable zwischenspeichern (cachen)
		    var $myMedia = $(this);
		
		
		    // einzelne werte auslesen und zwischenspeichern
		    // attribute: funktion 'attr()'
		    // tags: nach dem tag suchen & text auslesen
		    var id = $myMedia.attr("id");
		    var title = $myMedia.attr("title");
		    var description = $myMedia.find("description").text();
		    var genre = $myMedia.find("genre").text();
		
		
		    // daten von jeden treffer ausgeben
		    // unformatiert...nur zum zeigen!
		    // append = inhalt/string dem kontainer anhängen        

			var container   = $('#mediaContainer'),
			      xmlOutput = "<li>"+title+"<p>"+id+" # "+description+" # "+genre+"</p></li>",
			      wrapper   = '<ul data-role="listview" >';
		    
		    container.append($(wrapper).append(xmlOutput));
		    
		   });
		});

Nur scheinbar gibt es ein Problem bei den dynamisch generierten <li>.
Diese stehen so nicht der Dom zur Verfügung. Das kannst du mit console.log($('#mediaContainer li').length); dir in der Konsole ausgeben lassen.

Ich muss dir aber sagen das ich jetzt auch mit meinem Latein am ende bin. Bin auch nciht so der Javascript-Crack. Vielleicht findet sich ja noch jemand der etwas mehr Ahnung hat als ich?

Viele Grüße

 

[Blaubär]

Hallo Jan,

1000Dank für Deine Mühe !
Ich werde das gleich mal testen, habe auch schon ein weiteres Bespiel ausprobiert Link
Komischerweise stellt sich dort das gleiche Problem, zwischendurch schaffe ich es die <ul>-Tags mit einzubauen, dann werden sie aber der Anzahl der Xml-Nodes entsprechend dupliziert...?

Viele Grüße
Blaubär