JavaScript Internet Exlporer 9 und JQuery

UltiSalamander · 16. Juli 2012

Hallo zusammen.

Ich habe folgendes Problem. Dieser Teil meines Quellcodes bzw. diese Funktion funktioniert tadellos in Firefox und Chrome, jedoch nicht im Internet Explorer 9.

Code:

function lockscreen()
{
    $("body").append('<div style="position:fixed;height:auto;width:auto;top:0;bottom:0;left:0;right:0;background: no-repeat url(./ajax-loader.gif) 5px 5px ;opacity:0.6;z-index:11101;" id="page-overlay"></div>');
}
function unlockscreen()
{
    if($("#page-overlay").length > 0) $("#page-overlay").remove();
}
function loadajax(url, data, id, callback, lock)
{
    if(lock === undefined || lock === true) lockscreen();
    $.ajax({
    url: url,
    type: "POST",
    data: data,
    dataType: "html",
    
    success: function(data)
    {
        if(data===null)
        {
            msgbox.displayMessage("Interner Fehler");
        }
        else if(id!==undefined)
        {
            $(id).html(data+"").css("opacity", "0").animate({opacity: 1}, 300);
        }
        
        if(lock === undefined || lock === true) unlockscreen();

        if(callback!=undefined)
        {
            window.setTimeout(callback,0);
        }
    },
    
    error: function(jqXHR, textStatus, errorThrown)
    {        
        /*msgbox.displayMessage("Interner Fehler "+errorThrown);*/
        
        $(id).html("not found").css("opacity", "0").animate({opacity: 1}, 300);
        if(lock === undefined || lock === true) unlockscreen();
    }
    });
}

Sie soll dabei beim Laden des Seiteninhalts via Ajax ein Overlay einblenden und nach dem Laden wieder ausblenden. Doch beim Internet Explorer gibt es folgendes kuriose Problem. Innerhalb der success Funktion führt der Internet Explorer nur einen Teil aus!

Das heißt: Setze ich die Zeile mit dem Aufruf von unlockscreen() an den Anfang der Funktion, wird das Overlay ausgeblendet.
Setze ich hingegen das if/else Konstrukt an den Anfang, bleibt dies weiter bestehen (nachweislich wird die Funktion unlockscreen() nicht aufgerufen). Eine Animation wird in beiden Fällen nicht angezeigt.

Das Kuriose jedoch: Öffne ich die Entwicklertools (F12) und rufe die Seite erneut auf, funktioniert alles kompromisslos!

Was kann ich tun dass dieses Problem nicht weiter auftritt?

Ruheliebhaber · 16. Juli 2012

Zeigt Dir der IE beim Laden in der Statusleiste unten links einen JavaScript-Fehler an? Wenn nicht, hast Du Dich schon einmal mit dem Debugger dran gehangen?

Zunra · 16. Juli 2012

Ähm ....

Hast du wirklich

PHP:

if (statement)
{
 code;
}

function: name()
{
 code;
}

geschrieben ?

Wenn ja sollte es eigentlich nie funktionieren ...
In Java Script muss es immer

PHP:

if (statement) {
 code;
}


function: name()
{
 code;
}

sein.

Erklärung:
Der Java Script Interpreter macht aus

Code:

if (statement)
{
  code1;
}
else
{
 code2;
}

=>

Code:

if (statement);
  code1;
else;
 code2;

=>

Code:

  code1;

 code2;

Madman1209 · 16. Juli 2012

Hi,

@Zunra

Merkwürdig, deiner Meinung nach würde folgender Code demnach nicht funktionieren, korrekt?

Code:

<!DOCTYPE html>
<html>
<body>

<h1>Testpage</h1>

<script type="text/javascript">

var testVal = true;

if(testVal == true)
{
test();
}

function test()
{
console.log('test');
}

</script>

</body>
</html>

Dann bin ich auf die Erklärung gespannt, wieso es doch ohne Fehler und absolut reibungslos klappt

Einfach 1:1 kopieren, in ein "doc.html" einfügen, Firebug öffnen und die Konsolenausgabe angucken

Und dann mal var testVal = false;

