Question

基本上到目前为止，我有一个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";
    }

}

我无法在

中显示的设置文字中获得任何内容

Answer 1

请考虑jQueryUI对话框表单。请参阅示例here。

您的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更新，删除超链接。由于它们以多行重复，因此您将拥有重复id的DOM元素。因此，请考虑使用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');
              });
    });

Spring Ajax / Json用户更新表单

1 个答案: