[GELÖST] XML Parsen und auswerten

mikdoe · 14. Juni 2014

Ich weiß im Moment nicht so recht, wo wie und was. Deine Beiträge sind so lang. Kannst du das aktuelle Problem irgendwie kürzer fassen? Vielleicht auch Code online stellen zum probieren?

j-l-n · 14. Juni 2014

Eine Anmerkung am Rande:
wert = unescape(wert).replace("+", " ");:

The escape() function was deprecated in JavaScript version 1.5. Use encodeURI () or encodeURIComponent() instead.

dbarthel · 14. Juni 2014

mikdoe schrieb:
Ich weiß im Moment nicht so recht, wo wie und was. Deine Beiträge sind so lang. Kannst du das aktuelle Problem irgendwie kürzer fassen? Vielleicht auch Code online stellen zum probieren?

Das aktuelle Problem ist, das, die im Script-Bereich "build container for each" erstellten Container 1. nicht richtig die Display-Attribute geändert bekommen.
Am Anfang wird ja je Provider ein sichtbarer Container mit dem Hinweise Anbieter nicht verfügbar und je ein unsichtbarer Container mit dem ID content ausgegeben.
Im Bereich "now we change visible" wird für die Provider die die ID haben der Container für den Link sichtbar gemacht und der andere unsichtbar. (Was nicht funktioniert)
2. Ausserdem soll im Bereich "attach" via $(.content).html.attend der Link aus der Variablen Link in den Bereich mit der ID content angehängt werden, dies allerdings geschieht nicht.

Online stellen kann ich erst nach dem Wochenende, aber zum Testen ist die Variable wert ja fest definiert im Script, sollte also auch offline gehen.

Vielleicht kann sich jemand das Script, welches komplett in einem meiner letzten Post ist kopieren und testen, ansonsten stelle ich es nach dem WE online.

mikdoe · 14. Juni 2014

Wenn du hier eine vollständige Seite postest kopier ich mir die und probier es aus.
Vorher noch eine Frage: Steht was in der Browser Fehlerkonsole?

dbarthel · 15. Juni 2014

mikdoe schrieb:
Wenn du hier eine vollständige Seite postest kopier ich mir die und probier es aus.
Vorher noch eine Frage: Steht was in der Browser Fehlerkonsole?

Kann ich dir jetzt gar nicht sagen, habe gestern nur kurz vom Handy aus reingeschaut. Ich stelle morgen den code online bzw. poste hier die Seite komplett, bin am WE nicht am PC.
Schönen Sonntag noch.

dbarthel · 16. Juni 2014

Ok, ich poste mal die gesammte Seite:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Testseite</title>
<script type="text/javascript" src="../../Main-Theme/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../../Main-Theme/js/jquery.main.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>

          <div id="no-js" class="no-js">
          <p class="no-js">Kein Javascript</p>
          </div>


</body>
</html>

Die Test.js enthält den Code für mein Script, ich habe dieses als TXT an diesen Post angehängt.
Die anderen beiden JS-Dateien stellen nur die nötigen JQuery-Bibliotheken bereit, habe vorsorglich die benötigte Datei mit angehängt, die andere wird nicht benötigt.

Außerdem nochmal der Code der JS-Datei komplett:

Code:

var wert="111", provider, id, link="";
var providerliste = [];
var linkliste = [];
var htmlStructure ="";
var linkStructure ="";

function Werteliste (querystring) {
if (querystring == '') return;
  var wertestring = wertestring.slice(1);
  var paare = wertestring.split("&");
  var paar, name, wert;
  for (var i = 0; i < paare.length; i++) {
    paar = paare[i].split("=");
    wert = paar[0];
    wert = unescape(wert).replace("+", " ");
    return wert;
  }
}

