jquery - JSFでピックリストを作成するには? JS/jQuery を使用してアイテムを移動しようとしましたが、「検証エラー: 値が無効です」というエラーを送信します

Question

プロジェクトを表示するユーザーを割り当てている JSF 2.0 を使用して Web アプリケーションを作成しています。そのために、2つのリストがあります。そのプロジェクトが割り当てられていないユーザーがいる最初のリストと、そのプロジェクトを割り当てられているユーザーがいるリスト B。そして、データを交換できます。

私が持っているコードは

<t:selectManyListbox id="sourceCars"  style="width: 40%;"
                     value="#{PersonalInformationDataBean.listOfUsers}" size="10">
    <t:selectItems value="#{PersonalInformationDataBean.showAllMyRemData()}" var="t"
                   itemLabel="#{t.title}" itemValue="#{t.status}"/>
</t:selectManyListbox>

<span>
    <input type="button" value=" >> " id="dbleMeRight"/>
    <input type="button" value=" &lt;&lt; " id="dbleMeLeft"/>
</span>

<t:selectManyListbox id="targetCars"  style="width: 40%;"
                     value="#{PersonalInformationDataBean.listOfUsers}" size="10">
    <t:selectItems value="#{PersonalInformationDataBean.showAllMyData()}" var="n"
                   itemLabel="#{n.title}" itemValue="#{n.status}"/>
</t:selectManyListbox>

<h:commandButton value="Save Edited Project Info." action="#{PersonalInformationDataBean.editPatentData(MyLogin.loginname)}" />

ここで、t はxmlns:t="http://myfaces.apache.org/tomahawk"です。

PersonalInformationDataBean.java

private List<String> listOfUsers = new ArrayList<String>();
private List<String> listOfUsers002 = new ArrayList<String>();
private List<CommonBean01> listOfListUsers = new ArrayList<CommonBean01>();
private List<CommonBean01> listOfListUsers002 = new ArrayList<CommonBean01>();

// above getter and setters

Iterator itr = listOfUsers.iterator();
System.out.println("list of usersssss == " + listOfUsers);

while (itr.hasNext()) {
    psmtt = conn.prepareStatement("INSERT INTO patentInvite (invitedWhom, patentId, personalInfoId) VALUES (?,?,?)");
    String inviteWhom = itr.next().toString();
    System.out.println("to who we have invited is " + inviteWhom);
    psmtt.setString(1, inviteWhom);
    psmtt.setLong(2, patentId);
    psmtt.setLong(3, personalInfoId);
    psmtt.execute();

    System.out.println("Data entered is == " + inviteWhom + "==" + patentId + "==" + personalInfoId + "==");
}

public List<CommonBean01> showAllMyRemData() {
    try {
        CommonBean01 commonBean = new CommonBean01();
        listOfListUsers = new ArrayList<CommonBean01>();
        ConnectToDatabase db = new ConnectToDatabase();
        Connection conn = db.makeconnection();


        PreparedStatement psmt = conn.prepareStatement("SELECT * FROM patentInvite WHERE patentId=?");
        System.out.println("patent id here is " + patentId);
        psmt.setLong(1, patentId);
        ResultSet rs = psmt.executeQuery(), rs2 = null;
        PreparedStatement pstt = null;

        int dd = 0;
        String listOfUser = "";
        int myCounter = 0;
        while (rs.next()) {
            if (myCounter==0) {
                listOfUser = "'" + rs.getString(2) + "'"; 
            } else {
                listOfUser = listOfUser + ",'" + rs.getString(2) + "'";
            }
            myCounter++;
        }

        System.out.println("id selected are :: " + listOfUser);

        psmt = conn.prepareStatement("SELECT userid, fullName, userType FROM userDetails WHERE userid NOT IN (" + listOfUser + ")");
        rs = psmt.executeQuery();

        listOfListUsers = new ArrayList<CommonBean01>();
        while (rs.next()) {
            commonBean = new CommonBean01();
            commonBean.setStatus(rs.getString(1));
            commonBean.setTitle(rs.getString(2) + " [" + rs.getString(3) + "]");
            listOfListUsers.add(commonBean);
            System.out.println("wat say....(" + rs.getString(1) + ") -- " + rs.getString(2) + "");
        }
        return listOfListUsers;
    } catch (Exception e) {
        System.out.println("Exception = " + e);
        return null;
    }
}

