Optimisation de fonction :

Question

Klesk

2 Oct 2012 à 13:50

Je suis en train d'essayer d'optimiser ma fonction que voici :


/*! Appel formulaire générique */
$('.bouton_ajax').fancybox({
	href: $(this).attr('href'),
	type: 'ajax',
	wrapCSS: 'fancybox-custom',
	closeClick: false,
	openEffect: 'elastic',
	openSpeed: 200,
	closeEffect: 'elastic',
	closeSpeed: 200,
	helpers: {
		overlay: {
			css: {'background-color': '#eee'}
		}
	},
	beforeShow: function () {
		$(".datepicker").datepicker();
		$('.formulaire').on('submit', function () {
			var contenu = getContenu();
			var feminin = feminisation();
			$.ajax({
				url: $(this).attr('action'),
				type: $(this).attr('method'),
				data: $(this).serialize(),
				dataType: 'json',
				success: function ( json ) {
					if (json.reponse == 'ajout ok') {
						refresh_ajax();
						$.fancybox({
							wrapCSS: 'fancybox-confirmation-ok',
							closeClick: false,
							closeBtn: false,
							openEffect: 'elastic',
							closeEffect: 'elastic',
							openSpeed: 200,
							closeSpeed: 200,
							height: 50,
							width: 300,
							content: '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">Votre ' + contenu + ' est ajout&eacute;' + feminin + '<img style="position:absolute;right:30px;bottom:30px;" src="http://www.monurl/emm/template/images/confirmation-ok.png" height="50" width="50" alt=""/></div>',
							helpers: {overlay: {css: {'background-color': '#eee'}}}
						});
						fbClose();
					} else if (json.reponse == 'modification ok') {
						refresh_ajax();
						$.fancybox({
							wrapCSS: 'fancybox-confirmation-ok',
							closeClick: false,
							closeBtn: false,
							openEffect: 'elastic',
							closeEffect: 'elastic',
							openSpeed: 200,
							closeSpeed: 200,
							height: 50,
							width: 300,
							content: '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">Votre ' + contenu + ' est modifi&eacute;' + feminin + '<img style="position:absolute;right:30px;bottom:30px;" src="http://www.monurl/emm/template/images/confirmation-ok.png" height="50" width="50" alt=""/></div>',
							helpers: {overlay: {css: {'background-color': '#eee'}}}
						});
						fbClose();
					} else if (json.reponse == 'suppression ok') {
						refresh_ajax();
						$.fancybox({
							wrapCSS: 'fancybox-confirmation-ok',
							closeClick: false,
							closeBtn: false,
							openEffect: 'elastic',
							closeEffect: 'elastic',
							openSpeed: 200,
							closeSpeed: 200,
							height: 50,
							width: 300,
							content: '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">Votre ' + contenu + ' est supprim&eacute;' + feminin + '<img style="position:absolute;right:30px;bottom:30px;" src="http://www.monurl/emm/template/images/confirmation-ok.png" height="50" width="50" alt=""/></div>',
							helpers: {overlay: {css: {'background-color': '#eee'}}}
						});
						fbClose();
					} else if (json.reponse == 'envoi mail ok') {
						refresh_ajax();
						$.fancybox({
							wrapCSS: 'fancybox-confirmation-ok',
							closeClick: false,
							closeBtn: false,
							openEffect: 'elastic',
							closeEffect: 'elastic',
							openSpeed: 200,
							closeSpeed: 200,
							height: 50,
							width: 300,
							content: '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">Votre envoi de mail est effectu&eacute;<img style="position:absolute;right:30px;bottom:30px;" src="http://www.monurl/emm/template/images/confirmation-ok.png" height="50" width="50" alt=""/></div>',
							helpers: {overlay: {css: {'background-color': '#eee'}}}
						});
						fbClose();
					} else if (json.reponse == 'periode ko') {
						refresh_ajax();
						$.fancybox({
							wrapCSS: 'fancybox-confirmation-ko',
							closeClick: false,
							closeBtn: false,
							openEffect: 'elastic',
							closeEffect: 'elastic',
							openSpeed: 200,
							closeSpeed: 200,
							height: 50,
							width: 300,
							content: '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">P&eacute;riode erron&eacute;e<img style="position:absolute;right:30px;bottom:30px;" src="http://www.monurl/emm/template/images/confirmation-ok.png" height="50" width="50" alt=""/></div>',
							helpers: {overlay: {css: {'background-color': '#eee'}}}
						});
						fbClose();
					} else {
						jsonKO();
						fbClose();
					}
					
				}
			});
			return false;
		});
	}
});

