AJAX funktioniert unter Safari und Firefox, aber nicht mit dem IE?!?

mentle · 29. Januar 2016

Guten Abend,

folgendes Problem:
Es gibt eine Bildergalerie. Sobald ich mit dem Mauszeiger über einen thumb fahre, wird das dazugehörigen große Bild angezeigt und es werden die zwei folgenden Funktionen ausgelöst:

JavaScript

<script type="text/javascript">function thumb(x) 	{			document.getElementById("vorschau").src = "bilder/versch/versch" + x + ".jpg";		var req = new XMLHttpRequest();		req.open("get", "bilderdatenbanken/bilderdatenbank-versch.xml", true);		req.onreadystatechange = function(e) { ausgeben(e, x); };		req.send();	return false;	}</script>

JavaScript

<script type="text/javascript">function ausgeben(e, x)	{		if(e.target.readyState == 4 && e.target.status == 200)		{				var antwort = e.target.responseXML;			var nummer = antwort.getElementsByTagName("bildnr")[x-1].innerHTML;			var titel = antwort.getElementsByTagName("bildtitel")[x-1].innerHTML;			var laenge = antwort.getElementsByTagName("laenge")[x-1].innerHTML;			var breite = antwort.getElementsByTagName("breite")[x-1].innerHTML;			var frame = antwort.getElementsByTagName("rahmen")[x-1].innerHTML;			var price = antwort.getElementsByTagName("preis")[x-1].innerHTML;			document.getElementById("bildtitel").firstChild.nodeValue = titel;			document.getElementById("lang").firstChild.nodeValue = "Länge: " + laenge + " cm";			document.getElementById("breit").firstChild.nodeValue = "Breite: " + breite + " cm";			document.getElementById("rahmen").firstChild.nodeValue = "gerahmt: " + frame;			document.getElementById("preis").firstChild.nodeValue = "Preis: " + price + "  €";			document.getElementById("bildnr").firstChild.nodeValue = "Bildnummer: ubk-v-" + nummer;		}	}</script>

Die Funktionen holen aus einer XML Datei die "technischen Daten" und ersetzen die Daten des zuvor gezeigten Bilds.
Mit dem Firefox und unter Safari funktioniert auch alles, wie es soll, nur mit dem Internet Explorer kommt als Ausgabe "undefined".

Kann mir jemand verraten, warum?

Grüße,

Michael

Sempervivum · 30. Januar 2016

Dadurch, dass die Zeilenumbrüche fehlen, ist dein Code sehr schlecht lesbar.

mentle · 30. Januar 2016

Das stimmt, aber ich kriege das nicht in den Griff.
Wenn ich im Forum die Formatierung ändere, wird sie trotzdem nicht übernommen.
In meinem Editor habe ich auch schon Änderungen beim Zeilenumbruchszeuchen vorgenommen, hilft aber auch nicht.
Ich bin einigermaßen ratlos....

Sempervivum · 30. Januar 2016

Mal probieren, ob es so geht:

JavaScript

<script type="text/javascript">    function ausgeben(e, x) {        if (e.target.readyState == 4 && e.target.status == 200) {            var antwort = e.target.responseXML;            var nummer = antwort.getElementsByTagName("bildnr")[x - 1].innerHTML;            var titel = antwort.getElementsByTagName("bildtitel")[x - 1].innerHTML;            var laenge = antwort.getElementsByTagName("laenge")[x - 1].innerHTML;            var breite = antwort.getElementsByTagName("breite")[x - 1].innerHTML;            var frame = antwort.getElementsByTagName("rahmen")[x - 1].innerHTML;            var price = antwort.getElementsByTagName("preis")[x - 1].innerHTML;            document.getElementById("bildtitel").firstChild.nodeValue = titel;            document.getElementById("lang").firstChild.nodeValue = "Länge: " + laenge + " cm";            document.getElementById("breit").firstChild.nodeValue = "Breite: " + breite + " cm";            document.getElementById("rahmen").firstChild.nodeValue = "gerahmt: " + frame;            document.getElementById("preis").firstChild.nodeValue = "Preis: " + price + "  €";            document.getElementById("bildnr").firstChild.nodeValue = "Bildnummer: ubk-v-" + nummer;        }    }</script>

Edit: Nein, geht auch nicht. Der Editor in diesem Forum treibt mich häufig zur Verzweiflung.

mentle · 30. Januar 2016

Kriegst Du denn meinen Code in eine lesbare Form?
Sonst poste ich nochmal ohne BB Tags

Basi · 30. Januar 2016

JavaScript

function thumb(x)
{
    document.getElementById("vorschau").src = "bilder/versch/versch" + x + ".jpg";
    var req = new XMLHttpRequest();
    req.open("get", "bilderdatenbanken/bilderdatenbank-versch.xml", true);
    req.onreadystatechange = function (e)
    {
        ausgeben(e, x);
    };
    req.send();
    return false;
}




function ausgeben(e, x)
{
    if (e.target.readyState == 4 && e.target.status == 200) {
        var antwort = e.target.responseXML;
        var nummer = antwort.getElementsByTagName("bildnr")[x - 1].innerHTML;
        var titel = antwort.getElementsByTagName("bildtitel")[x - 1].innerHTML;
        var laenge = antwort.getElementsByTagName("laenge")[x - 1].innerHTML;
        var breite = antwort.getElementsByTagName("breite")[x - 1].innerHTML;
        var frame = antwort.getElementsByTagName("rahmen")[x - 1].innerHTML;
        var price = antwort.getElementsByTagName("preis")[x - 1].innerHTML;




        document.getElementById("bildtitel").firstChild.nodeValue = titel;
        document.getElementById("lang").firstChild.nodeValue = "Länge: " + laenge + " cm";
        document.getElementById("breit").firstChild.nodeValue = "Breite: " + breite + " cm";
        document.getElementById("rahmen").firstChild.nodeValue = "gerahmt: " + frame;
        document.getElementById("preis").firstChild.nodeValue = "Preis: " + price + "  €";
        document.getElementById("bildnr").firstChild.nodeValue = "Bildnummer: ubk-v-" + nummer;
    }
}

Alles anzeigen

mentle · 30. Januar 2016

Wieso kriegst Du das hin, und ich nicht?!? 😬

wolf · 30. Januar 2016

Deswegen ... Den eigenen Code lesbar präsentieren

kanufrosch · 30. Januar 2016

Mit welcher IE Version testest du? Aktuelle IE´s sollten inzwischen eigentlich laufen...

Bei 5/6/(7)? musste man noch irgendwas anders machen, weil die mal wiede rirgendwas nciht kannten...

Ich empfehle hier einfach mal so die Nutzung von jQuery, das arbeitet i.R. über die meisten brwoser Fehlerfrei... Und ist insbesondere für Ajax sachen etc sehr kompfortabel...

wolf · 31. Januar 2016

Tutorial jQuery AJAX

mentle · 31. Januar 2016

Moin,
Zum Thema Zeilenumbrüche: habe den Editor bereits auf die Windows (CR LF) umgestellt. Hat aber nicht geholfen.

Das genannte Tutorial habe ich natürlich gelesen. Aus verschiedensten Gründen möchte ich aber keine jQuery Datenbank nutzen, sondern die von mir erstellte XML Datei.

Der Code, den ich benutze, funktioniert ja. Zumindest bei 2 Browsern, bis auf den IE.
Das muss ja einen Grund haben. Und den kann ich aus dem Tutorial leider nicht rauslesen.

Daher nochmals meine Frage, ob irgendwer hier eine Idee hat?!?

Viele Grüße,
Micha

Sempervivum · 31. Januar 2016

"keine jQuery Datenbank" jQuery ist keine Datenbank sondern ein Javascript-Framework, das das Handling des DOM und in deinem Fall die Arbeit mit Ajax vereinfacht und browser-unabhängig macht. Man kann damit auch XML parsen:
https://api.jquery.com/jQuery.parseXML/

mentle · 31. Januar 2016

Ja, klar sorry
Hatte MySQL im Hinterkopf

Meine Frage ist nur: Was ist falsch an AJAX? Das Ergebnis ist doch dasselbe?!? Nur dass eben mein Code unter IE nicht funktioniert. Es ist übrigens IE 11.......

Mir wäre lieber, kriege meinen bestehenden Code auch unter IE zum Laufen, als dass ich mich jetzt noch mit jQuery befassen muss.....
Ich mache das noch nicht sooooo lange, und bin froh, dass ich HTML, CSS, PHP halbwegs auf die Reihe bekomme

wolf · 31. Januar 2016

IE hat einfach Probleme.

a) Googlen was man beim IE und XHR-Requests beachten muss
b) Damit abfinden das es dort nicht geht bzw. Jquery benutzen

Unter dem JQ-Ajax tutorial findest du Nativen JS code für AJAX.. probier mal ob der Daten bekommt.. Tutorial jQuery AJAX

mentle · 31. Januar 2016

Ok, werde b) beherzigen!

Macht euch auf weitere Fragen bzgl JQ gefasst
Wie angedroht:

Ich erstelle eine Bildergalerie, die tumbs werden per JavaScript mit einer Schleife folgendermaßen erzeugt:

JavaScript

<script type="text/javascript">	var i;	for (i = 1; i <= 9; i++) 		document.write("<a href='#' data='" + i + "' class='thumbs';'> <img src='bilder/thumbnails/versch/versch-thumb" + i + ".jpg' alt='Bild" + i + "' title='Bild" + i +"'> </a>");		</script>

Darunter befindet sich das "große" Bild:

HTML

<div id="bildgross"><a href="#" onclick="vollbild(); return false;"><img src="bilder/versch/versch1.jpg" alt="Bild1" title="Zum Vergrößern bitte anklicken" id="vorschau"></a></div>

Bisher habe ich die Bilder per Javascript getauscht.Sobald man die Maus über ein thumb bewegt hat, wurde eine Funktion gestartet, die