public List<CommonBean01> showAllMyData() {
    try {
        CommonBean01 commonBean = new CommonBean01();
        listOfListUsers = new ArrayList<CommonBean01>();
        ConnectToDatabase db = new ConnectToDatabase();
        Connection conn = db.makeconnection();

        PreparedStatement psmt = conn.prepareStatement("SELECT * FROM patentInvite WHERE patentId=?");
        System.out.println("patent id here is " + patentId);
        psmt.setLong(1, patentId);
        ResultSet rs = psmt.executeQuery(), rs2 = null;
        PreparedStatement pstt = null;
        listOfListUsers = new ArrayList<CommonBean01>();

        while (rs.next()) {
            System.out.println("");
            pstt = conn.prepareStatement("SELECT userid, fullName, userType FROM userDetails WHERE userid=?");
            pstt.setString(1, rs.getString(2));
            System.out.println("setting id for " + rs.getString(1));
            rs2 = pstt.executeQuery();

            int dd = 0;
            while (rs2.next()) {
                System.out.println("inside data " + rs2.getString(2));
                commonBean = new CommonBean01();
                commonBean.setStatus(rs2.getString(1));
                commonBean.setTitle(rs2.getString(2) + " [" + rs2.getString(3) + "]");
                listOfListUsers.add(commonBean);
                System.out.println("wat say here....(" + rs2.getString(1) + ") -- " + rs2.getString(2) + "");
            }
        }
        return listOfListUsers;
    } catch (Exception e) {
        System.out.println("Exception = " + e);
        return null;
    }
}

CommonBean01.java

public class CommonBean01 {
    private String title;
    private String status;

    public String getStatus() {
        return status;
    }