$(document).ready(function() 
{
 //lets pickup the string into the location
//wert = new Werteliste(location.search);
 //lets load our links
 $.ajax(
 {
 type: "GET",
 url: "links.xml",
 dataType: "xml",
 success: function(xml){
 //lets do some reading
  $(xml).find('provider').each(function()
  {
  provider = $(this).find("text").text();alert(provider);
  console.log($(this).find("text").text());

  // build a vissible container for each provider with default blured content and a invisible container, which will later contain the link, next to it
  htmlStructure = htmlStructure + '<div id="'+provider+'_off_holder" style="width:300px;height:30px;display:block; background-image:url(../../Main-Theme/images/"'+provider+'"_logo.png); z-index:90;"><div id="'+provider+'"_content" style="width:100%;height:100%;"><p class="">ID '+wert+' nicht vorhanden.</p></div></div><div id="'+provider+'_on_holder" style="width:300px;height:30px;display:block; background-image:url(../../Main-Theme/images/"'+provider+'"_logo.png); z-index:90;"><div id="'+provider+'"_content" style="width:100%;height:100%;"> vorhanden </div></div>';
  
  //replace the no-js-place-holder into the calling document
  $(".no-js").html(htmlStructure);

  $(this).find("option").each(function() 
  {
  id = $(this).find("id").text();
  if (id == wert)
    {
     link = $(this).find("link").text();//alert(link);//alert(provider);
     console.log($(this).find("link").text());console.log(provider);
     providerliste.push(provider); //stores the provider(s) name(s) which have the ID
     linkliste.push(link); // stores the link(s) 
    }
  });
 });

for (i = 0; i < providerliste.length; i++)
 {
  // makes the default-blur-container invisible and the place-holder-container visible, for this providers, which have the ID
  //$('."+providerliste[i]+"_off_holder').hide(); 
//document.getElementById(providerliste[i]+"_off_holder").style.display = "none";
  //$('."+providerliste[i]+"_on_holder').show(); 
//document.getElementById(providerliste[i]+"_on_holder").style.display = "block";

  // now we create for each link a new code, which will go into the placeholder into the providers-containers. to make the container clickable, we place an transparent picture over the container
  linkStructure = linkStructure + '<a href="'+linkliste[i]+'" class=""><img src="http://forum.jswelt.de/Main-Theme/images/transparent.png" style="width:100%;height:100%;z-index:110;"></image>Test</a>';

  //attach the links into the providers-containers
  $("."+providerliste[i]+"_content").append(linkStructure); 

// $("").html(linkstructure).appendTo(providerliste[i]+'_content');
 }

},
error: function(response)
{
 alert('Error loading XML data');
}
});
});

im Bereich " // build a vissible container for each provider with default blured content and a invisible container, which will later contain the link, next to it"

habe ich zu Testzwecken, die Sichtbarkeit beider Container auf sichtbar geändert und dem Container, welcher später den link enthalten soll, den Text "vorhanden" an die Seite gestellt:

Code:

<div id="'+provider+'_on_holder" style="width:300px;height:30px;display:block; background-image:url(../../Main-Theme/images/"'+provider+'"_logo.png); z-index:90;"><div id="'+provider+'"_content" style="width:100%;height:100%;"> vorhanden </div></div>';

wie sich nun zeigt, werden die Container richtig ausgegeben.

Das Problem ist, das sich der Platzhalter

Code:

<div id="'+provider+'"_content" style="width:100%;height:100%;"> vorhanden </div>;

welcher ja innerhalb des Containers erzeugt wird, nicht via

Code:

  //attach the links into the providers-containers
  $("."+providerliste[i]+"_content").append(linkStructure);

ansprechbar ist.

Es bleibt der Text "vorhanden" stehen, der jedoch eigentlich an dieser Stelle durch den Inhalt der Variablen "linkStructure" überschrieben werden sollte!

Warum funktioniert das nicht bzw. wie würde es funktionieren?

PS: Ein übergeben der Variablen Wert und somit eine Online-Test ist meiner Meinung nach nicht nötig, da im Script an der Stelle

Code:

var wert="111", provider, id, link="";

der Wert ja für einen in der XML vorkommenden Eintrag fest gesetzt ist und das ganze somit auch offline funktionieren sollte.

dbarthel · 16. Juni 2014

Achja, Fehlerkonsole enthält keine Warnungen oder Fehler.

Nochmal das Problem in Kurzform:

$("."+providerliste+"_content").append (linkliste);

funktioniert nicht denn durch diesen Befehl wird z.B. nichts in den Bereich "oboom_content" welcher innerhalb des Bereich "oboom_on_holder" ist und durch das Script zuvor an die Stelle "no-js" geschrieben wurde, angehängt.

miniA4kuser · 16. Juni 2014

Da gibt es mehrere Gründe:
Erstens invalides HTML, denn '<div id="' + provider + '"_content" style="width:100%;height:100%;">' ergibt z.B. '<div id="oboom"_content" style="width:100%;height:100%;">'. Dort ist ein " zuviel.

Dann vergibst du diese ID "' + provider + '"_content"' zwei mal, was verboten ist, da eine ID ein eindeutiger Bezeichner sein muss.