Bei true erfolgt die Ausgabe, bei false nicht.

VG,
Mad

Zunra · 16. Juli 2012

Code:

var testVal = true;
if(testVal == true)
{
test();
}

"funktioniert", da test(); immer ausgeführt wird

Code:

var testVal = false;
if(testVal == true)
{
test();
}

aber nicht, da test(); auch immer ausgeführt wird

Madman1209 · 16. Juli 2012

Hi,

dann müsste es aber doch ebenfalls immer die Konsolenausgabe geben? Im ersten Fall erhalte ich eine Ausgabe in der Firebug-Konsole, im zweiten nicht. Ergo wird beim ersten der Aufruf "test()" ausgeführt und im zweiten nicht.

Wie ist das denn zu erklären?

Btw: Das soll nicht provozieren oder so, aber als problematisch ist mir der Allman-Stil so selber noch nicht untergekommen.

VG,
Mad

Ruheliebhaber · 16. Juli 2012

@Zunra, Madman1290: Bitte nicht persönlich nehmen, aber das hilft dem TE nicht.

@TE: Wie gesagt, hast Du eine Fehlermeldung? Hast Du debuggt? Ich vermute den Fehler in Zeile 29 "if(lock === undefined || lock === true) unlockscreen();". Eventuell ist die Variable "lock" nicht definiert, wenn der Callback für "success" ausgeführt wird. Kann es außerdem sein, daß der IE "undefined" nicht kennt, sondern auf "!= null" prüft?

Mein JavaScript ist leider ein wenig eingerostet.

Zunra · 16. Juli 2012

Eventuell ist in neueren Java Script Parsern das Problem entschärtft.
Die ursache ist folgendes:

http://oreilly.com/javascript/excerpts/javascript-good-parts/awful-parts.html

Semicolon Insertion

JavaScript has a mechanism that tries to correct faulty programs by automatically inserting semicolons. Do not depend on this. It can mask more serious errors.

It sometimes inserts semicolons in places where they are not welcome. Consider the consequences of semicolon insertion on the return statement. If a return statement returns a value, that value expression must begin on the same line as the return:

return
{
status: true
};

