如何读取 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”从我的数据库中填充可变数量的信息（每个 ul 都有一个 value-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();
}