如何读取ul列表并将结果发送回java

Question

我有以下html文件:

<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，在Java中处理这些信息。我的问题是，我不知道如何迭代这些ul和列表，保存它们并将其返回给Java。我想我必须调用我的java方法在我的JavaScript中迭代并提取所有数据。

之后——在java方面——我必须处理JavaScript给我的反馈。但我想我自己能弄明白。

I just try this:

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

如果你在JSF中使用Primefaces，那么很容易使用本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();
}