如何在 JSF 中创建选项列表?尝试使用 JS/jQuery 移动项目，但提交错误并显示“验证错误:值无效"； [英] How to create a picklist in JSF? Tried moving items using JS/jQuery, but submit errors with "Validation Error: Value is not valid"

问题描述

我正在使用 JSF 2.0 创建 Web 应用程序，我在其中分配用户查看项目.为此，我有两个清单.第一个列表包含未分配该项目的用户，列表 B 包含已分配该项目的用户.我们可以交换数据.

I am creating web application using JSF 2.0 where I am assigning users to view projects. For that I have two list. First list that have users who are not assigned that project and list B have users who have assigned that project. And we can interchange the data.

我的代码是

<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.

---

Now when I take user from left list to right list and click Save Edit Info button, I get error as targetCars: Validation Error: Value is not valid.

注意:

当我不更改任何列表并单击保存编辑信息时，效果很好.

When I don't change any list and click Save Edit Info, it works well.

知道为什么我会收到这个错误吗?

Any idea why I am getting this error?

我做了以下更改

<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;
    }
}

我仍然遇到同样的错误.

still I am getting same error.

移动项目的jQuery代码如下.

jQuery code to move items are as below.

$(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 < 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 < 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(右)时，我收到此错误.

推荐答案

就此而言，您的具体问题是由于您使用 JavaScript/jQuery 而不是 JSF 填充列表框项的错误造成的.这样 JSF 永远不会知道 JavaScript 添加的新项目.您需要使用 JSF 而不是 JavaScript/jQuery 来填充列表框项.

To the point, your concrete problem is caused by the mistake that you filled listbox items using JavaScript/jQuery instead of JSF. This way JSF is never been made aware of the new items added by JavaScript. You need to fill the listbox items using JSF instead of JavaScript/jQuery.

当您使用 UISelectOne/UISelectMany 组件提交表单时，JSF 将始终将提交的值与 <f 中的可用项目列表进行比较:selectItem(s)>.如果提交的值未包含在可用项目列表中，那么您将收到此 Validation Error: Value is not valid 错误.这是防止篡改/攻击请求的内置保护措施的一部分.客户端不应提交服务器未指定的项目.

When you submit a form with an UISelectOne/UISelectMany component, then JSF will always compare the submitted value to the list of available items from <f:selectItem(s)>. If the submitted value is not contained in the list of available items, then you will get exactly this Validation Error: Value is not valid error. This is part of builtin safeguard against tampered/attacked requests. The client should not be able to submit a item which the server has not specified.

更改 JavaScript/jQuery 端中的可用项不会也会自动更改 JSF 端中的可用项.您确实需要更改 JSF 端的可用项目.为此，您可以轻松地使用 JSF 2.x ajax 功能.这是一个具体的启动示例:

Changing the available items in JavaScript/jQuery side does not automagically also change the available items in JSF <f:selectItems> side as well. You really need to change the available items in JSF side. You can easily use the JSF 2.x ajax powers for this. Here's a concrete kickoff example:

<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() 方法.

That's all. No JS/jQuery mess necessary. When using custom non-string objects don't forget to provide a proper converter and equals() method.

• 什么时候需要JSF，用jQuery和AngularJS等JavaScript库来实现UI
• 验证错误:值无效
• 转换错误设置空转换器"的值 - 为什么我需要在 JSF 中使用转换器?

这篇关于如何在 JSF 中创建选项列表?尝试使用 JS/jQuery 移动项目，但提交错误并显示“验证错误:值无效"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！