Je suis en train d'essayer d'optimiser ma fonction que voici :
Pour se faire, j'ai rédigé cela :
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)
/*! 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é' + 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é' + 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é' + 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é<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ériode erroné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é' + 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é' + 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é' + 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é<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ériode erroné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)