Discussion :

[yoshï]

Bonjour à tous,

Je me pose un question toute bête. Si je "bind" plusieurs fonctions à un même événement, exemple (3 fonctions sur un click de bouton):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
  $(document).on('click', '#submit', function() {
  	function1();			
   });
 
   $(document).on('click', '#submit', function() {
	function2();			
   });
 
    $(document).on('click', '#submit', function() {
	function3();			
   });

Puis je gérer l'ordre d’exécution après pression sur le bouton #submit?
Apparemment avec ce code, les 3 fonctions s'exécutent simultanément or je voudrais que la fonction2 ne démarre qu'à la fin de la fonction 1 et que la 3 ne démarre qu'à la fin de la 2 (Exécution séquentielle).
Je pensais à une solution "bidouille" qui consisterait à déclencher manuellement un nouvel événement avec la fonction .trigger() à la fin de la fonction 1 et 2 puis à lier le démarrage des fonctions 2 et 3 à ces nouveaux événements successifs.

Merci pour votre aide

[SylvainPV]

Non, déclaré de la sorte les trois fonctions s'exécuteront en parallèle. Pour les exécuter séquentiellement, il suffit de les enchaîner tout bêtement (en supposant que ces fonctions soient synchrones)

Code :

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

1
2
3
4
5
$(document).on('click', '#submit', function() {
   function1();
   function2();
   function3();
});

[kaari kosaku]

Tu peux effectuer ce que t'as conseillé Sylvain, en n'oubliant pas que s'il s'agit de fonctions asynchrones (genre appel AJAX), il faudra utiliser des fonctions de callback à la place d'une suite d’exécution.

Celà dit, si tu souhaite déclarer successivement les fonctions appelées, rien ne t’empêche de créer une fonction pour ce fonctionnement, du style :

Code :

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
var execAllFct = function(fctTab) {
    return function() {
        for (var i=0; i<fctTab.length; i++) {
            tabfct[i]()
        }
    }
};
 
var devenirCalife = [
    epouserPrincesse: function() {...},
    comploterAvecIznogoud: function() {...},
    doublerIznogoud: function() {...},
    SavourerSonHarem: function() {...}
];
 
$document.on('click', '#submit', execAllFct(devenirCalife))

Pour un exemple dans le cas de fonctions synchrones.

[yoshï]

Merci pour vos réponses!

Code :

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

1
2
3
4
5
$(document).on('click', '#submit', function() {
   function1();
   function2();
   function3();
});

C'est vrai que cette solution semble la plus simple mais dans mon cas ce n'est pas possible.
Il faut que je détaille un peu plus le contexte:
J'ai une interface qui permet la saisie d'infos par l'utilisateur et l'upload de 2 fichiers.
Pour l'upload j'utilise le plugin "blueimp/jQuery-File-Upload".

Voila à quoi ressemble l'instanciation du plugin pour le champs image $(#file-img):

Code :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
$('#file-img').fileupload({
        dataType: 'json',
	autoUpload: false,
	formData: {type: 'business', proposal: 'demand'},
	add: function (e, data) {
		var uploadErrors = [];
		var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
		if(data.originalFiles[0]['type'] && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
			uploadErrors.push('Not an accepted file type');
		}
		if(data.originalFiles[0]['size'] && data.originalFiles[0]['size'] > 4000000) {
			uploadErrors.push('File size is too big');
		}
		if(uploadErrors.length > 0) {
				alert(uploadErrors.join("\n"));
		} else {
			$.each(data.files, function (index, file) {
				$("#txt-file-img").val(file.name);
			});
			$("#btn_add_valid").on('click',function () {
			        $("#loading_img_modal").modal("show");
			        data.submit();
			});
		}
	},
	done: function (e, data) {
	        $("#loading_img_modal").modal("hide");
	},
	progressall: function (e, data) {
		var progress = parseInt(data.loaded / data.total * 100, 10);
		$('#upload-img .bar').css(
			'width',
			progress + '%'
		);
		$('#img-percentage').text(
			progress + '%'
		);
	},
	fail: function (e, data) {
		alert('Error');
		$("#loading_img_modal").modal("hide");
	}
});

Dans le code ci-dessus, la ligne qui lance l'upload est la suivante:

Code :

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

data.submit();

On voit bien que je fais un bind sur le click du bouton $("#btn_add_valid")

Code :

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

1
2
3
4
5
 
$("#btn_add_valid").on('click',function () {
	$("#loading_img_modal").modal("show");
	data.submit();
});

Le problème c'est que J'ai une autre instance du même genre pour le champs document qui permet l'upload de .pdf ou de .doc.
J'ai également l' appel d'une fonction ajax pour modifier la base de donnée qui se lance aussi lors du click sur $("#btn_add_valid")

Toutes ces fonctions doivent être exécuter dans un certain ordre.
J'ai besoin des infos insérées dans la base pour définir le chemin lors de l'upload des fichiers...

en n'oubliant pas que s'il s'agit de fonctions asynchrones (genre appel AJAX), il faudra utiliser des fonctions de callback à la place d'une suite d’exécution.

Je crois en effet que la solution se situe dans les callbacks. Il faut que je regarde ça de plus près.

[yoshï]

D'après ce que je comprends, si je souhaite que l'upload du document commence quand l'upload de l'image est terminé il me faut faire quelque chose
comme cela:

Code :

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

1
2
3
4
$('#file-img').fileupload({/**Le code pour l'upload de l'image**/})
	.bind('fileuploadprocessdone', function () { 
		$('#file-doc').fileupload({/**Le code pour l'upload du doc **/})
	})

Ensuite il me faut placer ce code dans ma fonction ajax

Code :

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
 
$.ajax({
	type:'POST',
	url:'/index.php?option=com_test&task=addProposal&format=raw',
	data:{	name_en: name_en,
		use_en: use_en,
		desc_en: desc_en
	},
	beforeSend:function(){
		$("#loading_modal").modal("show");
	},
	complete:function(){
		$("#loading_modal").modal("hide");
	},
	success:function(msg){
		$('#file-img').fileupload({/**Le code pour l'upload de l'image**/})
			.bind('fileuploadprocessdone', function () { 
				$('#file-doc').fileupload({/**Le code pour l'upload du doc **/})
			})		
 
	},
});

Pour ajouter en compléxité, les champs pour l'upload sont optionnels ce qui implique que l'utilisateur peut vouloir uploader un document sans uploader d' image!!
Dans ce cas de figure le code ci-dessus ne devrait pas fonctionner... Je continue à chercher.

[kaari kosaku]

Je ne comprend toujours pas pourquoi tu souhaite que l'une de ces actions soit effectuée avant l'autre en fait...

[yoshï]

Je ne comprend toujours pas pourquoi tu souhaite que l'une de ces actions soit effectuée avant l'autre en fait...

La fonction AJAX met à jour la base et j'ai besoin de ces infos pour définir le répertoire dans lequel je vais stocker les fichiers uploadés (Le répertoire est créé juste avant l'upload et porte le nom inséré dans la base).

Pour ce qui est des 2 fonctions d'upload (image et document). J'affiche pour chacune d'entre elles, une barre de chargement. Je souhaitais juste attendre que le premier chargement soit terminé pour faire disparaître le premier loading et faire apparaître le second (peu importe l'ordre en fait)....