1

基本的に、これまでのところ、管理者が現在登録されているすべてのユーザーを単純なテーブルで表示できる JSP ページがあります。管理者は、特定のテーブル行の「更新」ボタンをクリックすると、ユーザー情報 (権限、電子メールなど) を更新できます。

別のページにリダイレクトしてフォームを購入するのではなく、フォームと現在のユーザー情報が表示された画面にポップアップモーダルを表示する方法を知りたいです。このタイプの機能を実装する方法を示す良いチュートリアルはありますか?

Spring フレームワークに基づいてこの Web アプリケーションを構築しています。これまでのところ、これは私の JSP ページです。テストのために、Ajax Testing という名前のボタンを作成しましたが、実際には「更新」ボタンでモーダルをインスタンス化し、ユーザー情報をロードする必要があります。

<c:forEach var="user" items="${users}">
        <tr>
            <td><c:out value="${user.id}" /></td>
            <td><c:out value="${user.name}"/></td>
            <td><c:out value="${user.username}"/></td>
            <td><c:out value="${user.email}"/></td>
            <td><c:out value="${user.dob}"/></td>
            <td><c:out value="${user.authority}"/></td>
            <td>
                <a id="update" href="<c:url value="/viewUser"><c:param name="id" value="${user.id}"/></c:url>"><button>Update</button></a>
            </td>
            <td>
                <a id="delete" href="<c:url value="/deleteUser"><c:param name="id" value="${user.id}"/></c:url>"><button>Delete</button></a>
            </td>
            <td>
                <a id="loadUser" href="<c:url value="/ajaxTest"><c:param name="id" value="${user.id}"/></c:url>"><button>Ajax Test</button></a>
            </td>
        </tr>
    </c:forEach>
</table>
 <div id="personIdResponse"> </div>
<script type="text/javascript">
    $(document).ready(function(){
        $("#loadUser").click(function(){
            var personId = +$('#loadUser').val();
            $.get('${pageContext.request.contextPath}/SDP_v1.2_JSON_TEST/ajaxTest/' + personId, function(user) {
                  $('#personIdResponse').text(user.name + ', = username ' + user.username);
                });
        });
    });
</script>

これは私のコントローラーです：

@RequestMapping("/viewUser")
public String updateUser(Model model, @RequestParam(value = "id", required = false) Integer id) {

    User user = usersService.getUser(id);

    model.addAttribute("user", user);

    return "settings";
}

@RequestMapping("/ajaxTest")
@ResponseBody
public User ajaxTest(@RequestParam(value = "id", required = false) Integer id) {
    return usersService.getUser(id);
}

@RequestMapping("/updateUser")
public String updateUser(Model model, User user) {

    usersService.updateUser(user);
    getUsers(model);
    return "users";
}

@Secured("ROLE_ADMIN")
@RequestMapping("/deleteUser")
public String deleteUser(Model model,
        @RequestParam(value = "id", required = false) Integer id) {

    if (id == null) {
        List<User> users = usersService.getUsers();

        model.addAttribute("users", users);
        return "users";
    } else {
        usersService.delete(id);

        List<User> users = usersService.getUsers();

        model.addAttribute("users", users);
        return "users";
    }

}

に表示される設定テキストで何も取得できません

4

1 に答える 1

1

jQueryUI ダイアログフォームを検討してください。ここで例を参照してください。

HTML は次のようになります。

<div id="dialog-form" title="user update">
<form>
    <fieldset>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
    ... some other properties
    </fieldset>
 </form>
 </div>

あなたのJavaScript：

$("btn.update")
  .click(function() {
    $("input#name").val('the name of the user'); // you should be able to retrieve the info or id based on the row. Use changed selectors like closest("tr").find("td").eq(2)...
    $("#dialog-form" ).dialog( "open" );
  });

アップデート：

質問にさらに多くのコードが投稿されていることに気付きました。

id最初の問題は、更新に与えるべきではなく、ハイパーリンクを削除することです。それらはいくつかの行で繰り返されるため、重複した DOM 要素がありますid。ですので、ご利用をご検討くださいclass。

次に、サーバーからのデータをダイアログ フォームに入力する方法を次に示します。

$(".loadUser").click(function(e){
        e.preventDefault(); // to cancel the default hyperlink behavior.
        var personId = +$(this).val(); // obtain the user Id.
        $.get('${pageContext.request.contextPath}/SDP_v1.2_JSON_TEST/ajaxTest/' + personId)
             .done(function(user) {
                  // populate the dialog form with data retrieved.
                  $("input#name").val(user.username); 
                  ...

                  // display the dialog form
                  $("#dialog-form" ).dialog( "open" );
              })
              .fail(function(user) {
                  alert('could not load user');
              });
    });
于 2013-09-28T04:32:35.613 に答える