Und letztendlich suchst du mittels jQuery $("." + providerliste[i] + "_content").append(linkStructure); nach einer Klasse und nicht nach einer ID.

PS: Habe nur mal kurz überflogen, jedoch frage ich mich was dieses htmlStructure = htmlStructure + '...'; sein soll? Besser for der .each()-Funktion das HTML löschen und mit .append()-Funktion arbeiten.

dbarthel · 16. Juni 2014

Mit dem Hochkamma hast du recht, war ein Fehler, bei der Behauptung, die ID sei doppelt möchte ich widersprechen, denn '"+provider+" ist ja eine Variable, die sich ändert,
es sollte also einmal "oboom_content" und einmal "longfiles_content" entstehen und somit nicht doppelt sein, oder habe ich da wad übersehen?

Wie könnte ich denn richtig nach einer ID, anstatt nach einer Klasse suchen?

Ps: das html-structure soll die Container erzeugen, da ich mit append nicht ganz so firm bin.

miniA4kuser · 16. Juni 2014

dbarthel schrieb:
Mit dem Hochkamma hast du recht, war ein Fehler, bei der Behauptung, die ID sei doppelt möchte ich widersprechen, denn '"+provider+" ist ja eine Variable, die sich ändert,
es sollte also einmal "oboom_content" und einmal "longfiles_content" entstehen und somit nicht doppelt sein, oder habe ich da wad übersehen?

Das kommt davon, wenn der Code nicht übersichtlich formatiert wird, denn in folgender Passage (Formatiert)

Code:

// build a vissible container for each provider with default blured content and a invisible container, which will later contain the link, next to it
htmlStructure = htmlStructure +
	'<div id="' + provider + '_off_holder" style="width:300px;height:30px;display:block; background-image:url(../../Main-Theme/images/"' + provider + '"_logo.png); z-index:90;">' +
		'<div id="' + provider + '_content" style="width:100%;height:100%;">' +
			'<p class="">ID ' + wert + ' nicht vorhanden.</p>' +
		'</div>' +
	'</div>' +
	'<div id="' + provider + '_on_holder" style="width:300px;height:30px;display:block; background-image:url(../../Main-Theme/images/"' + provider + '"_logo.png); z-index:90;">' +
		'<div id="' + provider + '_content" style="width:100%;height:100%;">' +
			' vorhanden ' +
		'</div>' +
	'</div>';

steht 2 mal <div id="' + provider + '_content" style="width:100%;height:100%;">. Das erste Mal im DIV-Lomtainer id="' + provider + '_off_holder" und das zweite Mal im DIV-Lomtainer id="' + provider + '_on_holder"

dbarthel schrieb:
Wie könnte ich denn richtig nach einer ID, anstatt nach einer Klasse suchen?

Mit dem ID-Selector #, so wie bei CSS (Stylesheet): $("#" + providerliste[i] + "_content").append(linkStructure);

dbarthel schrieb:
Ps: das html-structure soll die Container erzeugen, da ich mit append nicht ganz so firm bin.

Dann solltest du das schleunigst mal nachholen, zumal du es weiter unten im Code soger in Verwendung hast

Zum Thema html-structure meinte ich eher sowas hier:

Code:

success: function (xml) {
	//lets do some reading
	$(xml).find('provider').each(function () {
		provider = $(this).find("text").text();
		alert(provider);
		console.log($(this).find("text").text());

		// build a vissible container for each provider with default blured content and a invisible container, which will later contain the link, next to it
		htmlStructure = htmlStructure +
			'<div id="' + provider + '_off_holder" style="width:300px;height:30px;display:block; background-image:url(../../Main-Theme/images/"' + provider + '"_logo.png); z-index:90;">' +
				'<div id="' + provider + '_content" style="width:100%;height:100%;">' +
					'<p class="">ID ' + wert + ' nicht vorhanden.</p>' +
				'</div>' +
			'</div>' +
			'<div id="' + provider + '_on_holder" style="width:300px;height:30px;display:block; background-image:url(../../Main-Theme/images/"' + provider + '"_logo.png); z-index:90;">' +
				'<div id="' + provider + '_content" style="width:100%;height:100%;">' +
					' vorhanden ' +
				'</div>' +
			'</div>';

		$(this).find("option").each(function () {
			id = $(this).find("id").text();
			if (id == wert) {
				link = $(this).find("link").text(); //alert(link);//alert(provider);
				console.log($(this).find("link").text());
				console.log(provider);
				providerliste.push(provider); //stores the provider(s) name(s) which have the ID
				linkliste.push(link); // stores the link(s) 
			}
		});
	});

	//replace the no-js-place-holder into the calling document	<<<  NUR EIN AUFRUF
	$(".no-js").html(htmlStructure);

	...
	dein weiterer Code bis Funktionsende
	...
},

