Java 接收Wicket中的jQuery主体更改

我这里有一个关于Wicket和jQuery的问题。我得到了一个由Wicket呈现和显示的网页。在这个页面中，我得到了一个“可拖动”和一个“可拖放”组件，用户应该能够在其中移动组件。这是通过jQuery实现的。此外，我在网页的末尾有一个“保存”按钮，它应该保存新的值（如果有），这意味着：新删除的项目。但是如果我点击“保存”，我看不到Wicket中新放置的对象，我仍然只看到从一开始就在“可放置”区域中的对象。下面是一些代码片段：

HTML:

贝努策



贝努策项目

Benutzer
在迪塞斯费尔德·齐亨


斯皮切恩
$（函数（）{
$（“#用户列表li”）.draggable({
附：“身体”，
助手：“克隆”
});
$（“#ul项目”）
.dropable(
{
activeClass：“ui状态默认值”，
hoverClass:“ui状态悬停”，
接受：“：非（.ui可排序帮助程序）”，
drop：函数（事件、用户界面）{
$（this.find（“.placeholder”）.remove（）；
var userName=ui.draggable.find（“#user”）.text（）；
var userId=ui.draggable.find（“#userId”）.text（）；
$（“
“+userName+”“+userId+”
”）
.附于（本）；
$（ui.draggable）.remove（）；
}
}).可排序({
项目：“li:非（.占位符）”，
排序：函数（）{
//通过Dropable与sortable交互意外添加
//使用connectWithSortable修复了这一问题，但不允许您自定义活动/悬停类选项
$（this.removeClass（“ui状态默认”）；
}
});
$（“#userNameSearch”）
凯普先生(
函数（）{
var valThis=$（this.val（）.toLowerCase（）；
如果（valThis==“”）{
$（'#userList li'）.show（）；
}否则{
$（“#用户列表li”）
.每个(
函数（）{
变量文本=$（此）
.text（）
.toLowerCase（）；
（text.indexOf（valThis）>=0）$(
这个）
：$（本）
.hide（）；
});
}
;
});
});

Java代码（Wicket）：

ListView userListView=新建ListView（“用户列表”，最终列表）{
受保护的void populateItem（列表项）{
User=（User）item.getModelObject（）；
添加（新标签（“user”，user.getLastname（）+，“+user.getFirstname（）））；
添加（新标签（“userId”，user.getId（））；
}
};
ListView usersInProjectListView=新建ListView（“usersInProjectList”，usersInProjectList）{
受保护的void populateItem（列表项）{
User=（User）item.getModelObject（）；
添加（新标签（“userInProject”，user.getLastname（）+，“+user.getFirstname（）））；
添加（新标签（“userinprojectd”，user.getId（））；
}
};
usersInProjectListView.setOutputMarkupId（true）；
添加（新AjaxLink（“保存”）
{
@凌驾
公共void onClick（AjaxRequestTarget目标）
{
System.out.println（target.getPage（）.get（“usersInProjectList”）；
//窗口关闭（目标）；
}
});     
添加（userListView）；
添加（usersInProjectListView）；

您可以通过某种方式将更改从客户端发送到服务器，例如使用Ajax。您可以通过

AbstractAjaxBehavior

（请参阅详细信息）启动回调函数，也可以切换到，谢谢您的回答。下一次我将尝试一下，我将进一步开发该代码，并在这里发布我的经验。

<div class="container">
    <div id="user">
        <h1 class="ui-widget-header">Benutzer</h1>
        <div class="ui-widget-content" id="userList">
            <input type="text" placeholder="Benutzername" id="userNameSearch" />
            <ul class="list-group">
                <li class="list-group-item" wicket:id="userList"><span
                    wicket:id="user" id="user"></span><span style="visibility: hidden;" wicket:id="userId" id="userId"></span></li>
            </ul>
        </div>
    </div>

    <div id="project">
        <h1 class="ui-widget-header">Benutzer im Projekt</h1>
        <div class="ui-widget-content" id="project">
            <ul class="list-group">
                <li class="placeholder list-group-item"><span>Benutzer
                        in dieses Feld ziehen.</span></li>
                <li class="list-group-item" wicket:id="usersInProjectList"><span
                    wicket:id="userInProject"></span><span style="visibility: hidden;" wicket:id="userInProjectId"></span></li>
            </ul>
        </div>
    </div>
    <button id="save" wicket:id="save">Speichern</button>
</div>
<script>
    $(function() {
        $("#userList li").draggable({
            appendTo : "body",
            helper : "clone"
        });
        $("#project ul")
                .droppable(
                        {
                            activeClass : "ui-state-default",
                            hoverClass : "ui-state-hover",
                            accept : ":not(.ui-sortable-helper)",
                            drop : function(event, ui) {
                                $(this).find(".placeholder").remove();
                                var userName = ui.draggable.find("#user").text();
                                var userId = ui.draggable.find("#userId").text();
                                $("<li class=\"list-group-item new-project-member\" wicket:id=\"usersInProjectList\"><span wicket:id=\"userInProject\">"+userName+"</span><span style=\"visibility:hidden;\" wicket:id=\"userInProjectId\">"+userId+"</span></li>")
                                        .appendTo(this);
                                $(ui.draggable).remove();
                            }
                        }).sortable({
                    items : "li:not(.placeholder)",
                    sort : function() {
                        // gets added unintentionally by droppable interacting with sortable
                        // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
                        $(this).removeClass("ui-state-default");
                    }
                });

        $('#userNameSearch')
                .keyup(
                        function() {
                            var valThis = $(this).val().toLowerCase();
                            if (valThis == "") {
                                $('#userList li').show();
                            } else {
                                $('#userList li')
                                        .each(
                                                function() {
                                                    var text = $(this)
                                                            .text()
                                                            .toLowerCase();
                                                    (text.indexOf(valThis) >= 0) ? $(
                                                            this).show()
                                                            : $(this)
                                                                    .hide();
                                                });
                            }
                            ;
                        });
    });
</script>

    ListView userListView = new ListView("userList", finalUserList) {
        protected void populateItem(ListItem item) {
            User user = (User) item.getModelObject();
            item.add(new Label("user", user.getLastname()+", "+user.getFirstname()));
            item.add(new Label("userId", user.getId()));
        }
    };

    ListView usersInProjectListView = new ListView("usersInProjectList", usersInProjectList) {
        protected void populateItem(ListItem item) {
            User user = (User) item.getModelObject();
            item.add(new Label("userInProject", user.getLastname()+", "+user.getFirstname()));
            item.add(new Label("userInProjectId", user.getId()));
        }
    };
    usersInProjectListView.setOutputMarkupId(true);

    add(new AjaxLink<Void>("save")
            {
                @Override
                public void onClick(AjaxRequestTarget target)
                {
                    System.out.println(target.getPage().get("usersInProjectList"));
                    //window.close(target);
                }
            });     
    add(userListView);
    add(usersInProjectListView);