JavaScript Daten aus JQuery load Methode in eine unordered list

[hi-tech]

Habe links auf einer Seite a, die ich auf Seite b darstellen möchte.

Die links auf Seite a haben ungefähr das Format:

<ol class='sp'>
   <li><a href="url1" class="nw">bla1</a></li>
   <li><a href="url2" class="nw">bla2</a></li>
   <li><a href="url3" class="nw">bla3</a></li>
</ol>

Auf Seite b befindet sich ungefähr dies:

<div id="sec"></div>

function zeige(){
   $("#sec").load("url a.nw");
}

Angezeigt wird dann:
bla1bla2bla3

Es sind zwar 3 für sich anklickbare Links, aber ich hätte sie gerne in einer Liste untereinander.

Quasi so:
bla1
bla2
bla3

Saß jetzt stundenlang daran und hab schon einiges ausprobiert und komme einfach nicht drauf.
Bin nicht so bewandert was Javascript angeht und bin für jede Hilfe dankbar

 

[Umbel]

Wenn das laden der Links ja scheinbar klappt, warum lädst du dann nicht einfach direkt die li's und packst sie in eine ul?

 

[hi-tech]

Mit der load Methode werden alle a's der class="nw" auf einmal in die div mit der id="sec" gepackt, weil ich dann genau die Links bekomme die ich brauche.
Würde ich mir alle li's raussuchen bekomme ich auch viele, die ich nicht möchte.

Das Beispiel auf http://api.jquery.com/load/ habe ich auch gesehn, falls du darauf anspielst.
Oder kann ich mit zusätzlichen selectors die li's raussuchen, die die a's beinhalten mit der class="nw"?

Wenn ja dann wie? Habe dies nämlich auch schon versucht und bin nicht auf die Lösung gekommen.

 

[Madman1209]

Hi,

nutze die Callback-Funktion "complete" wie in der API beschrieben und arbeite mit dem Antwort-Text, den dir der Server liefert. Schau dazu einfach nach, ob das drei einzelne Objekte sind in deinem Fall oder ob es einfach nur ein zusammenhängender String ist. Je nachdem machst du entweder eine Schelife, die über die Objekte iteriert oder splittest den String eben nach den "</a>" auf und verpackst dann die einzelnen Links in <li>.

Ist jetzt ohne Gewähr, da ich schon länger nicht mehr mit jQuery gearbeitet habe. Aber so sollte das Prinzip aussehen. Die Antwort, die vom Server kommt, nicht einfach stumpf in das <div> packen sondern eben damit weiter arbeiten.

VG,
Mad

 

[hi-tech]

Naja das Prinzip ist mir schon klar, hab es deswegen auch mit $.get versucht, da mit .load anscheinend das Bearbeiten des Geladenen bevor es gesendet wird nicht möglich ist.
Habe auch versucht das Ergebnis in eine Variable zu packen und dann durch zu iterieren, wobei mir dann nur "undefined" angezeigt wird.

Bekomms einfach nicht hin..., aber danke euch trotzdem, werds einfach mal weiter versuchen.

 

[Madman1209]

Hi,

was hast du denn in der Callback Methode "complete" als Antwort vom Server? Was genau steht da drin, was genau ist das?

VG,
Mad

 

[hi-tech]

Habe mir den responseText in einer Div anzeigen lassen, was einfach nur die Liste ausgibt wie man sie auf Seite a sieht, jedoch so als ob man ein Screenshot davon gemacht hat.

$("#div_a").load("url", function(t, s, j){
   document.getElementById("div_b").innerHTML = t;
});

Hat mir irgendwie nicht weitergeholfen. Kann man den Inhalt noch anders prüfen?

So werden übrigens nur die gewünschten Links in einer Liste angezeigt:

function zeige(){
   $("#sec").load("url ol.sp li");
}

Wie man die einzelnen Elemente anspricht würde mich trotzdem interessieren. Es muss ja einen Weg geben diese selber zu verarbeiten, so wie man es möchte.

Edit:
Achja hatte eine Lösung in php wo ich per DOMDocument und loadHTMLFile die Seite hole und dann einfach mit $doc->getElementsByTagName, foreach($result as $item, explode() usw. an das gewünschte Ergebnis komme, jedoch musste ich auf ein anderen Webhoster umziehen, wo das nutzen dieser DOM Funktionen über php erst ab pro-Version freigeschaltet ist. Deswegen suche ich eine Lösung in Javascript.

 

[Madman1209]

Hi,

Habe mir den responseText in einer Div anzeigen lassen

dann lass das doch bitte mal mit dem <div> und anzeigen lassen und benutz die Entwicklertools der Browser, um da mal Klartext zu haben!

VG,
Mad

 

[hi-tech]

Bei meinem ursprünglichen load ist genau das drin:

<a href="url1" class="nw">bla1</a>
<a href="url2" class="nw">bla2</a>
<a href="url3" class="nw">bla3</a>

Daher auch das einfache hintereinander reihen der Links.
li-tags oder Umbrüche wären hilfreich, nur wie komme ich an die Elemente?

Edit:
Ach und danke für den Hinweiß auf die Entwicklertools, hab ich total verdrängt dass es die gibt ^^
Wie gesagt Webentwicklung ist nicht mein Gebiet

 

[Madman1209]

Hi,

li-tags oder Umbrüche wären hilfreich, nur wie komme ich an die Elemente?

nochmal: was hast du in der Callback Methode denn als Übergabeparameter? Damit müsstest du arbeiten können.

VG,
Mad

 

[hi-tech]

Ich sehe nicht wie mir die Callback Methode helfen soll, in diesem Fall.
"If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed."
Alle Beispiele im Netz zeigen auch, dass diese Methode anscheinend nicht für die Formatierung oder Bearbeitung des Inhalts genutzt wird, sondern nur für weitere Prozesse nach dem Einfügen.

Es muss eine Methode geben wo ich den Inhalt bearbeiten kann bevor es eingefügt wird. Ich glaube .load ist hier nicht dafür geeignet.
Oder zeig mir doch bitte ein Beispiel aus dem Netz.

 

[MoOderSo]

Nimm get.
https://api.jquery.com/jquery.get/

 

[hi-tech]

Hier alle 4 Lösungen, die ich gefunden hab:

1:

<div id="sec"><ol id="secList"></ol></div>

function zeige(){
   $("#secList").load("url ol.sp li");
}

2:

function zeig(){
   $("#sec").load("url a.nw, function(data){
      $(".nw").after("<br/>");
   }
}

3:

<div id="sec"><ol id="secList"></ol></div>

function zeig(){
   $("#secList").load("url a.nw, function(data){
      $(".nw").wrap("<li></li>");
   }
}

4.

function zeig(){
   $.get("url", function(data){
      $(data).find(".nw").append("<br/>").appendTo("#sec");
   }
}