oder eben mit jQuery .append():

Code:

success: function (xml) {
	//lets do some reading
	$(xml).find('provider').each(function () {
		provider = $(this).find("text").text();
		alert(provider);
		console.log($(this).find("text").text());

		//delete content of the no-js-place-holder
		$(".no-js").html("");

		// build a vissible container for each provider with default blured content and a invisible container, which will later contain the link, next to it
		// AND apend html structure the no-js-place-holder
		$(".no-js").append('<div id="' + provider + '_off_holder" style="width:300px;height:30px;display:block; background-image:url(../../Main-Theme/images/"' + provider + '"_logo.png); z-index:90;">' +
				'<div id="' + provider + '_content" style="width:100%;height:100%;">' +
					'<p class="">ID ' + wert + ' nicht vorhanden.</p>' +
				'</div>' +
			'</div>' +
			'<div id="' + provider + '_on_holder" style="width:300px;height:30px;display:block; background-image:url(../../Main-Theme/images/"' + provider + '"_logo.png); z-index:90;">' +
				'<div id="' + provider + '_content" style="width:100%;height:100%;">' +
					' vorhanden ' +
				'</div>' +
			'</div>');
		$(this).find("option").each(function () {
			id = $(this).find("id").text();
			if (id == wert) {
				link = $(this).find("link").text(); //alert(link);//alert(provider);
				console.log($(this).find("link").text());
				console.log(provider);
				providerliste.push(provider); //stores the provider(s) name(s) which have the ID
				linkliste.push(link); // stores the link(s) 
			}
		});
	});

	...
	dein weiterer Code bis Funktionsende
	...
},

dbarthel · 17. Juni 2014

miniA4kuser schrieb:
oder eben mit jQuery .append()

dann bekomme ich aber nur einen Anbieter ausgegeben, nicht jedoch alle!

das

Code:

		//delete content of the no-js-place-holder
		$("#no-js").html("");

muss dann vor das each, sonst überschreibe ich mir ja ständig den Anbieter!

Code:

success: function (xml) {
	//delete content of the no-js-place-holder
	$("#no-js").html("");

	//lets do some reading
	$(xml).find('provider').each(function () {
		provider = $(this).find("text").text();
		console.log($(this).find("text").text());

		// build a vissible container for each provider with default blured content and a invisible container, which will later contain the link, next to it
		// AND apend html structure the no-js-place-holder 
                // thanks to miniA4kuser @ forum.jswelt
		$("#no-js").append('<div id="' + provider + '_off_holder" style="width:300px;height:30px;display:block; background-image:url(../../Main-Theme/images/"' + provider + '"_logo.png); z-index:90;">' +
				'<div id="' + provider + '_nocontent" style="width:100%;height:100%;">' +
					'<p class="">ID ' + wert + ' bei Anbieter ' + provider + ' nicht vorhanden.</p>' +
				'</div>' +
			'</div>' +
			'<div id="' + provider + '_on_holder" style="width:300px;height:30px;display:none; background-image:url(../../Main-Theme/images/"' + provider + '"_logo.png); z-index:90;">' +
				'<div id="' + provider + '_content" style="width:100%;height:100%;">' +
					'<p class="">   </p>' +
				'</div>' +
			'</div>');

miniA4kuser · 20. Juni 2014

Richtig erkannt, das muß natürlich for das .each() und nicht innerhalb.

dbarthel · 20. Juni 2014

miniA4kuser schrieb:
Richtig erkannt, das muß natürlich for das .each() und nicht innerhalb.

Danke, miniA4, du hast mir sehr geholfen!

Thread ist gelöst.

miniA4kuser · 20. Juni 2014

Gern geschehn.

[GELÖST] XML Parsen und auswerten

mikdoe

Moderator

j-l-n

Guest

dbarthel

Lounge-Member

mikdoe

Moderator

dbarthel

Lounge-Member

dbarthel

Lounge-Member

Anhänge

dbarthel

Lounge-Member

miniA4kuser

Lounge-Member

dbarthel

Lounge-Member

miniA4kuser

Lounge-Member

dbarthel

Lounge-Member

miniA4kuser

Lounge-Member

dbarthel

Lounge-Member

miniA4kuser

Lounge-Member