Problem mit uploadify() im IE8

da.eXecutoR · 03.11.2010, 20:19

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:

Code:

<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:

PHP-Code:

  // 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

rudygotya · 04.11.2010, 08:48

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.

Zitat:

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.

Zitat:

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

da.eXecutoR · 04.11.2010, 11:49

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:

PHP-Code:

  $(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:

Code:

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

Dies korrespondiert mit dem URI Aufruf:

Code:

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:

PHP-Code:

 
<!-- 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:

PHP-Code:

  // 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:

Code:

//$('#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

da.eXecutoR · 04.11.2010, 11:51

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

rudygotya · 04.11.2010, 13:37

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

Zitat:

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

PHP-Code:

  $('#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)

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit Ajax - Session Problem	halskrause	PHP Tipps 2009	10	12.01.2010 02:27
[Erledigt] Problem mit Mehrsprachigkeit	Sniper_Kotaro	PHP Tipps 2009	2	16.12.2009 11:47
Problem beim Download Management	mistermint	PHP Tipps 2009	8	24.10.2009 11:34
Umlaut Problem	nokieone	PHP Tipps 2009	7	16.10.2009 19:30
Problem mit Basedir in PhP	cmuch05	Datenbanken	9	08.01.2009 14:17
[Erledigt] Problem: PHP Selbe Datei mehr als 1 Mal	soulan	PHP Tipps 2008	13	28.11.2008 22:51
Problem Upload mehrere Dateien und schreiben in DB	Lapje	PHP Tipps 2008	1	22.10.2008 13:12
utf8 Problem (Daten aus DB auslesen)	go1denboy	PHP Tipps 2008	1	23.09.2008 12:19
Problem mit swfobjects	R4v3r	JavaScript, Ajax und mehr	8	21.09.2008 14:17
[Erledigt] Galerie Problem...	coraplanet	PHP Tipps 2008	4	06.06.2008 13:42
datensätze defekt oder problem mit dem einlesen?	Ministry	Datenbanken	4	06.07.2006 18:42
problem!!!		PHP Tipps 2006	6	08.02.2006 11:06
Smarty und PHP-Skript Problem		PHP Tipps 2004-2	2	03.12.2004 22:27
Problem mit alter JavaScript-Funktion	woods	PHP Tipps 2004	1	13.08.2004 13:34

03.11.2010, 20:19
da.eXecutoR Erfahrener Benutzer Registriert seit: 08.08.2009 Beiträge: 195 PHP-Kenntnisse: Fortgeschritten	Problem mit uploadify() im IE8 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: Code: <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: PHP-Code: // 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 __________________ It's not a bug. It's a feature!


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

04.11.2010, 11:49
da.eXecutoR Erfahrener Benutzer Registriert seit: 08.08.2009 Beiträge: 195 PHP-Kenntnisse: Fortgeschritten	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: PHP-Code: $(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: Code: <li id="projects_new" class="loadPage">Neues Projekt</li> Dies korrespondiert mit dem URI Aufruf: Code: 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: PHP-Code: <!-- 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: PHP-Code: // 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: Code: //$('#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 __________________ It's not a bug. It's a feature!

04.11.2010, 11:51
da.eXecutoR Erfahrener Benutzer Registriert seit: 08.08.2009 Beiträge: 195 PHP-Kenntnisse: Fortgeschritten	Die jquery-1.4.4rc2.js ändert leider auch nichts an der Inkompatibilität zwischen uploadify + jquery.effect __________________ It's not a bug. It's a feature!