Werte-Ausgabe mittels JavaScript/AJAX funktioniert im IE9 nicht

[spastman1]

Hallo liebe Forums-Kollegen,
ich Melde mich wieder mit einem Problem, welches ich alleine nicht zu lösen vermag.

Ich beschreibe ganz kurz was ich will: ich lese die id einer html-Zelle aus, sende diese mittels JavaScript/ajax an eine php-Datei wo eine MySQL-Abfrage ausgeführt wird. Das Ergebnis wird wieder an die ursprüngliche html-Seite zurückgesendet und in eine andere html-Zelle geschrieben.
So weit so gut.

Ich habe in Netz auch ein JavaScript gefunden, welches genau diesen Anspruch gerecht wird. Hier zu finden: Ajax Beispiel 004.

Jetzt mein eigentliches Problem...
Ich habe dieses Script leicht an meine Bedürfnisse angepasst, und es funktioniert auch - nur nicht im IE9! Habs mit Opera, Firefox und Chrome probiert. Überall werden die Werte in die Zellen ausgegeben; nur bei IE9 wird nix ausgegeben.
Vielleicht muss bei "Request erzeugen" noch eine Browser-Weiche gemacht, werden. Aber da ich mich erst seit wenigen Tagen mit JavaScript beschäfte, tu ich mir relativ schwer hier eine Lösung zu finden.

Ich hoffe einer von euch kann mit weiter helfen.
Bei bedarf kann ich den html-Auszug, die php-Datei und das JavaScript posten.
Danke.

MfG
spastman1

[Zeimn]

Poste doch mal deinen Code, damit man sieht was du da versuchst. Was heißt HTML-Zelle, ein DIV Container? Ohne Code ist es schwer zu verstehen) Ansonsten helfe ich dir gern.

[Zeimn]

Warum verwendest du eigentlich nicht jQuery dazu? Kennst du jQuery?
Damit solltest du sowas sehr leicht umsetzen können, und das kann der IE in der Regel auch.

Hier ein kleines Beispiel, wobei ich mal davon ausgehe, dass du die ID als GET-Parameter an das PHP-Script sendest:

Also in den Header der HTML-Seite einfach jQuery einbinden:

<!-- jQuery einbinden -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<!-- Nach dem Laden des Dokuments, den Load direkt ausführen -->
<script type="text/javascript">
$(document).ready(function() {
    $.ajax({
      url: 'script.php?id='+$('#containerMitId').attr('id'),
      success: function(data) {
          $('#zielContainer').html(data);
      }
    });
});
</script>

Alternativ, per Klick:

<script type="text/javascript">
$(document).ready(function() {
    $('#deinButton').click(function() {
        $.ajax({
          url: 'script.php?id='+$('#containerMitId').attr('id'),
          success: function(data) {
              $('#zielContainer').html(data);
          }
        });
    });
});
</script>

Das war's. Finde ich sehr simple, und ich mach mir seit es jQuery oder andere Framworks gibt auch nicht mehr die Mühe alles in Javascript neu zu coden, außer es geht eben nicht anders=)

[spastman1]

Hallo Zeimn,
danke das du mir bei meinem Problem hilfst. Mit jQeury habe ich es auch schon probiert. Bin da ebenfalls nicht weiter gekommen.

Ich sag dir mal konkret, wie ich es mit jQuery gemacht habe.

Hier meine HTML-Zelle aus der ich den id-Wert '15847' übergeben will:

<td name="mitglied1" id="15847" class="mg_name">NAME</td>

Hier die HTML-Zelle in die der Rückgabewert eingetragen werden soll:

<td name="mg1_z1" id="mg1_z1" class="mg_zeilen"></td>

Hier meine php-Datei:

PHP-Code:

require_once("config.php");

$passNr = $_POST['passNr'];
//$passNr = "15847";


$tabelle = "uttv_ergebnisse";

if (isset($_POST['passNr'])){
    $abfrage = "SELECT COUNT(passNr_heim) AS anzahl FROM $tabelle WHERE passNr_heim = '$passNr'";
    $abfrage2 = "SELECT COUNT(passNr_heim) AS anzahl2 FROM $tabelle WHERE passNr_heim = '$passNr' AND saetze_heim > saetze_gast";

    $result = mysql_query($abfrage) or die(mysql_error());
    $result2 = mysql_query($abfrage2) or die(mysql_error());

    $spiele = mysql_fetch_assoc($result);
    $spiele = $spiele['anzahl'];
    
    $siege = mysql_fetch_assoc($result2);
    $siege = $siege['anzahl2'];
    
    $rechnung = $siege['anzahl2']/$spiele['anzahl'];
    $faktor = sprintf("%.2f", $rechnung);

    $spiele['spiele'] = $spiele;
    $siege['siege'] = $siege;
    $faktor['faktor'] = $faktor;

    echo json_encode($spiele);
    //echo json_encode($siege); //solle später auch übergeben werden
    //echo json_encode($faktor); //soll später auch übergeben werden
}
else{
    $spiele['fehler'] = "Fehler bei Variableübergabe!";
    echo json_encode($spiele);
}
?> 


