How to populate inputText from selectOneMenu item?

Question

So far I've not been able to hit on the right way to do it. I've got an inputText bound to a variable in an object. I've got a selectOneMenu item dropdown all full of goodness. The thought was that when selected, I'd just push the selected text from the dropdown into the input box (simulating typing it). Apparently that's a no go. I can grab the text of the selected element in a javascript onselect handler easily enough, but the inputText refuses to accept it (presumably choosing to redisplay the stored empty string rather than accept this as input and push it to the object). I've also tried setting the string directly in Java, but with the exact same results (of nothing happening). Apparently my entire approach is flawed. What's the right way to do this? Some sample xhtml code that doesn't work follows (the java involved is simple getter/setter):

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
      <script type="text/javascript">
        function dropdownSelect() {            
            var element=document.getElementById("form:dropdown");
            var text=element.options[element.selectedIndex].value;
            document.getElementById("form:part").textContent=text; // TODO doesn't work.  Neither does forcing the part number to change inside the object via Java code
        }
    </script>    
    <h:body>
        <h:form id="form">
            <h:inputText id="part" value="#{part.partNumber}"/>
            <h:selectOneMenu id="dropdown" onselect="dropdownSelect()">                
                <f:selectItems value="#{part.list}"/>
            </h:selectOneMenu>
        </h:form>
    </h:body>    
</html>

score 1 · Accepted Answer · answered Jan 10 '13 at 19:38

1

There are two mistakes:

The select event is the wrong event to hook on change of the HTML <select> element. You need change instead.
```
<h:selectOneMenu id="dropdown" onchange="dropdownSelect()">
```
The textContent property doesn't exist on HTML DOM object representation of the HTML <input> element, the HtmlInputElement. You need value instead.
```
document.getElementById("form:part").value = text;
```

Neither of those problems are related to JSF. It's just basic HTML/JS. You'd have exactly the same problem on the same HTML content generated by PHP, ASP or even plain HTML.

For the case you're interested, the "JSF-ish" way would be something like follows:

<h:form>
    <h:inputText id="part" value="#{part.partNumber}"/>
    <h:selectOneMenu value="#{part.selectedNumber}">
        <f:selectItems value="#{part.list}"/>
        <f:ajax listener="#{part.changeNumber}" render="part" />
    </h:selectOneMenu>
</h:form>

with

public void changeNumber(AjaxBehaviorEvent event) {
    partNumber = selectedNumber;
}

answered Jan 10 '13 at 19:38

BalusC

1,082,665
372
3,610
3,555

Perfect! Made those quick changes and I'm good to go now. Thanks! – Brian Knoblauch Jan 10 '13 at 19:50
Well, this is curious. I *thought* it was working, but once I pushed it into production it blew up with all kinds of wacky phase errors. So, I dumped the js method and switched to your JSF method. That cures the spewing of phase errors. – Brian Knoblauch Jan 11 '13 at 13:22
What errors exactly do you get? I don't recognize "phase errors" as anything specific to JS. – BalusC Jan 11 '13 at 13:25
Well, OK, this is also very odd. After switching to the JSF method, it worked for a short period of time and is now failing with the same errors as the js method! "WARNING: JSF1087: Unable to generate Facelets error page as the response has already been committed. SEVERE: javax.faces.FacesException: PWC3999: Cannot create a session after the response has been committed" – Brian Knoblauch Jan 11 '13 at 13:31
As far as what happens visibly in the app during those errors is that the item selected either does not appear in the text box, or when it does, the code that uses it gets a completely different value from what's visibly in the input box! Maybe I have a problem with my server? – Brian Knoblauch Jan 11 '13 at 13:32
1

PWC3999 is answered here: http://stackoverflow.com/questions/8072311/illegalstateexception-cannot-create-a-session-after-the-response-has-been-commi/8072445#8072445 Update to at least Mojarra 2.1.8. – BalusC Jan 11 '13 at 13:33
Option 3 from your list is working for me. Wanted to upgrade Mojarra, but my system is claiming everything's up to date (but only showing Mojarra 2.1.6)... Thanks! – Brian Knoblauch Jan 11 '13 at 14:30

How to populate inputText from selectOneMenu item?

1 Answers1