a)das Bild gewechselt hat und
b)die neben dem Bild stehenden "technische Daten", die in einer XML Datei ausgelagert sind, gewechselt hat. Dies passierte per XMLHttpRequest. Leider funktionierte das unter IE 11 nicht, so dass ich mich habe überzeugen lassen, das ganze mit jQuery zu machen.

Hier mein JQ Code:

JavaScript

<script type="text/javascript">$(document).ready(function(){    /* Hier der jQuery-Code */    $('.thumbs').mouseover(function(){    	var nummer = $(this);    	var bildnummer = nummer.attr('data');    	$('#vorschau').attr({src: 'bilder/versch/versch' + bildnummer + '.jpg'});    	console.log(bildnummer);    	/*---------------------------------------------------------------*/    	var xml = $.parseXML('bilderdatenbanken/bilderdatenbank-versch.xml');    	xmlDoc = $.parseXML( xml );  		$xml = $( xmlDoc );  		$title = $xml.find( "bild" );  		alert($title);    });});</script>

Der JQ Code funktioniert bis zum /*------------------------*/ d.h. das Bild wird gewechselt, ich komme nur beim Auslesen der XML Datei nicht weiter. Es passiert schlicht nichts.

Ich bekomme folgende Fehlermeldung, mit denen ich nichts anfangen kann:

Error: Invalid XML: bilderdatenbanken/bilderdatenbank-versch.xml
errorjquery.min.js:3:4120
parseXMLjquery.min.js:3:4882
(anonyme Funktion)versch.html:25
dispatchjquery.js:1672
handlejquery.js:1325

Wie kann ich den Code erweitern, damit ich die XML Datei auslesen kann?

Struktur der XML:

HTML

<?xml version="1.0" encoding="UTF-8" standalone="yes"?><galerie xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">	<bild>		<bildnr>1</bildnr>		<bildtitel>Dame</bildtitel>		<laenge>30</laenge>		<breite>60</breite>		<rahmen>ja</rahmen>		<preis>a.A.</preis>	</bild>	<bild>		<bildnr>2</bildnr>		<bildtitel>Bildtitel</bildtitel>		<laenge>Laenge</laenge>		<breite>Breite</breite>		<rahmen>Rahmen</rahmen>		<preis>Preis</preis>	</bild>	<bild>		<bildnr>3</bildnr>		<bildtitel>Wasserglas mit Zitrone</bildtitel>		<laenge>45</laenge>		<breite>45</breite>		<rahmen>ja</rahmen>		<preis>a.A.</preis>	</bild>	<bild>		<bildnr>4</bildnr>		<bildtitel>Trauben</bildtitel>		<laenge>60</laenge>		<breite>40</breite>		<rahmen>nein</rahmen>		<preis>a.A.</preis>	</bild></galerie>

Sempervivum · 31. Januar 2016

"Was ist falsch an AJAX?" Ich würde das Problem eher beim Auswerten des XML vermuten. Ich kann mich erinnern, so etwas früher schon mal gehabt zu haben. Kann mich leider nicht mehr erinnern, wie es gelöst wurde.

mentle · 31. Januar 2016

Ich habe es jetzt so gelöst:

JavaScript

<script type="text/javascript">$(document).ready(function(thumb){
    $('.thumbs').mouseover(function(thumbswechseln){    	    	var nummer = $(this);    	var bildnummer = nummer.attr('data');    	$('#vorschau').attr({src: 'bilder/versch/versch' + bildnummer + '.jpg'});    	var nummer = $(this);    	var bildnummer = nummer.attr('data');    	$.post("bilderdatenbanken/bilderdatenbank-versch.xml", function(ausgabe) {    	    		$("#bildtitel").html(ausgabe.getElementsByTagName("bildtitel")[bildnummer-1].firstChild.nodeValue);    		$("#lang").html("Länge: " + ausgabe.getElementsByTagName("laenge")[bildnummer-1].firstChild.nodeValue + " cm");    		$("#breit").html("Breite: " + ausgabe.getElementsByTagName("breite")[bildnummer-1].firstChild.nodeValue + " cm");    		$("#rahmen").html("gerahmt: " + ausgabe.getElementsByTagName("rahmen")[bildnummer-1].firstChild.nodeValue);    		$("#preis").html("Preis: " + ausgabe.getElementsByTagName("preis")[bildnummer-1].firstChild.nodeValue);    		$("#bildnr").html("Bildnummer: ubk-v-" + ausgabe.getElementsByTagName("bildnr")[bildnummer-1].firstChild.nodeValue);    		    		});    	});       	});</script>

wolf · 31. Januar 2016

Versuche mal UNIX line - endings ... das kann ja echt nicht sein oO

Basi · 31. Januar 2016

Welchen Editor nutzt du? Das Forum kommt definitiv mit allen ASCII Umbrüchen zurecht.

mentle · 16. Februar 2016

TextWrangler

AJAX funktioniert unter Safari und Firefox, aber nicht mit dem IE?!?

Jetzt mitmachen!

Teilen