Pour se faire, j'ai rédigé cela :


/*! Appel formulaire générique */
$('.bouton_ajax').fancybox({
	href: $(this).attr('href'),
	type: 'ajax',
	wrapCSS: 'fancybox-custom',
	closeClick: false,
	openEffect: 'elastic',
	openSpeed: 200,
	closeEffect: 'elastic',
	closeSpeed: 200,
	helpers: {
		overlay: {
			css: {'background-color': '#eee'}
		}
	},
	beforeShow: function () {
		$(".datepicker").datepicker();
		$('.formulaire').on('submit', function () {
			var contenu = getContenu();
			var feminin = feminisation();
			$.ajax({
				url: $(this).attr('action'),
				type: $(this).attr('method'),
				data: $(this).serialize(),
				dataType: 'json',
				success: function ( json ) {
					if (json.reponse != '') {
						refresh_ajax();
						$.fancybox({
							function ( json ) {
								if (json.reponse == 'ajout ok') {
									wrapCSS: 'fancybox-confirmation-ok',
									content: '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">Votre ' + contenu + ' est ajout&eacute;' + feminin + '<img style="position:absolute;right:30px;bottom:30px;" src="http://www.monurl/emm/template/images/confirmation-ok.png" height="50" width="50" alt=""/></div>',
								} else if (json.reponse == 'modification ok') {
									wrapCSS: 'fancybox-confirmation-ok',
									content: '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">Votre ' + contenu + ' est modifi&eacute;' + feminin + '<img style="position:absolute;right:30px;bottom:30px;" src="http://www.monurl/emm/template/images/confirmation-ok.png" height="50" width="50" alt=""/></div>',
								} else if (json.reponse == 'suppression ok') {
									wrapCSS: 'fancybox-confirmation-ok',
									content: '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">Votre ' + contenu + ' est supprim&eacute;' + feminin + '<img style="position:absolute;right:30px;bottom:30px;" src="http://www.monurl/emm/template/images/confirmation-ok.png" height="50" width="50" alt=""/></div>',
								} else if (json.reponse == 'envoi mail ok') {
									wrapCSS: 'fancybox-confirmation-ok',
									content: '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">Votre envoi de mail est effectu&eacute;<img style="position:absolute;right:30px;bottom:30px;" src="http://www.monurl/emm/template/images/confirmation-ok.png" height="50" width="50" alt=""/></div>',
								} else if (json.reponse == 'periode ko') {
									wrapCSS: 'fancybox-confirmation-ko',
									content: '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">P&eacute;riode erron&eacute;e<img style="position:absolute;right:30px;bottom:30px;" src="http://www.monurl/emm/template/images/confirmation-ko.png" height="50" width="50" alt=""/></div>',
								} else {
									wrapCSS: 'fancybox-confirmation-ko',
									content: '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">Erreur : ' + json.reponse + '<img style="position:absolute;right:30px;bottom:25px;" src="http://www.monurl/emm/template/images/confirmation-ko.png" height="50" width="50" alt=""/></div>',
								}
							},
							closeClick: false,
							closeBtn: false,
							openEffect: 'elastic',
							closeEffect: 'elastic',
							openSpeed: 200,
							closeSpeed: 200,
							height: 50,
							width: 300,
							helpers: {overlay: {css: {'background-color': '#eee'}}}
						});
						fbClose();
					} else {
						jsonKO();
						fbClose();
					}
					
				}
			});
			return false;
		});
	}
});