und zu guter letzt mein jQuery-Script:

<script type="text/javascript">
$(document).ready(function() {
        //for(i = 1; i<22; i++){
            var abfrage = document.getElementsByName("mitglied1")[0].id;  //bei aktivierter for-Schleife hätte ich ("mitglied"+i)[0].id; geschrieben
            var passNr = abfrage;
            $.ajax({
                type: 'POST',
                async: false,
                url: '/php/mitglieder_detail.php',
                dataType: 'json',
                data: "passNr="+ passNr,
                success: function(data){
                    document.getElementById("mg1_z1").innerHTML = data.spiele; // bei aktivierter for-schleife hätte ich hier ("mg"+i+"_z1").innerHTML geschrieben
                },
                error: function(data){
                    alert(data.fehler);
                },
            });
        //}        
});
</script>

Erschwert wird das ganze auch dadurch, dass ich derzeit 21 solcher Zellen habe, d.h. die ajax-Funktion sollte in einer for-schleife ablaufen.

Das war mein Versuch über jQuery. Leider passiert hier gar nichts. Ich bekomme keine Fehlermeldung, kein 'undefinded', gar nichts. Irgendwo habe ich da einen Hund drinnen, und da ich - wie bereits erwähnt - in JavaScript nicht sattelfest bin, tu ich mir mit der Fehlersuche verdammt schwer.

[Martin Kraft]

Vorab:

• Ein essentielles Tool für die JavaScript-Entwicklung ist FireBug. Mit diesem FireFox-AddOn kannst Du Dir z.B. unter »Netzwerk« ansehen, welche Daten Deine Seite versendet und empfängt.
  
  
• Wenn man jQuery einsetzt, solltest man das möglichst durchgängig tun.

  $("#mg1_z1").html(data);

  ... umgeht fast alle Cross-Browser-Probleme, die man sich mit reinem JavaScript einhandeln kann:

  Zitat von spastman1

   document.getElementById("mg1_z1").innerHTML = data;

• Du solltest Dir bewusst sein, das Ladeprozesse immer asynchron ablaufen. D.h. sie werden zu einem bestimmten Zeitpunkt in der Codeausführung angestoßen, aber zu einem späteren Zeitpunkt abgeschlossen (und zwar nicht unbedingt in der Reihnefolge in der sie initiert wurden). Um das kontrollieren zu können, arbeitet man mit sog. CallBack-Funktionen. Diese haben bei ihrer Ausführung, dann aber (i.d.R.) keinen Zugriff mehr auf die Werte und Variablen, die zum Zeitpunkt ihrer Deklaration in der auslösenden Funktion aktuell waren. Das i aus Deiner Schleife wäre also in der CallBackFunktion nicht mehr definiert bzw. hätte dort einen ganz anderen Wert.
  
  
• Es ist übrigens generell nicht zu empfehlen AJAX-Requests in einer Schleife abzufeuern. Das sorgt nur für unötiges Chaos und überflüssige Ladevorgänge. Stattdessen würde ich Dir empfehlen mit nur einem Request zu arbeiten, die Schleife serverseitig auszuführen und die Daten gesammelt JSON- oder XML-formatiert zurückzuliefern.
  
  
• Was PHP und MySQL angeht, bin ich leider kein Profi, aber das sieht zumindest seltasm aus und lässt sich sicher vereinfachen:

  Zitat von spastman1

  PHP-Code:

  $spiele = mysql_fetch_assoc($result);
$spiele = $spiele['anzahl']; 
$spiele['spiele'] = $spiele; 
echo json_encode($spiele); 


Aber .... machst Du Dir die Sache nicht unnötig schwer?!

Wenn ich Dich richtig verstanden habe, geht es doch darum die Inhalte einer Tabelle zuaktualliesieren?! Wäre es da nicht einfach einfach die komplette Tabelle in PHP neu zu generieren, per AJAX zu laden und dann auszutauschen?
PHP müsste dafür nur eine ganz normalen (X)HTML-Tabelle generieren und in JS würde diese Zeile ausreichen:

$('#tabellenContainer').load('/php/mitglieder_detail.php');

[spastman1]

Hallo Martin,
danke für deine Antwort. Das der Ladeprozess asynchron ablauft, habe ich bereits herausgefunden. Deshalb habe ich auch folgenden Code eingebaut:

async: false,

Damit wird das Script erst weiter abgearbeitet, wenn eine Antwort erfolgt ist (So habe ich das zumindest aufgefasst). Dieses "async: false," ist aber auch nicht ideal, da damit unter Umständen die gesamte Seite lahmgelegt werden kann, wenn ein Request abschmiert.

So wie ich das sehe, werde ich wohl deinem Rat folgen, und das Ganze in PHP programmieren. Ob ich die Tabelle dynamisch mit PHP ausgebe,

oder

die Abfrage-Ergebnisse in einem Array speichere, die PHP-Datei mit 'include' in meine Site einbinde und den entsprechenden Array-Wert in richtigen Tabellenfeld mit echo ausgebe, weiß ich noch nicht.

