JSP + JavaScriptの：テンプレート

は、私が言う、生成JSP + JSTL、一部のユーザーデータを持つテーブルとサーバー側のHTMLのテンプレートがあります。これは、テンプレートの数があるJSP + JavaScriptの：テンプレート

を

<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>

ユーザーは、フォームを使用して新しいデータをサーバーに送信できます。データはAJAXによって送信され、成功した要求に応じて、ページのリロードを行わずにテーブルに動的に追加する必要があります。

データを追加するには、テンプレート番号2を使用する必要があります。テンプレート番号2は、JavaScript内にカプセル化されているか、HTMLページに「display：none;」で表示されています。と "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>

質問：私は、HTMLコードの重複を回避し、この場合、ただ1つのテンプレートを持つことができますか？はいの場合、それを行う方法？

出典

2011-07-05 weekens

あなたは次の操作を行うことができます：

テンプレート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>

最初のテンプレートに転送しますフルテーブルを表示するアクション、およびajax呼び出しを処理するアクションはuserRow.jspに転送されます。

あなたのajaxコールバックでは、サーバーから受け取ったHTML（つまりuserRow.jspの実行結果）を表の最後に追加するだけです。 jQueryのでは、それは（createUser.actionがuser JavaScriptのオブジェクトを介して渡されたパラメータに基づいて、新しいユーザーを作成する行為であり、その後、転送userRow.jspに新しく作成したユーザーをレンダリングするために）次のようになります。

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

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

出典

2011-07-05 14:32:42

JBあなたがAJAXコールバックで '$（" userTable "）のようなものを使うべきであることを意味します。append（$。load（" userRow.jsp "、" userId = "+ id））'？（正解ではなく、アイデアを示すだけです）。 – weekens

いいえ。これは有効なJQueryではありません。私は私の答えを編集します –

JSP + JavaScriptの：テンプレート

答えて

関連する問題