Création d'un éditeur in-situ multi-champs avec JavaScript/JQuery

Question

Je cherche un moyen de créer un éditeur in-situ en JavaScript comme JEditable ou des plugins similaires. Cependant, la différence est que mon éditeur serait un formulaire multi-champs plutôt qu'un seul champ. Étant donné que le même formulaire sera utilisé dans différentes parties, à savoir la modification d'éléments existants et la création de nouveaux éléments, je souhaiterais pouvoir spécifier la fonction de rappel pour chaque cas sans avoir à dupliquer la fonctionnalité partagée (par exemple, validation, bouton d'annulation, etc.).

Actuellement, j'ai essayé de l'implémenter naïvement et le code est affreux car les gestionnaires d'événements diffusent autour du code source au lieu d'être ensemble en tant que composant.

Donc, ma question est de savoir quelle est la façon recommandée de mettre en œuvre cela? Si un plugin jQuery fournit la fonctionnalité, cela peut être le chemin le plus facile. Sinon, comment pourrais-je structurer correctement mon code?

Answer 1

Le problème est que vous devez séparer les données du texte affiché. Pour chaque segment de données que vous affichez, associez un json dict (écrit dans la page ou tiré avec ajax) avec le texte de chaque champ du formulaire.

Par exemple, si vous travaillez avec des noms (prénom, dernier), vous afficher le nom comme celui-ci:

<span class="editable">Colin M. Hansen</span> 

et vous écrivez la forme comme ceci:

<form class="nameform" style="display: none;"> 
    <input class="first" type="text"> 
    <input class="mi" type="text"> 
    <input class="last" type="text"> 
</form> 

et vous avez un dict comme celui-ci, mis en correspondance avec les entrées sous la forme:

name1 = { 
    first: 'Colin', 
    mi: 'M', 
    last: 'Hansen' 
}; 

le code commun que vous écrivez commutateurs la forme pour le texte sur le onclick de l'élément span, et remplit chaque champ de saisie avec des données de la dict. Le code de soumission enregistre les nouvelles données sur name1 et sur le serveur et renvoie le nouveau texte d'affichage.

Answer 2

la définition de Separate vos callbacks et faire une recherche dans la fonction de rappel modifiable à votre rappel désiré

var callbacks = { // define your callbacks here 
    'field1': function() { 
    alert("You editted field1"); 
    }, 
    'field2': function() { 
    alert("You editted field2"); 
    } 
} 

$("input").each(function(i, o) { 
    $(o).editable('save.php', { 
    'callback': function(value, settings) { 
     // do validation etc. 

     // then call field-specific callback 
     if(callbacks[o.name]) { // I'm using 'name', but you could also use 'id' or something else 
     callbacks[o.name](); 
     } 
    } 
    }); 
});