Avec ça je divise par deux mon code. Toutefois je n'ai pas encore pu en tester el bon fonctionnement car j'ai l'erreur suivante dans firebug :

SyntaxError: missing : after property id
function ( json ) {

Si quelqu'un à une idée. Je pense qu'il doit y avoir un souci de syntaxe mais je ne le trouve pas.
Modifié par Klesk (02 Oct 2012 - 13:53)

~~supprimé~~

2 Oct 2012 à 15:03

Ton code ne peux pas marcher car ta fonction

function ( json ) {..}

ne peux pas s'inclure comme ça au beau milieu de la déclaration d 'un objet !

Pour réduire ton code, il te faut créer la fonction :


function Nom_De_La_Fonction(json, contenu, feminin) {
	// options par défaut
	var opt = {
		closeClick: false,
		closeBtn: false,
		openEffect: 'elastic',
		closeEffect: 'elastic',
		openSpeed: 200,
		closeSpeed: 200,
		height: 50,
		width: 300,
		helpers: {overlay: {css: {'background-color': '#eee'}}}
	};

	if ( json.reponse == 'ajout ok' ) {
		opt.wrapCSS = 'fancybox-confirmation-ok';
		opt.content = '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">Votre ' + contenu + ' est ajout&eacute;' + feminin + '<img style="position:absolute;right:30px;bottom:30px;" src="http://www.monurl/emm/template/images/confirmation-ok.png" height="50" width="50" alt=""/></div>';
		opt.etc = '...';
	}
	else if ( json.reponse == 'modification ok' ) {
		opt.wrapCSS = 'fancybox-confirmation-ok';
		opt.content = '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">Votre ' + contenu + ' est modifi&eacute;' + feminin + '<img style="position:absolute;right:30px;bottom:30px;" src="http://www.monurl/emm/template/images/confirmation-ok.png" height="50" width="50" alt=""/></div>';
		opt.etc = '...';
	}

	// on renvoit les options
	return opt;
}

Puis ensuite tu appel cette fonction :

$.fancybox(Nom_De_La_Fonction(json, contenu, feminin));

Modifié par MrJO (02 Oct 2012 - 15:16)

Klesk

2 Oct 2012 à 15:15

C'est pourtant ce que je fais dans la première version de mon code et ça marche parfaitement bien Smiley smile

.

~~supprimé~~

2 Oct 2012 à 15:18

non, je ne vois pas ça dans ton 1er code! Moi je parle de la 2ème fonction anonyme que tu créé

function ( json ) {..}

pour gérer les options envoyées à fancybox.
Modifié par MrJO (02 Oct 2012 - 15:21)

Klesk

2 Oct 2012 à 15:41

Ahh oui ok je vois au temps pour moi Smiley smile

. Merci JO je vais checker ça tranquilement ce soir. Je cherchais effetivement comment je pouvais envoyer des variables a fancybox sans etre obligé de redéclarer tout à chaque fois. Ton code répond parfaitement à ce besoin.

EDIT : A quoi sert exactement le renvoi des options à la fin de la fonction ?
Modifié par Klesk (02 Oct 2012 - 17:11)

Klesk

2 Oct 2012 à 17:40

Alors en me basant sur ton code j'ai fais ça :


/*! Définition Fonction FB formulaire générique */
function fbType(json, contenu, feminin) {
	var opt = {
		closeClick: false,
		closeBtn: false,
		openEffect: 'elastic',
		closeEffect: 'elastic',
		openSpeed: 200,
		closeSpeed: 200,
		height: 50,
		width: 300,
		helpers: {overlay: {css: {'background-color': '#eee'}}}
	};
	if (json.reponse == 'ajout ok') {
		opt.wrapCSS: 'fancybox-confirmation-ok';
		opt.content: '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">Votre ' + contenu + ' est ajout&eacute;' + feminin + '<img style="position:absolute;right:30px;bottom:30px;" src="http://www.monurl.com/emm/template/images/confirmation-ok.png" height="50" width="50" alt=""/></div>';
	} else if (json.reponse == 'modification ok') {
		opt.wrapCSS: 'fancybox-confirmation-ok';
		opt.content: '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">Votre ' + contenu + ' est modifi&eacute;' + feminin + '<img style="position:absolute;right:30px;bottom:30px;" src="http://www.monurl.com/emm/template/images/confirmation-ok.png" height="50" width="50" alt=""/></div>';
	} else if (json.reponse == 'suppression ok') {
		opt.wrapCSS: 'fancybox-confirmation-ok';
		opt.content: '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">Votre ' + contenu + ' est supprim&eacute;' + feminin + '<img style="position:absolute;right:30px;bottom:30px;" src="http://www.monurl.com/emm/template/images/confirmation-ok.png" height="50" width="50" alt=""/></div>';
	} else if (json.reponse == 'envoi mail ok') {
		opt.wrapCSS: 'fancybox-confirmation-ok';
		opt.content: '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">Votre envoi de mail est effectu&eacute;<img style="position:absolute;right:30px;bottom:30px;" src="http://www.monurl.com/emm/template/images/confirmation-ok.png" height="50" width="50" alt=""/></div>';
	} else if (json.reponse == 'periode ko') {
		opt.wrapCSS: 'fancybox-confirmation-ko';
		opt.content: '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">P&eacute;riode erron&eacute;e<img style="position:absolute;right:30px;bottom:30px;" src="http://www.monurl.com/emm/template/images/confirmation-ko.png" height="50" width="50" alt=""/></div>';
	} else {
		opt.wrapCSS: 'fancybox-confirmation-ko';
		opt.content: '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">Erreur : ' + json.reponse + '<img style="position:absolute;right:30px;bottom:25px;" src="http://www.monurl.com/emm/template/images/confirmation-ko.png" height="50" width="50" alt=""/></div>';
	}
	return opt;
};

/*! Appel formulaire générique */
$('.bouton_ajax').fancybox({
	href: $(this).attr('href'),
	type: 'ajax',
	wrapCSS: 'fancybox-custom',
	closeClick: false,
	openEffect: 'elastic',
	openSpeed: 200,
	closeEffect: 'elastic',
	closeSpeed: 200,
	helpers: {overlay: {css: {'background-color': '#eee'}}},
	beforeShow: function () {
		$(".datepicker").datepicker();
		$('.formulaire').on('submit', function () {
			var contenu = getContenu();
			var feminin = feminisation();
			$.ajax({
				url: $(this).attr('action'),
				type: $(this).attr('method'),
				data: $(this).serialize(),
				dataType: 'json',
				success: 
					refresh_ajax();
					$.fancybox(fbType(json, contenu, feminin));
					fbClose();
			})
		});
		return false;
	}
});

Ma console Firebug me retourne ça :

SyntaxError: invalid label
opt.wrapCSS: 'fancybox-confirmation-ok';
Modifié par Klesk (02 Oct 2012 - 17:41)

~~supprimé~~

2 Oct 2012 à 19:31

hum ok, en fait je pense qu'il faut déclarer les labels avant donc rajouter ça au début dans :


	var opt = {
		closeClick: false,
		closeBtn: false,
		openEffect: 'elastic',
		closeEffect: 'elastic',
		openSpeed: 200,
		closeSpeed: 200,
		height: 50,
		width: 300,
		helpers: {overlay: {css: {'background-color': '#eee'}}},
		wrapCSS: false,
		content: false
	};

~~supprimé~~

2 Oct 2012 à 19:40

En poussant encore plus l'optimisation tu pourrais définir par défaut :

wrapCSS: 'fancybox-confirmation-ok'

comme ça tu n'aurais que pour

else if (json.reponse == 'periode ko')

et le

else

ou tu devrais indiquer

opt.wrapCSS: 'fancybox-confirmation-ko';

Ensuite pour encore plus réduire le bazard rajoute un petit :

var content = '';

juste après le

var opt = {...};

comme ça dans tes if et else tu ne fait que remplir cette nouvelle variable. Ex:


if (json.reponse == 'ajout ok') {
		content = 'Votre ' + contenu + ' est ajout&eacute;' + feminin;
	}
else if (json.reponse == 'modification ok') {
		content = 'Votre ' + contenu + ' est modifi&eacute;' + feminin;
	}
else if (etc) {...}

et tout à la fin après tous tes if et else juste avant le

return opt;

faire


opt.content: '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">' + content + '<img style="position:absolute;right:30px;bottom:30px;" src="http://www.monurl.com/emm/template/images/confirmation-ok.png" height="50" width="50" alt=""/></div>';

Klesk

2 Oct 2012 à 21:22


/*! Définition Fonction FB formulaire générique */
function fbType(json, contenu, feminin) {
	var opt = {
		closeClick: false,
		closeBtn: false,
		openEffect: 'elastic',
		closeEffect: 'elastic',
		openSpeed: 200,
		closeSpeed: 200,
		height: 50,
		width: 300,
		helpers: {overlay: {css: {'background-color': '#eee'}}},
		wrapCSS: 'fancybox-confirmation-ok',
		content: false
	};
	var content = '';
	if (json.reponse == 'ajout ok') {
		content = '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">Votre ' + contenu + ' est ajout&eacute;' + feminin + '<img style="position:absolute;right:30px;bottom:30px;" src="../emm/template/images/confirmation-ok.png" height="50" width="50" alt=""/></div>';
	} else if (json.reponse == 'modification ok') {
		content = '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">Votre ' + contenu + ' est modifi&eacute;' + feminin + '<img style="position:absolute;right:30px;bottom:30px;" src="../emm/template/images/confirmation-ok.png" height="50" width="50" alt=""/></div>';
	} else if (json.reponse == 'suppression ok') {
		content = '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">Votre ' + contenu + ' est supprim&eacute;' + feminin + '<img style="position:absolute;right:30px;bottom:30px;" src="../emm/template/images/confirmation-ok.png" height="50" width="50" alt=""/></div>';
	} else if (json.reponse == 'envoi mail ok') {
		content = '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">Votre envoi de mail est effectu&eacute;<img style="position:absolute;right:30px;bottom:30px;" src="../emm/template/images/confirmation-ok.png" height="50" width="50" alt=""/></div>';
	} else if (json.reponse == 'periode ko') {
		opt.wrapCSS: 'fancybox-confirmation-ko';
		content = '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">P&eacute;riode erron&eacute;e<img style="position:absolute;right:30px;bottom:30px;" src="../emm/template/images/confirmation-ko.png" height="50" width="50" alt=""/></div>';
	} else {
		opt.wrapCSS: 'fancybox-confirmation-ko';
		content = '<div style="padding-left:20px;width:300px;height:50px;margin-top:40px;">Erreur : ' + json.reponse + '<img style="position:absolute;right:30px;bottom:25px;" src="../emm/template/images/confirmation-ko.png" height="50" width="50" alt=""/></div>';
	}
	return opt;
};

/*! Appel formulaire générique */
$('.bouton_ajax').fancybox({
	href: $(this).attr('href'),
	type: 'ajax',
	wrapCSS: 'fancybox-custom',
	closeClick: false,
	openEffect: 'elastic',
	openSpeed: 200,
	closeEffect: 'elastic',
	closeSpeed: 200,
	helpers: {overlay: {css: {'background-color': '#eee'}}},
	beforeShow: function () {
		$(".datepicker").datepicker();
		$('.formulaire').on('submit', function () {
			var contenu = getContenu();
			var feminin = feminisation();
			$.ajax({
				url: $(this).attr('action'),
				type: $(this).attr('method'),
				data: $(this).serialize(),
				dataType: 'json',
				success: 
					refresh_ajax();
					$.fancybox(fbType(json, contenu, feminin));
					fbClose();
			})
		});
		return false;
	}
});

Toujours le même message mais avec le label restant :


SyntaxError: invalid label
opt.wrapCSS: 'fancybox-confirmation-ko';

~~supprimé~~

2 Oct 2012 à 23:38

il ne faut pas mettre

opt.wrapCSS: 'fancybox-confirmation-ko';

mais utiliser le égal

opt.wrapCSS = 'fancybox-confirmation-ko';

Klesk

3 Oct 2012 à 00:27

J'avais corrigé entre temps mais ça ne change rien.

~~supprimé~~

3 Oct 2012 à 09:59

Je ne vois pas trop, mais en cherchant un peu sur internet a priori ça viendrait d'une erreur d'interprétation de json.

En regardant plus attentivement ton code je te propose de simplifier enccore plus, et, plutôt que d'envoyer du json dans

function fbType()

il vaudrait mieux envoyer directement la réponse voulu soit :

json.reponse

~~supprimé~~

3 Oct 2012 à 10:08

Ça donnerais ça après avoir repris ton code :


/*! Définition Fonction FB formulaire générique */
function fbType(reponse, contenu, feminin) {
	var opt = {
		closeClick: false,
		closeBtn: false,
		openEffect: 'elastic',
		closeEffect: 'elastic',
		openSpeed: 200,
		closeSpeed: 200,
		height: 50,
		width: 300,
		helpers: {overlay: {css: {'background-color': '#eee'}}},
		wrapCSS: 'fancybox-confirmation-ok',
		content: false
	};

	var content = '';
	var img = '<img style="position:absolute;right:30px;bottom:30px;" src="../emm/template/images/confirmation-ok.png" height="50" width="50" alt=""/>';

	if ( reponse == 'ajout ok' ) {
		content = 'Votre ' + contenu + ' est ajout&eacute;' + feminin;
	}
	else if ( reponse == 'modification ok' ) {
		content = 'Votre ' + contenu + ' est modifi&eacute;' + feminin;
	}
	else if ( reponse == 'suppression ok' ) {
		content = 'Votre ' + contenu + ' est supprim&eacute;' + feminin;
	}
	else if ( reponse == 'envoi mail ok' ) {
		content = 'Votre envoi de mail est effectu&eacute;';
	}
	// a t'on besoin d'un double if avec reponse == 'periode ko' ?
	else {
		opt.wrapCSS = 'fancybox-confirmation-ko';
		content = 'P&eacute;riode erron&eacute;e';
		img = '<img style="position:absolute;right:30px;bottom:30px;" src="../emm/template/images/confirmation-ko.png" height="50" width="50" alt=""/>';
	}

	return opt;
};

/*! Appel formulaire générique */
$('.bouton_ajax').fancybox({
	href: $(this).attr('href'),
	type: 'ajax',
	wrapCSS: 'fancybox-custom',
	closeClick: false,
	openEffect: 'elastic',
	openSpeed: 200,
	closeEffect: 'elastic',
	closeSpeed: 200,
	helpers: {overlay: {css: {'background-color': '#eee'}}},
	beforeShow: function () {
		$(".datepicker").datepicker();
		$('.formulaire').on('submit', function () {
			var contenu = getContenu();
			var feminin = feminisation();
			$.ajax({
				url: $(this).attr('action'),
				type: $(this).attr('method'),
				data: $(this).serialize(),
				dataType: 'json',
				success: function(json) { // tien ! il y avait une erreur ici, il faut que ce soit dans une fonction qd même !
					refresh_ajax();
					$.fancybox(fbType(json.reponse, contenu, feminin));
					fbClose();
				}
			})
		});
		return false;
	}
});

Sujet clos