JSF 2.2 SelectManyCheck breaks javascript

问题

It used to work perfect on jsf 2.0 but know it renders a box at the end of the screen, with a html table with the data about locations, if I remove the converter the selectmany checkbox works but it still renders the box.

<ui:composition template="/template.xhtml">
    <ui:define name="title">
        <h:outputText value="#{bundle.CreateOfertaTitle}"></h:outputText>
    </ui:define>
            <ui:define name="body">
                <style type="text/css">
            input#chat {
                width: 410px
            }

            #console-container {
                width: 400px;
            }

            #console {
                border: 1px solid #CCCCCC;
                border-right-color: #999999;
                border-bottom-color: #999999;
                height: 170px;
                overflow-y: scroll;
                padding: 5px;
                width: 100%;
            }

            #console p {
                padding: 0;
                margin: 0;
            }
        </style>
                    <script type="text/javascript">
            var Chat = {};

            Chat.socket = null;

            Chat.connect = (function(host) {
                if ('WebSocket' in window) {
                    Chat.socket = new WebSocket(host);
                } else if ('MozWebSocket' in window) {
                    Chat.socket = new MozWebSocket(host);
                } else {
                    Console.log('Error: WebSocket is not supported by this browser.');
                    return;
                }

                Chat.socket.onopen = function() {
                    Console.log('Info: WebSocket connection opened.');
                    document.getElementById('chat').onkeydown = function(event) {
                        if (event.keyCode == 13) {
                            Chat.sendMessage();
                        }
                    };
                };

                Chat.socket.onclose = function() {
                    document.getElementById('chat').onkeydown = null;
                    Console.log('Info: WebSocket closed.');
                };

                Chat.socket.onmessage = function(message) {
                    Console.log(message.data);
                };
            });

            Chat.initialize = function() {
                if (window.location.protocol == 'http:') {
                    Chat.connect('ws://' + window.location.host + '/Formosa2/endpoint');
                } else {
                    Chat.connect('wss://' + window.location.host + '/Socket/websocket/chat');
                }
            };

            Chat.sendMessage = (function() {
                var ofertaTexto = document.getElementById('form:texto').value;
                var select = document.getElementById('form:empresaidEmpresa');
                var barrio = document.getElementById('inicio_input').value;

                var nombreEmpresa = select.options[select.selectedIndex].text;
                    Chat.socket.send(ofertaTexto +', '+ nombreEmpresa+','+ barrio);
                    document.getElementById('chat').value = '';

            });

            var Console = {};

            Console.log = (function(message) {
                var console = document.getElementById('console');
                var p = document.createElement('p');
                p.style.wordWrap = 'break-word';
                p.innerHTML = message;
                console.appendChild(p);
                while (console.childNodes.length > 25) {
                    console.removeChild(console.firstChild);
                }
                console.scrollTop = console.scrollHeight;
            });

            Chat.initialize();

        </script>
        <h:panelGroup id="messagePanel" layout="block">
            <h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
        </h:panelGroup>
        <h:form id="form" enctype="multipart/form-data">
            <h:outputLabel rendered="#{usuarioController.userSession.isLoggedIn}"
            value="#{usuarioController.userSession.sessionId}"/>
            <h:panelGrid columns="2">
                <h:outputLabel value="#{bundle.CreateOfertaLabel_texto}" for="texto" />
                <h:inputText id="texto" value="#{ofertaController.selected.texto}" title="#{bundle.CreateOfertaTitle_texto}" />

                <h:outputLabel value="#{bundle.CreateOfertaLabel_inicio}" for="inicio" />
                <t:inputCalendar id="inicio" value="#{ofertaController.selected.inicio}" renderAsPopup="true"
                                 popupTodayString="Hoy" popupDateFormat="MM/dd/yyyy" 
                                 popupWeekString="Semana" helpText="MM/DD/YYYY" forceId="true"/>

                <h:outputLabel value="#{bundle.CreateOfertaLabel_fin}" for="fin" />                   
                <t:inputCalendar id="fin" value="#{ofertaController.selected.fin}" renderAsPopup="true"
                                 popupTodayString="Hoy" popupDateFormat="MM/dd/yyyy" 
                                 popupWeekString="Semana" helpText="MM/DD/YYYY" forceId="true"/>

                <h:outputLabel value="#{bundle.CreateOfertaLabel_titulo}" for="titulo" />
                <h:inputText id="titulo" value="#{ofertaController.selected.titulo}" title="#{bundle.CreateOfertaTitle_titulo}" />
                <h:outputLabel value="#{bundle.CreateOfertaLabel_imagen}" for="imagen" />
                <h:inputFile id="imagen" value="#{ofertaController.upLoad.upFile}" title="#{bundle.CreateOfertaTitle_imagen}"/>

                <h:outputLabel value="#{bundle.CreateOfertaLabel_empresaidEmpresa}" for="empresaidEmpresa" />                                        
                <h:selectOneMenu id="empresaidEmpresa" 
                                 value="#{ofertaController.selected.empresaidEmpresa}" 
                                 title="#{bundle.CreateOfertaTitle_empresaidEmpresa}"
                                 required="true" 

                                 requiredMessage="#{bundle.CreateOfertaRequiredMessage_empresaidEmpresa}">
                    <f:ajax event="valueChange" execute="empresaidEmpresa" render="ubicacionCollection" />
                    <f:selectItems value="#{empresaController.itemsAvailableSelectOne}"/>
                </h:selectOneMenu>

                <h:outputLabel value="#{bundle.CreateOfertaLabel_ubicacionCollection}" for="ubicacionCollection" />      
                <h:selectManyCheckbox id="ubicacionCollection"
                                      value="#{ofertaController.selected.ubicacionCollection}"
                                      title="#{bundle.CreateOfertaTitle_ubicacionCollection}" >

                    <f:selectItems id="ubicacionCollectionItems"
                                   value="#{ofertaController.selected.empresaidEmpresa.ubicacionCollection}"
                                   var="ubicacionXEmpresa"
                                   itemLabel="#{ubicacionXempresa.barrio}"
                                   itemValue="#{ubicacionXEmpresa}"/>
               </h:selectManyCheckbox>
            </h:panelGrid>
            <br />
                <br />
                <br />
                <noscript><h2 style="color: #ff0000">Seems your browser doesn't 
                        support Javascript! Websockets rely on Javascript being enabled. Please enable
                        Javascript and reload this page!</h2></noscript>
                <div>
                    <p>
                        <input type="text" placeholder="type and press enter to chat" id="chat"/>
                    </p>

                    <div id="console-container">
                        <div id="console"></div>
                    </div>
                </div>
            <h:commandLink action="#{ofertaController.create}" value="#{bundle.CreateOfertaSaveLink}" onclick='Chat.sendMessage();'/>
            <br />
            <br />
            <h:commandLink action="#{ofertaController.prepareList}" value="#{bundle.CreateOfertaShowAllLink}" immediate="true"/>
            <br />
            <br />

        </h:form>
    </ui:define>
