Utilisez les événements !
Exemple n° 3
$(function(){
$("#affiche").append("<div id='" + DivModifiable.id + "'><p>" + DivModifiable.texte1 + "</p></div>");
$("#"+DivModifiable.id).css(DivModifiable.css1);
DivModifiable.modifiable(true); // false pout test
/*
* On capte tous les échecs AJAX
*/
$("body").bind("ajaxError", function(event, request, settings){
/*
* si l'échec nous concerne
*/
if (DivModifiable.jsonDataURL === settings.url){
//if ("categori.js" === settings.url){ // pour tester l'échec
var ajaxErrorEvent = new $.Event("ajaxErrorEvent.DivModifiable");
ajaxErrorEvent.dvjh = {
utilisateur: "Daniel Hagnoul",
date: new Date(event.timeStamp),
status: request.status,
type: settings.type,
url: settings.url,
dataType: settings.dataType,
global: settings.global
};
$("#"+DivModifiable.id).trigger(ajaxErrorEvent);
}
});
/*
* L'utilisateur à cliqué sur le bouton "modifier".
* Si DivModifiable.boolModifiable = true
* alors exécuter la requête AJAX
* sinon prévenir l'utilisateur
*/
$("#btnModifier").click(function(){
if (DivModifiable.boolModifiable) {
$.getJSON(DivModifiable.jsonDataURL, function(json){
//$.getJSON("categori.js", function(json){ // pour tester l'échec
var divModifiableEvent = new $.Event("divModifiableEvent.DivModifiable");
divModifiableEvent.dvjh = {
utilisateur: "Daniel Hagnoul",
element: new Array()
};
$.each(json, function(i,item) {
divModifiableEvent.dvjh.element.push([
item.CategoryID,
item.CategoryName,
item.Description,
item.Picture.Length
]);
});
$("#"+DivModifiable.id).trigger(divModifiableEvent);
});
} else {
DivModifiable.alert();
}
});
});
Le fichier divModifiable.js contient l'objet DivModifiable :
try {
var DivModifiable = {
id: "divModifiable",
boolExiste: false,
boolModifiable: false,
texte1: "Aliquam erat volutpat. Phasellus cursus tempor augue. Morbi eu nisi et mi interdum lobortis.
Nullam faucibus, enim quis ultricies imperdiet, ante leo lacinia nisi, vitae malesuada enim orci id dolor.
Maecenas volutpat porta turpis. Ut nibh massa, luctus commodo, cursus eu, ornare eu, nulla. In vitae felis
in ligula tincidunt suscipit. Mauris fermentum, magna nec viverra tristique, magna purus scelerisque ipsum,
vel accumsan enim dui eu eros. In hac habitasse platea dictumst. Praesent aliquet ipsum sit amet tellus.
Vivamus elit est, rhoncus in, iaculis vel, pellentesque sit amet, quam. Nunc id libero eget dolor molestie
hendrerit. Etiam odio lectus, venenatis ut, porta eu, luctus ut, libero. Morbi lacinia, urna in tristique
fringilla, urna libero convallis velit, nec auctor neque nulla eget ante. Sed elementum.",
texte2: "Ut sagittis lobortis dolor. Sed aliquam velit. Nulla ultrices, nisi ut ultrices ullamcorper,
arcu erat auctor ante, a malesuada elit enim vel neque. Cras imperdiet lacus non lectus. Nulla sodales,
diam id fermentum pellentesque, dolor urna interdum quam, et lacinia turpis dui vitae diam. Integer ut
mauris. Nam ligula. Morbi lobortis, lectus ut dictum elementum, justo tortor rutrum erat, nec fringilla
eros nisi in nisl. Sed quis quam a est accumsan congue. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Vivamus tempor. Integer vestibulum, justo vel suscipit lacinia,
erat urna aliquet nulla, ac malesuada nunc neque vitae dolor. Ut vel nisi. Vivamus urna ligula, molestie
scelerisque, congue quis, venenatis non, urna. Praesent mi ipsum, vulputate ac, pharetra eu, interdum eu, urna.
Nullam felis nunc, aliquet a, eleifend a, mollis id, nunc. Phasellus sodales. Aliquam consectetur leo non odio.",
jsonDataURL: "category.js",
modifiable: function(trueORfalse){
if ($("#"+this.id)[0] != undefined){
this.boolExiste = true;
if (this.boolExiste && !this.boolModifiable && (trueORfalse === true)){
this.boolModifiable = true;
// DivModifiable.boolModifiable au lieu de this.boolModifiable car
// le contenu de this peut être modifié par jQuery
$("#"+this.id).bind("divModifiableEvent.DivModifiable",
{modifiable: DivModifiable.boolModifiable}, DivModifiable.divModifiableEventHandler);
$("#"+this.id).bind("ajaxErrorEvent.DivModifiable", DivModifiable.ajaxErrorEventHandler);
} else if (this.boolExiste && this.boolModifiable && (trueORfalse === false)){
this.boolModifiable = false;
/*
* On n'attend plus aucun événement
*/
$("#"+this.id).unbind("divModifiableEvent.DivModifiable");
$("#"+this.id).unbind("ajaxErrorEvent.DivModifiable");
}
} else {
window.alert("Il est impossible de rendre modifiable ou non modifiable la
div d'id='" + DivModifiable.id + "' car elle n'existe pas encore !\n\n
Pour créer cette division vous pouvez suivre l'exemple suivant :\n\n
$(\"#conteneur\").append(\"<div id=' \" + DivModifiable.id +
\" '><p>\" + DivModifiable.texte1 + \"</p></div>\"); \n\n
$(\"#\"+ DivModifiable.id).css(DivModifiable.css1); \n\n DivModifiable.modifiable(false);");
}
},
alert: function(){
if (!window.confirm("La division d'id='" + DivModifiable.id +
"' a été rendue non modifiable. Vous pouvez confirmez cet état en cliquant
sur \"Ok\" ou la rendre modifiable en cliquant sur le bouton \"Cancel\".")){
DivModifiable.modifiable(true);
}
},
divModifiableEventHandler: function(event){
var s = [];
s.push("<p><span style='color:#FF0000;'>Les attributs réservés :</span>");
s.push("event.type = " + event.type);
s.push("event.target = " + event.target);
s.push("event.target.id = " + event.target.id);
s.push("event.data = " + event.data);
s.push("event.data.modifiable = " + event.data.modifiable);
s.push("event.relatedTarget = " + event.relatedTarget);
s.push("event.currentTarget = " + event.currentTarget);
s.push("event.currentTarget.id = " + event.currentTarget.id);
s.push("event.pageX = " + event.pageX);
s.push("event.pageY = " + event.pageY);
s.push("event.result = " + event.result);
s.push("event.timeStamp = " + event.timeStamp);
s.push("new Date(event.timeStamp) = " + new Date(event.timeStamp));
var d = event.dvjh;
s.push("</p><p><span style='color:#FF0000;'>Vos données :</span>");
s.push("event.dvjh.utilisateur = " + d.utilisateur);
s.push("event.dvjh.element.length = " + d.element.length);
s.push("</p>");
$("#affiche").append(s.join("<br/>"));
var texte3 = "";
for (var n in d.element){
texte3 += "Element = " + n + " : Category ID = " + d.element[n][0] +
" — Category Name = " + d.element[n][1] +
" — Description = " + d.element[n][2] +
" — Picture Length = " + d.element[n][3] + "<br/>";
}
// DivModifiable.texte2 au lieu de this.texte2 car le contenu de this peut être modifié par jQuery
$("#"+this.id).html("<p>" + DivModifiable.texte2 + "</p><p>" + texte3 + "</p>").css(DivModifiable.css2);
return false;
},
ajaxErrorEventHandler: function(event){
/*
* On rend la division non modifiable (on n'attend plus d'événements)
*/
DivModifiable.modifiable(false);
/*
* On prévient l'utilisateur
*/
window.alert("Veuillez accepter nos excuses, votre demande de modification n'a
pu aboutir pour une raison indépendante de notre volonté. Nos techniciens sont prévenus,
ils feront diligence pour résoudre ce problème dans les meilleurs délais.");
/*
* On prépare les données à transmettre
*/
var d = event.dvjh;
var s = [];
s.push("utilisateur = " + d.utilisateur);
s.push("date = " + d.date);
s.push("request status = " + d.status);
s.push("settings type = " + d.type);
s.push("settings url = " + d.url);
s.push("settings dataType = " + d.dataType);
s.push("settings global = " + d.global);
/*
* On transmet à qui de droit.
* Ici, simple alert() pour l'utilisateur.
*/
window.alert("Échec d'une requête AJAX, paramètres :\n" + s.join("\n"));
return false;
},
css1: {
margin:"12px",
padding:"6px",
border:"1px solid #999999"
},
css2: {
margin:"12px",
padding:"6px",
border:"2px solid #FF0000"
}
};
}
catch(ex){
alert("Erreur ! Objet DivModifiable : " + ex);
}
Le fichier category.js contient le JSON :
[
{
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales",
"Picture": {
"Length": 10746
}
},
{
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings",
"Picture": {
"Length": 10746
}
},
{
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads",
"Picture": {
"Length": 10746
}
}
]