    public void setStatus(String status) {
        this.status = status;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    @Override
    public boolean equals(Object obj) {
        if (obj == null) {
            return false;
        }
        if (getClass() != obj.getClass()) {
            return false;
        }
        final CommonBean01 other = (CommonBean01) obj;
        if ((this.status == null) ? (other.status != null) : !this.status.equals(other.status)) {
            return false;
        }
        return true;
    }

    @Override
    public int hashCode() {
        int hash = 5;
        hash = 89 * hash + (this.status != null ? this.status.hashCode() : 0);
        return hash;
    }
}

ユーザーを左のリストから右のリストに移動してSave Edit Infoボタンをクリックすると、エラーが発生しtargetCars: Validation Error: Value is not validます。

ノート：

リストを変更せずにをクリックSave Edit Infoすると、うまく機能します。

このエラーが発生する理由は何ですか?

編集 1

以下の変更を加えました

<t:selectManyListbox id="sourceCars"  style="width: 40%;"
                     value="#{PersonalInformationDataBean.listOfUsers002}" size="10">
    <t:selectItems value="#{PersonalInformationDataBean.showAllMyRemData()}" var="t"
                   itemLabel="#{t.title}" itemValue="#{t.status}"/>
</t:selectManyListbox>


public List<CommonBean01> showAllMyRemData() {
    try {
        CommonBean01 commonBean = new CommonBean01();
        listOfListUsers002 = new ArrayList<CommonBean01>();
        ConnectToDatabase db = new ConnectToDatabase();
        Connection conn = db.makeconnection();


        PreparedStatement psmt = conn.prepareStatement("SELECT * FROM patentInvite WHERE patentId=?");
        System.out.println("patent id here is " + patentId);
        psmt.setLong(1, patentId);
        ResultSet rs = psmt.executeQuery(), rs2 = null;
        PreparedStatement pstt = null;

        int dd = 0;
        String listOfUser = "";
        int myCounter = 0;
        while (rs.next()) {
            if (myCounter==0) {
                listOfUser = "'" + rs.getString(2) + "'"; 
            } else {
                listOfUser = listOfUser + ",'" + rs.getString(2) + "'";
            }
            myCounter++;
        }

        System.out.println("id selected are :: " + listOfUser);

        psmt = conn.prepareStatement("SELECT userid, fullName, userType FROM userDetails WHERE userid NOT IN (" + listOfUser + ")");
        rs = psmt.executeQuery();

        listOfListUsers002 = new ArrayList<CommonBean01>();
        while (rs.next()) {
            commonBean = new CommonBean01();
            commonBean.setStatus(rs.getString(1));
            commonBean.setTitle(rs.getString(2) + " [" + rs.getString(3) + "]");
            listOfListUsers002.add(commonBean);
            System.out.println("wat say....(" + rs.getString(1) + ") -- " + rs.getString(2) + "");
        }
        return listOfListUsers002;
    } catch (Exception e) {
        System.out.println("Exception = " + e);
        return null;
    }
}

それでも同じエラーが発生します。

編集 2

アイテムを移動するjQueryコードは以下の通りです。

$(function() {
    var  sourceCars=$('#sourceCars option').clone();
    $('#filterDis').change(function() {
        var val = $(this).val();
        alert("changed me=="+val+"==");
        $('#sourceCars').empty();
        alert("changed me=="+sourceCars+"==");
        sourceCars.filter(function(idx, el) {
            var found=false;
            $('#targetCars option').each(function(){
                if ($(this).val()===$(el).text())
                    found=true;
            });
            alert(found);

            if(found)
                return false;

            return val === 'ALL' || $(el).text().indexOf('[' + val + ']') >= 0;
        }).appendTo('#sourceCars');
        $("#targetCars option").attr("selected", "selected");
    });

    $('#sourceCars').dblclick(function() {
        $('#sourceCars option:selected').appendTo('#targetCars');
        $("#targetCars option").attr("selected", "selected");
    });

    $('#dbleMeRight').click(function() {
        $('#sourceCars option:selected').appendTo('#targetCars');
        $("#targetCars option").attr("selected", "selected");
    });

    $('#targetCars').dblclick(function() {

        var targetList=$('#targetCars option:selected');
        var filterVal= $('#filterDis').val();
        if( filterVal === 'ALL' || targetList.text().indexOf('[' + filterVal + ']') >= 0)
            targetList.appendTo('#sourceCars');
        else
            targetList.remove();
        var foption = $('#sourceCars option:first');
        var soptions = $.makeArray($('#sourceCars option:not(:first)')).sort(function(a, b) {
            return a.text == b.text ? 0 : a.text &lt; b.text ? -1 : 1
        });
        $('#sourceCars').html(soptions).prepend(foption);
        foption.attr("selected", true).siblings("option").removeAttr("selected");
        $("#targetCars option").attr("selected", "selected");
    });

    $('#dbleMeLeft').click(function() {

        var targetList=$('#targetCars option:selected');
        var filterVal= $('#filterDis').val();
        if( filterVal === 'ALL' || targetList.text().indexOf('[' + filterVal + ']') >= 0)
            targetList.appendTo('#sourceCars');
        else
            targetList.remove();
        var foption = $('#sourceCars option:first');
        var soptions = $.makeArray($('#sourceCars option:not(:first)')).sort(function(a, b) {
            return a.text == b.text ? 0 : a.text &lt; b.text ? -1 : 1
        });
        $('#sourceCars').html(soptions).prepend(foption);
        foption.attr("selected", true).siblings("option").removeAttr("selected");
        $("#targetCars option").attr("selected", "selected");
    });

});

注: リスト B (右) からリスト A (左) にアイテムを移動すると、正常に動作します。しかし、アイテムをリスト A (左) からリスト B (右) に移動すると、このエラーが発生します。

score 6 · Accepted Answer

要するに、あなたの具体的な問題は、JSF の代わりに JavaScript/jQuery を使用してリストボックス項目を埋めたという間違いによって引き起こされます。このようにして、JavaScript によって追加された新しい項目が JSF に認識されることはありません。JavaScript/jQuery の代わりに JSF を使用してリストボックス項目を埋める必要があります。

UISelectOne/コンポーネントを含むフォームを送信すると、UISelectManyJSF は送信された値をからの使用可能なアイテムのリストと常に比較します<f:selectItem(s)>。送信された値が利用可能なアイテムのリストに含まれていない場合、まさにこのValidation Error: Value is not validエラーが発生します。これは、改ざん/攻撃されたリクエストに対する組み込みの保護機能の一部です。クライアントは、サーバーが指定していないアイテムを送信できません。

JavaScript/jQuery 側で使用可能なアイテムを変更しても、JSF 側で使用可能なアイテムも自動的に変更されるわけではありません<f:selectItems>。JSF側で利用可能なアイテムを変更する必要があります。これには、JSF 2.x ajax パワーを簡単に使用できます。具体的なキックオフの例を次に示します。

<h:form>
    <h:panelGrid columns="3">
        <h:selectManyListbox id="left" value="#{bean.leftSelected}">
            <f:selectItems value="#{bean.leftAvailable}" />
            <f:ajax event="dblclick" render="left right" listener="#{bean.leftToRight}" />
        </h:selectManyListbox>
        <h:panelGroup>
            <h:commandButton value="left to right">
                <f:ajax execute="left" render="left right" listener="#{bean.leftToRight}" />
            </h:commandButton>
            <br/>
            <h:commandButton value="right to left">
                <f:ajax execute="right" render="left right" listener="#{bean.rightToLeft}" />
            </h:commandButton>
        </h:panelGroup>
        <h:selectManyListbox id="right" value="#{bean.rightSelected}">
            <f:selectItems value="#{bean.rightAvailable}" />
            <f:ajax event="dblclick" render="left right" listener="#{bean.rightToLeft}" />
        </h:selectManyListbox>
    </h:panelGrid>
</h:form>

と

@Named
@ViewScoped
public class Bean {

