java - 如何读取ul-lists并将结果发送回java？

Question

我有以下 xhtml 文件:

<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:f="http://java.sun.com/jsf/core"
            template="/templates/default.xhtml">
<ui:define name="head">
    <link rel="stylesheet" href="/css/partitioning.css"/>
</ui:define>
<ui:define name="content">
    <ui:include src="partials/navigationbar.xhtml"/>

    <div class="row container">
        <h1>Verteilung Analysis 2a für Informatiker ...</h1>

        <div id="listContainer">
            <ul class="small-block-grid-2 middel-block-grid-2 large-block-grid-2">
                <ui:repeat value="#{groupController.allGroups}" var="group">
                    <li>
                        <section class="tutorium">
                            <f:param name="class_id" value="#{group.id}"/>
                            <h1>#{group.weekdayString}, #{group.timeStart} - #{group.timeEnd} Uhr</h1>

                            <p class="subheader">#{group.leader.name}</p>

                            <div>
                                <!--<h:outputText value="ABC" rendered="#{group}"/>-->
                                <ul id="memberList" class="connectedSortable" value-id="#{group.id}">
                                    <ui:repeat value="#{group.groupMembers}" var="user">
                                        <li value-id="#{user.id}" class="sortable-item">#{user.name}</li>
                                    </ui:repeat>
                                </ul>
                            </div>
                        </section>
                    </li>
                </ui:repeat>
            </ul>
        </div>
    </div>

    <div class="row">
        <div class="small-12 columns">
            <input type="submit" class="button" value="Verteilung speichern"/>
            <a href="#" class="button secondary">Abbrechen</a>
            <input type="submit" class="button" value="Verteilung exportieren"/>
        </div>
    </div>

    <div id="deleteDialog" class="reveal-modal small" data-reveal="">
        <h2>Vorsicht</h2>

        <p class="error">In jedem Tutorium muss mindestens ein Teilnehmer sein. Sollen leere Tutorien gelöscht
            werden?</p>
        <a class="close-reveal-modal">&#215;</a>
    </div>

</ui:define>
<ui:define name="scripts">
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/js/vendor/jquery.cookie.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            document.getElementById("listContainer")
            var $lists = $("#listContainer").find(".connectedSortable");
            $lists.sortable({
                connectWith: $lists,
                placeholder: 'placeholder'
            });
        });


        var data = {};
        $("ul.memberList").each(function() {
            $(this).data("value-id");
            $(this).find("li").each(function() {

            })
        })

    </script>
</ui:define>

在这种情况下，您可以使用拖放操作这些列表。它们充满了来自 SQL 数据库的数据。但是，通过拖放更改一些条目后，您应该能够将这些更改保存到后端的数据库中。

但我不知道该怎么做。我的想法是以某种方式迭代这些列表，将它们保存在数组中并保存所属的列表项。像这样的事情:

            var data = {};
        $("ul.memberList").each(function() {
            $(this).data("value-id");
            $(this).find("li").each(function() {

            })
        })

但事实上，我不知道它如何与 JavaScript 一起工作，如何将其保存到 var，特别是如何将其发送到 Java。我试图通过谷歌找出答案，但几乎找不到任何东西。因此，如果有人能帮助我，我将非常感激。我对我糟糕的英语感到非常抱歉。 ;)

编辑: 我们正在使用“Mojarra”。

第一步是这些“ul”填充来 self 的数据库的可变数量的信息(每个 ul 都有一个值 ID)。每个 ul 的“li”也有一个 value-id。现在的目标是检索这些值，例如作为数组或其他内容，以便将它们返回到处理此信息的 Java。我的问题是我不知道如何迭代这些 uls 和 lis，保存它们并将其返回到 Java。我想我必须在 JavaScript 中调用我的 java 方法，它会迭代并提取所有数据。

之后 - 在 Java 端 - 我必须使用 JavaScript 给我的东西。但我想我可以自己解决这个问题。

我刚刚尝试过这个:

function test() {
            var data = new Array();
            $("ul.memberList").each(function() {
                var buffer = $(this).data("value-id").toString();
                var members = new Array();
                $(this).find("li").each(function() {
                    members.push(this.data("value-id").toString());
                });
                data.push(members.join(".")+","+buffer);
            });
            alert(data.join(";"));
        }

但警报只是空的。

Answer 1

如果您将 Primefaces 与 JSF 结合使用，那么可以使用此 ANSWER 中提到的 p:remoteCommand 组件轻松地从 Javascript 与 JSF Managedbean 进行通信。 。

但是如果您使用的是普通 JSF，那么您就可以使用隐藏字段并从 javascript 提交它们。

<h:form id="ghostForm">
    <h:inputHidden id="hide1" value="#{managedBean.property1}"/>
    <h:inputHidden id="hide2" value="#{managedBean.property2}"/>
    ...
    ...
    <h:commandButton id="ghostSubmit"  action="#{managedBean.action}" />        
</h:form>

从您的脚本中可以清楚地看出您正在使用 JQuery，因此我还将在脚本中使用 JQuery:

function fillUpAndSend(){
    $("#ghostForm\\:hide1").val("ValuetoBeSentforHide1");
    $("#ghostForm\\:hide2").val("ValuetoBeSentforHide2");
    ...
    ...
    $("#ghostForm\\:ghostSubmit").click();
}