Discussion :

[Pelote2012]

J'ai mis en pièce jointe un projet de MultiFile-Upload à partir de ce projet github

En ouvrant le projet, la page default.aspx est l'originale et test.aspx la page où j'essaie de mettre les derniers fichiers jquery, car il travaille avec plusieurs versions de ces fichiers, donc pas très propres à mon goût.

Le problème est que dans /FileUpload/js/jquery.fileupload-ui.js
j'ai

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
_initEventHandlers: function () {
            $.blueimp.fileupload.prototype._initEventHandlers.call(this);
            var filesList = this.element.find('.files'),
                eventData = { fileupload: this };
            filesList.find('.start button')
                .live(
                    'click.' + this.options.namespace,
                    eventData,
                    this._startHandler
                );
            filesList.find('.cancel button')
                .live(
                    'click.' + this.options.namespace,
                    eventData,
                    this._cancelHandler
                );
            filesList.find('.delete button')
                .live(
                    'click.' + this.options.namespace,
                    eventData,
                    this._deleteHandler
                );
            filesList.find('.failupload button')
                .live(
                    'click.' + this.options.namespace,
                    eventData,
                    this._deleteHandler
                );
        }

live existe car utilise jquery-1.7.2.min.js
donc dans les doc officiel, je duplique fichier dans /js/jquery.fileupload-ui.js
et remplace me code précédent par

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
_initEventHandlers: function () {
            $.blueimp.fileupload.prototype._initEventHandlers.call(this);
            var filesList = this.element.find('.files');
            var eventData = { fileupload: this };
            filesList.on('click.' + this.options.namespace, ".start button", eventData, this._startHandler);
            filesList.on('click.' + this.options.namespace, ".cancel button", eventData, this._cancelHandler);
            filesList.on('click.' + this.options.namespace, ".delete button", eventData, this._deleteHandler);
            filesList.on('click.' + this.options.namespace, ".failupload button", eventData, this._deleteHandler);
        }

Mais j'ai une erreur (uniquement sur la suppression de fichier) qui me parle de parseerror.
L'erreur vient de

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
destroy: function (e, data) {
                var that = $(this).data('fileupload');
                if (data.url) {
                    $.ajax(data)
                        .fail(function (jqXHR, textStatus) {
                            alert("Deletion request error:" + "\n" + textStatus + "\n" + data.url + "\n" + data.type);
                        })
                        .success(function () {
                            RemoveTxtFileName(data.url);
                            that._adjustMaxNumberOfFiles(1);
                            $(this).fadeOut(function () {
                                $(this).remove();
                            });
                        });
                } else {
                    data.context.fadeOut(function () {
                        $(this).remove();
                    });
                }
            }

qui est un peu plus haut dans le fichier
l'appel $.ajax(data) fait un fail ... alors que sur l'ASHX, tout se passe bien, mon fichier est vraiment supprimé.

La seule différence entre les 2 versions est dans data.context.selector qui est vide dans ma modif alors que dans la version d'origine on a selector = ".closest(.template-download)"

Je ne voit pas d'autres différence, mais je ne comprend pas pourquoi.
Quelqu'un pourrai m'aider à comprendre la différence entre live et on en jquerry

[danielhagnoul]

L'équivalent de : filesList.find( '.start button' ).live( 'click.' + this.options.namespace, eventData, this._startHandler ); est : $( "body" ).on( 'click.' + this.options.namespace, filesList.find( '.start button' ), eventData, this._startHandler );.

[Pelote2012]

J'ai essayé ta méthode... Je suis un peu perplexe ... j'explique.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 _initEventHandlers: function () {
            $.blueimp.fileupload.prototype._initEventHandlers.call(this);
            var filesList = this.element.find('.files');
            var eventData = { fileupload: this };
 
            $("body").on('click.' + this.options.namespace, filesList.find('.start button'), eventData, this._startHandler);
            $("body").on('click.' + this.options.namespace, filesList.find('.cancel button'), eventData, this._cancelHandler);
            $("body").on('click.' + this.options.namespace, filesList.find('.delete button'), eventData, this._deleteHandler);
            $("body").on('click.' + this.options.namespace, filesList.find('.failupload button'), eventData, this._deleteHandler);
 
            //filesList.on('click.' + this.options.namespace, ".start button", eventData, this._startHandler);
            //filesList.on('click.' + this.options.namespace, ".cancel button", eventData, this._cancelHandler);
            //filesList.on('click.' + this.options.namespace, ".delete button", eventData, this._deleteHandler);
            //filesList.on('click.' + this.options.namespace, ".failupload button", eventData, this._deleteHandler);
        }

Je me prend une erreur dans jquery.min.js d'un objet non reconnu, et le code marche plus.

Si je ne mets que la ligne du delete ... j'ai toujours cette erreur d'objet non reconnu, mais le code marche ...

sur http://api.jquery.com/live/

$( selector ).live( events, data, handler ); // jQuery 1.3+
$( document ).delegate( selector, events, data, handler ); // jQuery 1.4.+
$( document ).on( events, selector, data, handler ); // jQuery 1.7+

Or filesList.find('.failupload button') n'est pas un selector ...
Mais merci de l'idée ...

J'ai essayé ça aussi, mais j'ai exactement le même problème

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
_initEventHandlers: function () {
            $.blueimp.fileupload.prototype._initEventHandlers.call(this);
            var filesList = this.element.find('.files');
            var eventData = { fileupload: this };
 
            $(document).on('click.' + this.options.namespace, ".files .start button", eventData, this._startHandler);
            $(document).on('click.' + this.options.namespace, ".files .cancel button", eventData, this._cancelHandler);
            $(document).on('click.' + this.options.namespace, ".files .delete button", eventData, this._deleteHandler);
            $(document).on('click.' + this.options.namespace, ".files .failupload button", eventData, this._deleteHandler);
        }

Fait bizarre je reviens sur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/FileUpload/js/jQuery/1.9.0/jquery-ui.js"></script>

et ça marche nickel ... sauf sur IE10 avec le chargement de plusieurs fichiers... et si je mets la version jquery.ui 10.3 et jquery 1.9.1 j n'ai pas de Widget ... je craque

[danielhagnoul]

Versions obsolètes !

• "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
• "http://code.jquery.com/ui/1.10.3/jquery-ui.js"

CSS : "http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"

[Pelote2012]

Le problème est autre ... je clos ce sujet pour préciser ma demande car ne correspond plus vraiment au thème de départ