Problem mit uploadify() im IE8

[Forumsgast]

Ich bin gerade dabei das jquery plugin uploadify in meiner Anwendung zu implementieren.

Soweit funktionierts auch tadellos im Firefox, aber im IE8 erhalte ich einen netten unspecified error on line 0.

Hier mein HTML:

<div class="content">
    <form>
    <h2>1. Dateiname</h2>
    <p>Beachten Sie dass der Name im selben Verzeichnis nicht ebreits existiert.</p>
    <input type="text" id="folderName" class="inputLarge">
    <h2>2. Datei wählen</h2>
    <div>
        <input type="submit" id="addFile" name="addFile" class="clear" value="Datei wahlen"/>
    </div>
    <h2>3. Datei hochladen</h2>
    </form>
    <input type="submit" id="addFileSubmit" class="clear" value="Speichern"/>
</div>

Und mein javascript:

// File Upload loader
function loadFileUpload(){
    // File upload script
    $('#addFile').uploadify({
        'uploader'  : '/extLibs/js/uploadify/uploadify.swf',
        'script'    : '/extLibs/js/uploadify/uploadify.php',
        'cancelImg' : '/extLibs/js/uploadify/cancel.png',
        'folder'    : '/uploads'
    });
}

// File upload
    $('#addFileSubmit').live('click', function(){
        $('#addFile').uploadifyUpload();
    }); 

Da mein HTML zum hochladen einer Datei via Ajax geladen wird, wird die Funktion loadFileUpload() nach dem Ajax Aufruf neu geladen.

Wie gesagt im Firefox tuts tadellos, nur im IE8 hab ich Probleme.

Jemand Erfahrung mit dem plugin?

Grüsse

eXe

[Forumsgast]

Welche jQuery-Version nimmst du denn her? Evtl.hilft dir 1.4.4rc2 weiter. Ob es was bringen könnte, weiss ich nicht, da du leider nicht schreibst, welche Version du einsetzt. Ich kenn das Plugin nicht, aber wieso ist der Click-Event per live-Delegation an den id-Selector addFileSubmit gebunden? Wieso nicht nur click? Ohne mehr Code verstehe ich auch nicht, wieso du uploadify in eine Funktion gekapselt hast, auch dort verwendest du einen id-Selector. Hast du das alles mal ohne live ausprobiert?
Live und delegate machen dann Sinn, wenn du viele Elemente über eine gemeinsame Klasse ansprechen möchtest (oder per traversing auf die Kindelemente eines Knotens, den du per eindeutiger ID ansprichst). So sieht das spontan nach einer unnötigen Fehlerquelle aus, die noch dazu Performance kostet. Stell dir einfach vor, anstatt das per click direkt auf das Element zu binden, hängst du jedes mal per live an die Spitze des DOMs einen Event Listener, der überprüft, welches Element gerade geklickt wurde. Jeder dieser Event Listener wird nun bei jedem Click aufgerufen und durchgegangen. delegate ist im Prinzip das gleiche, nur wird der Listener entsprechend tiefer gesetzt und kostet damit weniger Performance, wenn du viele dieser Events auf deiner Seite hast, die stattdessen an unterschiedlichen Knoten hängen könnten.

Da mein HTML zum hochladen einer Datei via Ajax geladen wird, wird die Funktion loadFileUpload() nach dem Ajax Aufruf neu geladen.

Dann fehlt da das unbind() vor dem uploadify-Aufruf. Die DOM-Operation des Ajax-Callbacks wäre interessant.

Wie gesagt im Firefox tuts tadellos, nur im IE8 hab ich Probleme.

Ohne unbind kann das auch im Firefox zu üblen memleaks führen. Kannst ja mal testhalber den Speicherverbrauch anschauen, das Plugin ein paar mal laufen lassen und dir die Speicherauslastung ansehen (v.a. ob der RAM komplett wieder frei gegeben wird, wenn du Firefox irgendwann schließt, ist dann sehr interessant. Bei mir unter Linux läuft da locker flockig der RAM zu). Siehe auch dieses FF Addon.

grüße


Basti

[Forumsgast]

hey Basti

Vielen Dank für deine ausführliche Antwort. Der Grund weshalb das alles über live läuft ist dieser, dass bei meinem Projekt der ganze, ich sag mal "Workspace" via Ajax geladen wird. Lediglich Header, Navigation ( teilweise ), sowie Footer bleiben stehen. Der ganze Bereich wo der Inhalt der Seite hinkommt wird via Ajax nachgeladen, darum brauche ich den live() Handler.

Grundsätzlich ist das System wie folgt aufgebaut:

$(document).ready(function(){

    // Load basic functionality
    userListInit();
    loadPage();
    formStyle();
    
    // This is our Ajax Page Loader
    $(".loadPage").click(function (){
        // Remove the active class from all other elements
        $('.loadPage').removeClass('active');
        $(this).addClass('active');
        // Split Identifier
        var link = $(this).attr('id').split("_")
        $.ajax({
            url: "libs/php/ajax/request.php",
            type: "POST",
            data: "module=" + link[0] + "&function=" + link[1],
            cache: false,
            success: function (html){
                //$('#workSpace').toggle('slide', {direction: "left"}, 100);
                $('#workSpace').html(html);
                //$('#workSpace').toggle('slide', {direction: "left"}, 300);
                userListInit();
            }
        });
    });

    // General Information Box
    $('#statusBox').ajaxStart(function(){
        setStatusBox('Load','Loading data...');
    });

    $('#statusBox').ajaxSuccess(function(){
        setStatusBox('True','Loading data successfully completed.');
        formStyle();
        loadFileUpload();
        setTimeout(function() { $('#statusBox').slideToggle(); }, 1000);
    });

    $('#statusBox').ajaxError(function(event, request, settings){
        setStatusBox('False','Ajax request failed:' + settings.url);
    });
}); 

Ich hab also meine Navigation mit der Klasse .loadPage ausgestatet. Die Id des links sieht dann Beispielsweise so aus:

<li id="projects_new" class="loadPage">Neues Projekt</li>

Dies korrespondiert mit dem URI Aufruf:

appServer.ch/de_CH/projects/new

Da meine einzelnen Seiten alle dynamisch mit ajax geladen werden musste ich einen Weg finden wie ich die Seite öffnen kann via direkter URI ( welche mit mod_rewrite und meiner urlParser Klasse aufgelöst wird ) und auch via link in der Navigation.

Damit auch der richtige Inhalt geladen wird wenn ich direkt via URI auf eine Unterseite zugreiffe habe ich noch einen AutoLoad Div Container in meiner Hauptdatei eingebaut:

<!-- Here goes all the stuff -->
<div id="workSpace">
    <?PHP
    $module     = new modules();
    $module     = $module->getModule();
    $url        = new urlworker();
    $function   = $url->getFunction();
    if($function == ""){
        $function = $lang["projects"]["functions"]["dashboard"];
    }
    echo "<div id=\"".$module."_".$function."\" class=\"autoLoad\"></div>";
    ?>
</div>
<!-- End of the workSpace container -->

Dazu die korrespondierende jquery funktion:

// AutoLoad Function for Ajax Calls
function loadPage(){
    // Split Identifier
    var link = $('.autoLoad').attr('id').split("_")
    $.ajax({
        url: "libs/php/ajax/request.php",
        type: "POST",
        data: "module=" + link[0] + "&function=" + link[1],
        cache: false,
        success: function (html){
            //$('#workSpace').toggle('slide', {direction: "left"}, 100);
            $('#workSpace').html(html);
            //$('#workSpace').toggle('slide', {direction: "left"}, 500);
            userListInit();
        }
    });
} 

Und wie du oben gesehen hast wird diese bei document.ready ausgeführt.

Ich hoffe das war jetzt nicht zu umständlich erklärt, ansonsten können wir das auch gern mal kurz via Skype besprechen.

Jetzt sind wir aber ein wenig abgeschweift vom Thema, wobei dies nur bedingt stimmt denn jetzt kann ich dir auch direkt zeigen wo der Fehler liegt, den habe ich mittlerweile herausgefunden.

Du siehst mein Inhalt wird mit Hilfe von toggle von links nach rechts in die Seite geflogen. Dies hier:

//$('#workSpace').toggle('slide', {direction: "left"}, 100);
$('#workSpace').html(html);
//$('#workSpace').toggle('slide', {direction: "left"}, 300);

Wie du siehst habe ich diesen Effekt auskommentiert. Jetzt funktioniert uploadify!!!

Nur wenn der Workspace mit toggle() reingeflogen kommt dann funktioniert es nicht.

Dazu habe ich auch folgenden Beitrag gefunden, allerdings ohne Lösung:

http://www.uploadify.com/forums/discussion/6616/

Vielleicht siehst du ja durch den Beitrag hindurch, ich versteh da nur Banhof.

Vielen Dank Basti und Malzeit!

eXe

[Forumsgast]

Die jquery-1.4.4rc2.js ändert leider auch nichts an der Inkompatibilität zwischen uploadify + jquery.effect

[Forumsgast]

Nur mal so als Idee:Füg ma den Content erst im Callback der Animation ein. Sprich so:

.toggle( [ duration ], [ easing ], [ callback ] )

$('#workSpace').toggle(
    100, 
    'slideIn', 
    function () {
        $('#workSpace').html(html)
    }
); 

Ansonsten schau dir mal die Kommentare zu toggle an, evtl treffen da die darin beschriebenen Probleme auf deines zu. Mahlzeit

edit: ob das dann slide oder slideIn heisst, weiss ich grad nicht. Wahrscheinlich wohl eher slide oder? Habe mit der Funktion so noch nicht gearbeitet (die alte toggle api arbeitet ja mit 2 handlern)