Werde mich auf jeden Fall mal dahinter klemmen. Mal sehen was rauskommt. Ich melde mich dann nochmal.

Danke euch beiden für eure Hilfe. Ich wünsche noch ein frohes Fest.

MfG
spastman1

[Martin Kraft]

Zitat von spastman1

Das der Ladeprozess asynchron ablauft, habe ich bereits herausgefunden. Deshalb habe ich auch folgenden Code eingebaut:

async: false,

Damit wird das Script erst weiter abgearbeitet, wenn eine Antwort erfolgt ist (So habe ich das zumindest aufgefasst).

Ajax ist ein Abkürzung für »Asynchronous JavaScript and XML«. Das synchron einsetzen zu wollen, ist also ein Widerspruch in sich!

async:false solltest Du deshalb so schnell wie möglich wieder vergessen. Das ist also ein Parameter der nur in absoluten Ausnahmefällen Sinn macht. Hier definitv nicht:

Zitat von spastman1

Dieses "async: false," ist aber auch nicht ideal, da damit unter Umständen die gesamte Seite lahmgelegt werden kann, wenn ein Request abschmiert.

Zitat von spastman1

So wie ich das sehe, werde ich wohl deinem Rat folgen, und das Ganze in PHP programmieren. Ob ich die Tabelle dynamisch mit PHP ausgebe,

oder

die Abfrage-Ergebnisse in einem Array speichere, die PHP-Datei mit 'include' in meine Site einbinde und den entsprechenden Array-Wert in richtigen Tabellenfeld mit echo ausgebe, weiß ich noch nicht.

Ich verstehe nicht ganz, wo da der Unterschied liegt – außer dass das include die Sache unnötig verkompliziert

[speedjunkie]

Mich wundert, dass nur der 9’er sich weigert. Microsoft hat ja bekanntermaßen seine eigene Vorstellung von Browsern und Internet.

Musst mal darauf achten, wenn das Zeichen, das wie ein Parkverbotsschild aussieht, blau leuchtet, bzw. der Kompatibilitätsmodus.

Gibt’s eine Fehlermeldung?

Die Error Methode sieht anders aus:

error:  function(xhr, errMSG, err)
        {/*Parameter: XMLHttpRequest-Objekt, Zeichenkette mit Beschreibung des Fehlers, Error-Objekt*/
            alert("Ajax-Anfrage fehlgeschlagen: " + errMSG)
        } 

Ansonsten die Daten in eine serielle Reihenfolge erstellen wie bei einem Formular oder jsonp falls Du Same-Domain Richtlinien Moderne Browser verletzt.

[spastman1]

Hallo Martin,
ich verstehe jetzt nicht ganz, warum das include das ganze verkompliziert? Ob die Abfrage-Ergebnisse per Java/jQeuery/... in meine Site geladen werden, oder sich die Ergebnisse bereits in meiner Seite befinden (mittels include) ist doch egal.
Der einzige "Nachteil" bei meiner derzeitigen Vorgehensweise ist (ich habe es mit include gemacht), dass die Tabelle zur Zeit nicht dynamisch erzeugen lasse.


@speedjunkie
Danke für deine Antwort. Leider kann ich die Fehlermeldung nicht mehr "erzeugen", da ich jetzt alles über php gelöst habe.

Aber danke für deinen Tipp mit der Error-Methode. Werde das bestimmt noch einmal benötigen.

[Martin Kraft]

Zitat von spastman1

ich verstehe jetzt nicht ganz, warum das include das ganze verkompliziert? Ob die Abfrage-Ergebnisse per Java/jQeuery/... in meine Site geladen werden, oder sich die Ergebnisse bereits in meiner Seite befinden (mittels include) ist doch egal.
Der einzige "Nachteil" bei meiner derzeitigen Vorgehensweise ist (ich habe es mit include gemacht), dass die Tabelle zur Zeit nicht dynamisch erzeugen lasse.

Eben das find ich kompliziert (und fehleranfällig):
Erst fummels Du in einer PHP-Datei ein Array zusammen und dann fügst Du desen Inhalte in einer anderen Datei in ein statische HTML-Tabelle ein.

Mal davon abgesehen, dass ich nicht verstehe, warum Du das auf zwei Dateien aufteilen willst, geht es schief, sobald auch nur eine Eintrag zu wenig im Array steht...

Zitat von spastman1

Danke für deine Antwort. Leider kann ich die Fehlermeldung nicht mehr "erzeugen", da ich jetzt alles über php gelöst habe.

Wieso wolltest Du überhaupt mit AJAX arbeiten, wenn es sich augenscheinlich doch eh um eine statische Seite handelt AJAX macht IMHO nur da Sinn, wenn Inhalte einer HTML-Seite ausgetauscht werden müssen ohne gleich die ganze Seite neu zu laden.

Im übrigen schließen sich PHP und AJAX nicht aus, sondern ergänzen einander. Mit AJAX kann man (wie gesagt) super PHP-generierte HTML-Fragmente nachladen.