</ui:composition>

My convertor:

@FacesConverter(value = "ubicacionConverter")
public class UbicacionesBYOfertasConverter implements Converter {

private FacesContext facesContext = FacesContext.getCurrentInstance();
private OfertaController ofertaController = (OfertaController) facesContext.getApplication()
            .evaluateExpressionGet(facesContext, "#{ofertaController}", OfertaController.class);

@Override
public Object getAsObject(FacesContext context, UIComponent component, String value) {
    if (value == null) {
        return null;
    }
    System.out.println(value);
    Ubicacion ubicacion = ofertaController.getSelected().getEmpresaidEmpresa().getUbicacionCollection().iterator().next();        
    ofertaController.getSelected().setUbicacionCollection(ofertaController.getSelected().getEmpresaidEmpresa().getUbicacionCollection());
    return ubicacion;
}

@Override
public String getAsString(FacesContext context, UIComponent component,
        Object value) {
    String string = null;
    if (value instanceof Integer) {
        string = String.valueOf(ofertaController.getSelected().getEmpresaidEmpresa().getUbicacionCollection().iterator().next().getIdUbicacion());
    }
    return string;
}   
}

Javascript exception

Uncaught TypeError: Cannot read property 'length' of null jsf.js?       ln=javax.faces&stage=Development:362
contains jsf.js?ln=javax.faces&stage=Development:362
FrameTransport.cleanupReqParams jsf.js?ln=javax.faces&stage=Development:351
FrameTransport.callback jsf.js?ln=javax.faces&stage=Development:335
(anonymous function) jsf.js?ln=javax.faces&stage=Development:380
FrameTransport.open jsf.js?ln=javax.faces&stage=Development:242
AjaxEngine.req.sendRequest jsf.js?ln=javax.faces&stage=Development:1794
sendRequest jsf.js?ln=javax.faces&stage=Development:2440
request jsf.js?ln=javax.faces&stage=Development:2450 
ab jsf.js?ln=javax.faces&stage=Development:3255
onchange List.xhtml:169

回答1:

inputfile most be inside other form like this

<h:form enctype="multipart/form-data">                                
                            <p:fileUpload value="#{contratosMB.fileContrato}" mode="simple" />  
                            <p:commandButton value="Cargar Archivo" ajax="false"  
                            actionListener="#{contratosMB.upload}" icon="ui-icon-arrowreturn-1-n"/>  
</h:form>

回答2:

Okeyyyyyy got ittt working: here's how: 2 separete forms an ajax call an the mojarra javax.faces-2.2.9999...jar

                </div>
            <h:commandLink action="#{ofertaController.create}" value="#{bundle.CreateOfertaSaveLink}" onclick='Chat.sendMessage();'/>
            <br />
            <br />
            <h:commandLink action="#{ofertaController.prepareList}" value="#{bundle.CreateOfertaShowAllLink}" immediate="true"/>
            <br />
            <br />
            <h:link outcome="/index" value="#{bundle.CreateOfertaIndexLink}"/>
        </h:form>
        <h:panelGrid id="secondPanel" columns="2">
            <h:form prependId="false" enctype="multipart/form-data" >
                <h:outputLabel value="#{bundle.CreateOfertaLabel_imagen}" for="imagen" />
                <h:inputFile id="imagen" 
                             value="#{ofertaController.upLoad.upFile}" 
                             title="#{bundle.CreateOfertaTitle_imagen}">
                    <f:ajax  execute="imagen" />
                </h:inputFile>
            </h:form>     

来源：https://stackoverflow.com/questions/21656021/jsf-2-2-selectmanycheck-breaks-javascript