    private List<String> leftSelected;
    private List<String> leftAvailable;
    private List<String> rightSelected;
    private List<String> rightAvailable;

    @PostConstruct
    public void init() {
        leftAvailable = new ArrayList<String>(Arrays.asList("one", "two", "three", "four", "five"));
        rightAvailable = new ArrayList<String>();
    }

    public void leftToRight() {
        leftAvailable.removeAll(leftSelected);
        rightAvailable.addAll(leftSelected);
        leftSelected = null;
    }

    public void rightToLeft() {
        rightAvailable.removeAll(rightSelected);
        leftAvailable.addAll(rightSelected);
        rightSelected = null;
    }

    // Add/generate getters+setters. Note: the "available" lists doesn't need setters.
}

それで全部です。JS/jQuery の混乱は必要ありません。equals()カスタムの非文字列オブジェクトを使用する場合は、適切なコンバーターとメソッドを提供することを忘れないでください。

jquery - JSFでピックリストを作成するには? JS/jQuery を使用してアイテムを移動しようとしましたが、「検証エラー: 値が無効です」というエラーを送信します

編集 1

編集 2

1 に答える 1

以下も参照してください。

jquery - JSFでピックリストを作成するには? JS/jQuery を使用してアイテムを移動しようとしましたが、「検証エラー: 値が無効です」というエラーを送信します

編集 1

編集 2

1 に答える 1

以下も参照してください。

Related

Reference