Je suis entrain de développer un code javascript pour faire de l’autocomplétion de champs à partir d’une liste de suggestion. Le code a été testé et fonctionne dans un cas simple, cependant le javascript est appelé par un objet métier qui est lui même imbriqué dans un autre objet métier.
La partie concernée se compose d’un objet métier PMFP, et incorpore dans son template l’objet métier Formation.
Pour mieux visualiser je poste le template et un shéma d’expliquation :
Le code JS est identique ( mis à part les variables adaptées au template/objetmétier). Les champs contenant une liste de suggestion s’affichent correctement. Cependant la récupération et l’affectation de ces valeurs dans les champs visés par l’autocomplétion ne fonctionnent pas.
Le Javascript associé à mon objet métier ne s’exécute pas comme il devrait et ne rentre pas dans la boucle concernant le changement de valeur d’un champ.
(function(ui) {
if (!ui) return;
var app = ui.getAjax();
// Hook called by each object instance
Simplicite.UI.hooks.LadFormations = function(o, cbk) {
try {
console.log("LadFormations hooks loading...");
var p = o.locals.ui;
if (p && o.isMainInstance()) {
p.form.onload = function(ctn, obj) {
//Le champ ville contient le code postal et la ville
var ville = ui.getUIField(ctn, obj, "ladFormationsVilleOrganisme");
var cp = ui.getUIField(ctn, obj, "ladFormationsCodePostalOrganisme");
$('#field_ladFormationsCodePostalOrganisme').prop('disabled', true);
console.log("Avancée 1");
ville.ui.on("change mousemove keyup input select click", function() { // ne rentre pas dans la fonction
console.log("blocage dans l'auto complétion");
var valVille = ville.ui.val();
if(valVille.indexOf(' ')>0){
ville.ui.val(valVille.substring(6));
cp.ui.val(valVille.substring(0.5));
$('#field_ladFormationsCodePostalOrganisme').val(valVille.substring(0,5));
// on récupère les 5 premières valeurs de ville, qui équivaut au cp
ui.getUIField(ctn, obj, "ladFormationsCodePostalOrganisme").setValue(valVille.substring(0,5));
}
});
//...
};
}
}
catch(e) {
app.error("Error in Simplicite.UI.hooks.LadFormations: " + e.message);
console.log("Erreur : ", e.message);
}
finally {
console.log("LadFormations hooks loaded.");
cbk && cbk(); // final callback
}
};
})(window.$ui);
Console
Est ce que le problème vient de l’imbrication d’un obj métier dans un autre ?
Merci
Pourquoi ce filtre par code sur la main instance = instance parent ?
dans le cas d’un objet incorporé (Link 0,n ou 0,1…), ça reste une instance liée / donc panel qui est utilisée pour appliquer les règles de gestion d’un panel fils (filtre sur la foreign-key…).
Mettez un “debugger” dans le code pour voir à quel niveau votre code n’est pas appelé.
mais je pense que vous ne testez pas la bonne instance.
ERRATUM
c’est bien l’instance “main” qui est affichée dans le cas d’un lien 0,1 incorporé, car dans Simplicité seul les instance Main font des mises à jour (displayForm travaille sur l’instance main).
Suite à quelques tests, la fonction getUIField ne ramène effectivement pas bien le champ intégré car l’input porte un ‘id’ un peu différent (avec le nom de la vue, et pas juste field_<name>) pour ne pas le confondre avec d’autres champs éventuellement incorporés.
On va corriger rapidement. En attendant comme contournement temporaire, vous pouvez identifier le champ directement via jQuery :
$("#id").change(...)
où “id” est à remplacer par l’id généré sur l’input en fonction de votre config, via l’inspecteur du navigateur c’est très facile de le trouver dans votre formulaire.
Je vous remercie de votre réponse. Le contournement fonctionne, je vous remercie.
Cependant j’aurai une autre question sur le comportement de form.onload, je constate que lorsque je clique sur un élément de la liste de suggestion dans le champ ville, le champ code postal est bien rempli et la liste disparaît. Ensuite lorsque je clique sur n’importe quel champ, ou le bouton enregistrer/enregistrer & fermer, la fonction de p.form.onload est rappelée et refait le traitement sur la chaine de caractères présent dans le champ ville.
Lorsque je sélectionne un élément de ville en utilisant le clavier, je peux enregistrer ou passer à un autre champ sans causer un nouveau traitement.
Pourriez vous m’éclairer sur le comportement du form.onload, et quand est-ce qu’il est exécuté ? Car il semblerait que je ne sorte pas de la fonction ( lorsque je sélectionne un champ avec le clic de ma souris).
La méthode est appelée à chaque affichage ou rechargement du formulaire (à la fin du $ui.displayForm appel du onload + ajout d’un trigger pour exécuter le unload éventuel quand on en sort).
Enregistrer = réaffiche le formulaire complètement pour appliquer les éventuels changements de définition suite au “save” en back, les données à jour, contraintes…
Enregistrer/fermer = je ne pense pas que ça réaffiche le formulaire, ça revient juste en arrière dans la navigation (retour à la liste ou sur un autre formulaire qui a peut être aussi un onload…)
Simplicité réappelle le onload à chaque fois, car vos champs ont été détruits, il faut bien réappliquer les bindings sur les nouveaux inputs.
En fait le verbe getUIField permet déjà de sélectionner un champ incorporé, la signature complete est la suivante :
$ui.getUIField(ctn, obj, field, index, silent)
dans le cas d’un attribut simple de l’objet sur son formulaire, il n’y pas besoin de l’index.
dans le cas d’un liste en édition (il y N fois l’input), index = le row_id de chaque ligne
dans le cas d’un champ action, index = le nom de l’action
dans le cas d’un object inliné par relation 1,1, index = c’est le nom de la foreign-key
votre code doit donc tester si le formulaire est inliné, pour spécifier de quel attribut inliné on parle. Le onload reçoit également tous les paramètres contextuel de la liste :
p.form.onload = function(ctn, obj, params) {
let ville = ui.getUIField(ctn, obj, "ladFormationsVilleOrganisme", params.inline ? "fkParcours" : null);
if (!ville.ui.input.length)
console.log("input not found");
// ...
}
“fkParcours” étant à remplacer par le nom du champ qui joint la formation au parcours père.
On va tout de même revoir Simplicité pour faire une recherche “large” sans avoir à spécifier l’index, mais c’est important à connaitre en cas d’ambiguïté / 2 fois le même champs dans votre formulaire.
