JSP + JavaScript: templating

J'ai un côté serveur HTML templating avec JSP + JSTL, qui génère, par exemple, une table avec des données de l'utilisateur:JSP + JavaScript: templating

<body> 
    ... 
    <table> 
     <c:forEach items="${users}" var="user"> 
     <tr> 
      <td>${user.name}</td> 
      <td>${user.age}</td> 
      <td>${user.department}</td> 
     </tr> 
     </c:forEach> 
    </table> 
    ... 
</body>

Ceci est un numéro de modèle 1.

L'utilisateur peut soumettre de nouvelles données au serveur via le formulaire. Les données sont envoyées par AJAX et, sur demande réussie, elles doivent être ajoutées dynamiquement à la table sans rechargement de page.

Pour ajouter les données, j'ai besoin d'utiliser un numéro de modèle 2, qui est encapsulé dans JavaScript ou est présent sur la page HTML avec "display: none;" et "class = 'template'".

<tr class="template" style="display: none;"> 
    <td>%user.name%</td> 
    <td>%user.age%</td> 
    ... 
</tr> 
... 
<script> 
    $(".template").clone().fillTheTemplateAndAppendToTheTable(user); //just to explain 
</script>

La question: puis-je éviter la duplication de code HTML et avoir qu'un seul modèle dans ce cas? Si oui, comment faire cela?

Source

2011-07-05 weekens

Vous pouvez effectuer les opérations suivantes:

Modèle 1:

<body> 
    ... 
    <table id="userTable"> 
     <c:forEach items="${users}" var="user"> 
     <%@include file="userRow.jsp" %> 
     </c:forEach> 
    </table> 
    ... 
</body>

userRow.jsp:

<tr> 
    <td>${user.name}</td> 
    <td>${user.age}</td> 
    <td>${user.department}</td> 
</tr>

L'action affiche la table complète transmettrait au premier modèle, et l'action qui gère l'appel ajax est transmise à userRow.jsp.

Et dans votre rappel ajax, ajoutez simplement le HTML reçu du serveur (c'est-à-dire le résultat de l'exécution de userRow.jsp) à la fin de votre tableau. Dans JQuery, il ressemblerait à ceci (où createUser.action est l'action qui crée le nouvel utilisateur en fonction des paramètres passés à travers l'objet JavaScript user, puis vers l'avant à userRow.jsp pour rendre l'utilisateur nouvellement créé):

function createUser(user) { 
    $.get("createUser.action", user, ajaxCallbackWhichAddsANewUserToUserTable); 
} 

function ajaxCallbackWhichAddsANewUserToUserTable(newUserRow) { 
    $("#userTable").append(newUserRow); 
}

Source

2011-07-05 14:32:42

JB , vous voulez dire, dans le rappel AJAX je devrais utiliser quelque chose comme '$ (" userTable "). append ($. load (" userRow.jsp "," userId = "+ id))'? (Pas correct, mais juste pour montrer une idée). – weekens

Non. Ce JQuery n'est pas valide. Je vais éditer ma réponse –

JSP + JavaScript: templating

Répondre

Questions connexes