This appears to return an object containing a status member. Unfortunately, semicolon insertion turns it into a statement that returns undefined. There is no warning that semicolon insertion caused the misinterpretation of the program. The problem can be avoided if the { is placed at the end of the previous line and not at the beginning of the next line:

return {
status: true
};

Madman1209 · 16. Juli 2012

Hi

@Ruheliebhaber

Wieso nicht? Der Code des TE ist komplett im Allman-Stil formatiert. Wenn das tatsächlich der oder ein Fehler in Javascript ist hilft das doch dem TE?

Aber gut, wegen mir, ich lese es auch einfach nach. Dann hat sich das von meiner Seite. Verstehe ich zwar nicht, aber ist kein Problem.

VG,
Mad

Zunra · 16. Juli 2012

@Ruheliebhaber
Ach die besonderheiten von Java Script zu verstehen hilft nicht?
Ok, ich bin raus ....

Ruheliebhaber · 16. Juli 2012

@Zunra, Madman1290: Asche auf mein Haupt. Jetzt habe ich etwas gelernt. Der IE ist aber auch ein störrisches Miststück.

@TE: Läuft es jetzt?

UltiSalamander · 16. Juli 2012

Leider hat eine Änderung der Formatierung keine Besserung gebracht.

In der Statusleiste erscheint keine Fehlermeldung. Allerdings konnte ich (mit Hilfe von alert()s) feststellen, dass der Code nur bis zu folgender Zeile ausgeführt wird:

Code:

$(id).html(data+"").css("opacity","0").animate({opacity:1},300);

.html(data+"") wird dabei noch ausgeführt, die css Änderung sowie die Animation nicht mehr.
In der IE-Konsole kann ich wie erwähnt nicht nachschauen, da wenn ich Diese öffne das Problem nicht mehr auftritt und Animation sowie alles weitere funktioniert.

character · 16. Juli 2012

Mal ganz banal: Benutzt du die aktuelle jQuery-Version?

Ansonsten könnte auch in data irgendwas sein, dass den HTML-Parser vom IE verwirrt. Was passiert, wenn du das html(data) rausnimmst?

Das else if(id!==undefined) könntest du übrigens durch ein einfaches else ersetzen, ist aber eigentlich auch egal.

UltiSalamander · 16. Juli 2012

character schrieb:
Mal ganz banal: Benutzt du die aktuelle jQuery-Version?

Ansonsten könnte auch in data irgendwas sein, dass den HTML-Parser vom IE verwirrt. Was passiert, wenn du das html(data) rausnimmst?

Das else if(id!==undefined) könntest du übrigens durch ein einfaches else ersetzen, ist aber eigentlich auch egal.

Das else if kann ich nicht ersetzen, denn es ist auch vorgesehen die Funktion ohne eine empfangende ID aufzurufen.
Die aktuelle JQuery Version 1.7.2 benutze ich.

Aber der Hinweis mit dem data ist gut, ich habe es testweise herausgenommen und der Fehler tritt nicht mehr auf. Jetzt muss ich nurnoch herausfinden was an dem HTML für den Fehler sorgt.

character · 16. Juli 2012

UltiSalamander schrieb:
Das else if kann ich nicht ersetzen, denn es ist auch vorgesehen die Funktion ohne eine empfangende ID aufzurufen.

Doch das geht, weil dann eben $(undefined).xyz() aufgerufen wird, was einfach nichts macht. Ich wollte das nur erwähnen, natürlich ist es nicht wirklich wichtig.

UltiSalamander · 17. Juli 2012

Das Problem liegt eindeutig am zurückkommenden data. Was kann ich tun damit der IE dies annimmt und keinen Fehler auswirft? Versucht habe ich bereits

Code:

dataType: "text"

statt html, was leider nichts ändert, sowie ein PHP Seitiges utf8_encode() des Inhalts vor Ausgabe der via Ajax angefragten Datei.

Diese sieht im Testfall übrigens wie Folgt aus:

HTML:

<p class="center">
    <br><br>
    Text<br>
    <br>
</p>
<form method="post" id="login-form" class="center" action="#">
    <input type="text" name="key" id="login-form-key" placeholder="Your code here">
    <input type="submit" value="OK">
    <p id="errorInfo" class="important-info">&nbsp;</p>
</form>
<script type="text/javascript">
logoutbutton.hide();
    $("#login-form").bind("submit", function()
        {
            var key = $("#login-form-key").val();
            $.ajax({
                url: "./ajax/login.php",
                type: "POST",
                data: "key="+key,
                dataType: "json",
                success: function(data)
                {
                    if(data===null)
                        $("#errorInfo").html("Error");
                    else if(data["success"]==false)
                        //$("#errorInfo").html(""+data["content"]);
                        msgbox.displayMessage(""+data["content"]);
                    else if(data["success"]==true)
                        loadcontent("overview");
                    $("#errorInfo").css("opacity", "0").animate({opacity: 1}, 300);
                },
                error: function(jqXHR, textStatus, errorThrown)
                {
                    $("#errorInfo").html(""+errorThrown);
                    $("#errorInfo").css("opacity", "0").animate({opacity: 1}, 300);
                }
            });
            return false;
        });
    
    function order_key()
    {
        overlay("./content/ajax/requestform.en.html","", "#page-content");
    }
</script>
<p class="center">
<br><br><br><br><br>
    Text<a href="mailto:mail@example.com">info@example.com</a>
</p>
<p class="center">
<a href="#" onclick="order_key();">Request code</a>
</p>

metadings · 17. Juli 2012

Du solltest echt mal den Script-Debugger in IE9 kennen lernen, der ist sehr aussagekräftig!

Was genau macht denn diese Zeile?

Code:

logoutbutton.hide();

Ist 'logoutbutton' auch wirklich global bereits definiert? Wenn nicht würde das deinen kompletten Scriptblock (closure) killen.

Übrigens habe ich beobachtet, dass jQuery in neueren Versionen script-Blöcke aus einen ajax-data entfernt und automatisch global ausführt, d.h. bereits bevor du dein HTML überhaupt eingefügt hast, dafür habe ich meine Ajax-Scriptblöcke bereits in fake-div's verpackt, wie z.b.
<div class="javaScript"> function () { } ... </div>

Und wenn etwas nicht ist, ist das einfachste javaScript ganz einfach

Code:

if (!id) ...

Nur wenn du explizit unterscheiden musst, benutzt du triple equals:

Code:

if (id === undefined) { }
else if (id === null) { }
else if (id === false) { }
else if (id === "") { }
else if (id === 0) { }
else if (!id) {
  // wird niemals ausgeführt: alles was nicht ist, wurde oben abgefangen
}
else if (id === true) { } // explizit: nur true
else if (id) { // id ist alles andere als !id, z.b. ein nicht leerer string, oder <> 0
}
else {
  // wird niemals ausgeführt
}

Wenn du etwas wissen willst, was nicht ganz sicher deklariert wurde oder bereits gelöscht sein könnte, führt jedoch auch ein === undefined zu einem Fehler, hier benötigst du dann typeof

Code:

if (nichtdefiniert === undefined) // führt zu einer exception
if (typeof nichtdefiniert === 'undefined') // funktioniert

var gelöscht;
delete gelöscht;
if (gelöscht === undefined) // führt zu einer exception
if (typeof gelöscht === 'undefined') // funktioniert

// Trick:
if (window.nichtdefiniert === undefined)
// führt nicht zu einer exception,
// behandelt aber nur var's, nicht global 'nichtdefiniert'

// ist das gleiche wie
if (window['nichtdefiniert'] === undefined) // besser
if (typeof window['nichtdefiniert'] === 'undefined') // als typeof

UnKnOwN_86 · 17. Juli 2012

Ist der Hacken bei "Scriptfehler anzeigen" in den Internet optionen deines IE9 gesetzt?

Laut jQuery Doku - http://api.jquery.com/jQuery.ajax/ :
Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks will be deprecated in jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

Vielleicht mal mit .done() testen..

metadings · 18. Juli 2012

UnKnOwN_86 schrieb:
Ist der Hacken bei "Scriptfehler anzeigen" in den Internet optionen deines IE9 gesetzt?

Ich verwende normalerweise auch Firefox, aber nein, die Meldungen des IE9 ansich vermeide ich gerne

Meine Vermutung ist, dass sich hier das VS Team ein wenig eingeschaltet hat, um IE9 dev freundlich zu machen, die Entwicklerumgebung kann sich auch wirklich sehen lassen... Auch wenn mich niemand hört, wenn ich mich darüber beschwere, dass IE9+ massiv hängt wenn man nicht darauf achtet, dass der Debugger blockt

UltiSalamander · 18. Juli 2012

UnKnOwN_86 schrieb:
Ist der Hacken bei "Scriptfehler anzeigen" in den Internet optionen deines IE9 gesetzt?

Laut jQuery Doku - http://api.jquery.com/jQuery.ajax/ :
Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks will be deprecated in jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

Vielleicht mal mit .done() testen..

Ich habe einen Skriptfehler beseitigt, der jedoch in einem nicht mit diesem zusammenhängenden Skript bestand (console.log() kennt der IE nicht), behoben, und success und error mit done und fail ersetzt... und es funktioniert einwandfrei. [edit] Ich weiß allerdings nicht, was das mit dem .html(data) zu tun hat, bei dem die Ausführung abbrach... [/edit] Der Internet Explorer stellt einen doch jedes mal wieder aufs neue auf die Probe...

Vielen Dank für die ganze Hilfe!

JavaScript Internet Exlporer 9 und JQuery

Lieutenant

Captain

Cadet 3rd Year

Fleet Admiral

Cadet 3rd Year

Fleet Admiral

Captain

Cadet 3rd Year

Fleet Admiral

Cadet 3rd Year

Captain

Lieutenant

Lt. Commander

Lieutenant

Lt. Commander

Lieutenant

Cadet 3rd Year

Ensign

Cadet 3rd Year

Lieutenant

Ähnliche Themen