eigentlich eine Perl/Ajax/jQuery Frage

[dobra]

Hallo,

ich versuche mal, mein Problem verständlich zu beschreiben...

Es geht darum, dass je nach gewählten Suchoptionen unterschiedliche Ergebisse (= Anzahl der angezeigten Artikel unbekannt) ausgegeben werden sollen.
in ajax.ipl habe ich bisher so gemacht (und es hat funktioniert :) )

...  
...  
      $result{_artikel} .= qq|  
  
	 <div class="box2d"  style=" margin:0 10px 20px 7px;">  
		<div style="text-align:left; font-size: 13px; font-weight:bold; padding: 7px 0 2px 10px; color:black;">$detaillink</div>  
			<table width="185">  
				<tr>  
					<td width="75">$imglink</td>  
					### her die komplette HTML-Tabelle  
				</tr>	  
			</table>  
		### und noch ein paar divs	  
	</div>	  
          |;  
  }						  
  
  print JSON::objToJson(\%result);			  
}

mit

        var result_ergebnis = data['_artikel']; //Such-Resultate übergeben  
		document.getElementById("showresult").innerHTML = result_ergebnis;

in der ajax.js Datei wurden dann die Artikel fertig in der der CSS-formatierten Box ausgegeben.
(... und ich war so stolz, dass ich das alleine hin gekriegt habe ;) )

Jetzt hat mir aber ein Programmierer gesat dass das *falsch* ist, wie ich es mache :(
-> also keine kompletten HTML-Konstukte durch die Leitung schicken soll, sondern NUR die Artikeldaten und daraus dann mit jQuery (habe ich installiert und verwende es auch z.B. für Preis-Slider etc) die Ausgabe der Suchergebnisse basteln soll.
... nur WIE ich das machen soll, hat er mir nicht gesagt und beim googeln habe ich auch keinen brauchbaren Lösungsansatz gefunden (oder nicht nach den richtigen Begriffen gesucht)

Habe es jetzt soweit geändert, dass die Ajax-Antwort so ausschaut:

  
  
{"_artikel":[  
	{id: 'testartikel1', price: '1.95', descr: 'testbeschreibung 1', img: 'bilder/bild1.jpg'},  
	{id: 'testartikel2', price: '5.70', descr: 'testbeschreibung 2', img: 'bilder/bild2.jpg'},  
	{id: 'testartikel3', price: '0.95', descr: 'testbeschreibung 3', img: 'bilder/bild3.jpg'},  
	...  
	{id: 'testartikel99', price: '3.50', descr: 'testbeschreibung 99', img: 'bilder/bild99.jpg'}  
]}

(steht alles in einer Zeile, habe das nur der beseren Lesbarkeit halber jetzt so geschrieben)

aber jetzt komme ich nicht weiter :(
habe nicht die leiseste Idee, wie ich DAMIT jetzt eine HTML-Ausgabe basteln soll ???

Kann mir vielleicht hier jemand helfen?

lg
dobra

[Matti Mäkitalo]

Hi,

Jetzt hat mir aber ein Programmierer gesat dass das *falsch* ist, wie ich es mache :(
-> also keine kompletten HTML-Konstukte durch die Leitung schicken soll, sondern NUR die Artikeldaten und daraus dann mit jQuery (habe ich installiert und verwende es auch z.B. für Preis-Slider etc) die Ausgabe der Suchergebnisse basteln soll.

Ich habe beide Methoden benutzt (also entweder fertige HTML-Schnippsel ausgeliefert oder nur JSON-formatierte Daten, welche ich dann mit DOM-Methoden in die Seite eingepflegt habe). Beide Methoden haben Vor- und Nachteile, ich würde nicht eine als "falsch" herausstellen wollen.
Grundsätzlich bist du mit der "auf JS-Seite zusammenbauen"-Methode flexibler, insbesondere, wenn mehr als ein Abschnitt der Datei verändert werden soll.
Andererseits erkaufst du dir diese Flexibilität mit deutlich Mehraufwand, wenn du pure DOM-Methoden nutzen willst (also nicht per innerHTML), und bei innerHTML machst du am Ende nur das, was du serverseitig schon hättest tun können.

Wenn die Veränderungen der Seite "lokal" sind (d.h., nur ein bestimmter Abschnitt eingefügt/ausgetauscht wird), dann würde ich dir die Servermethode empfehlen.
Ich sehe bei der anderen Methode, dass zuviel Markup in der Javascript-Komponente landet, dass macht es IMHO ein wenig schwerer zu lesen. Ist aber eine Geschmacksfrage.

... nur WIE ich das machen soll, hat er mir nicht gesagt und beim googeln habe ich auch keinen brauchbaren Lösungsansatz gefunden (oder nicht nach den richtigen Begriffen gesucht)

Nun, zwei Stichworte habe ich genannt: reine DOM-Methoden oder die innerHTML-Methode.

Bei der DOM-Methode generierst du mit http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=document.createElement() Elementknoten, fügst deine Daten dann ein und hängst sie ins DOM ein.

Bei der innerHTML-Methode baust du dir den String, den du vorher mit Perl gebaut hast, halt mit Javascript zusammen.

Bis die Tage,
Matti

[hotti]

hi,

[JSON]

aber jetzt komme ich nicht weiter :(
habe nicht die leiseste Idee, wie ich DAMIT jetzt eine HTML-Ausgabe basteln soll ???

Deine Herangehensweise ist mir schleierhaft. Du erzeugst eine erstklassige JSON-Response und machst Dir danach Gedanken, wofür die gut ist?

Ok, da war irgendwo eine versteckte Hilfe ;-)

Die Response kann entweder mit eval() oder mit einem Parser in ein DOM-Objekt transformiert werden, es wird sich hieraus ein Array mit Objekten ergeben, die Attribute haben wie 'id', 'price', 'descr', 'img'. Kurz und schmerzfrei kann ein DOM-Element über die 'id' angesprochen werden, in Deinem Fall böte es sich an, für Tabellenzellen (als Beispiel) dieselbe 'id' zu vergeben, wie schon in der Response steht, damit erfolgt dann die Wertzuweisung in der Callback-Funktion. Wenn alles zueinander passt, macht das eine Schleife.

Hth,
Hotti

[Matti Mäkitalo]

Hi,

[JSON]
Die Response kann entweder mit eval() oder mit einem Parser in ein DOM-Objekt transformiert werden,

Da der OP sowieso jQuery verwendet: einfach die Ressource serverseitig mit dem Content-Type "text/json" ausliefern, dann macht jQuery das von alleine.

Bis die Tage,
Matti

[hotti]

Hi Matti,

[JSON]
Die Response kann entweder mit eval() oder mit einem Parser in ein DOM-Objekt transformiert werden,

Da der OP sowieso jQuery verwendet: einfach die Ressource serverseitig mit dem Content-Type "text/json" ausliefern, dann macht jQuery das von alleine.

ja, einwandfrei, danke!!!

Mit jQuery bin ich (noch) nicht so vertraut, wehe, wenn mich dieser "Virus" erwischt ;-)

Hotti