如何在JSF中创建一个选项列表？尝试使用JS/jQuery移动项目,但提交错误"验证错误:值无效"

Question

如何在JSF中创建一个选项列表？尝试使用JS/jQuery移动项目,但提交错误"验证错误:值无效"

Fah*_*kar 2 jquery jsf listbox multi-select jsf-2

我正在使用JSF 2.0创建Web应用程序,我将分配用户来查看项目.为此我有两个清单.具有未分配该项目的用户的第一个列表和列表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)}" />

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

现在,当我将用户从左侧列表带到右侧列表并单击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;
    }
}

Run Code Online (Sandbox Code Playgroud)

我仍然得到同样的错误.

编辑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");
    });

});

Run Code Online (Sandbox Code Playgroud)

注意:如果我将项目从列表B(右)移动到列表A(左),它可以正常工作.但是当我将项目从列表A(左)移动到列表B(右)时,我收到此错误.

Answer 1

Bal*_*usC 6

到目前为止,您的具体问题是由于您使用JavaScript/jQuery而不是JSF填充列表框项目的错误.这样,JSF从未意识到JavaScript添加的新项目.您需要使用JSF而不是JavaScript/jQuery填充列表框项.

当您使用UISelectOne/ UISelectManycomponent 提交表单时,JSF将始终将提交的值与可用项目列表进行比较<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>

Run Code Online (Sandbox Code Playgroud)

同

@ManagedBean
@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.
}

Run Code Online (Sandbox Code Playgroud)

就这样.不需要JS/jQuery混乱.使用自定义非字符串对象时,不要忘记提供正确的转换器和equals()方法.

归档时间：	12 年，11 月前
查看次数：	5169 次
最近记录：	11 年前

如何在JSF中创建一个选项列表？尝试使用JS/jQuery移动项目,但提交错误"验证错误:值无效"

编辑1

编辑2

也可以看看: