DropDownChoice does not display the selected value

Question

I have a DropDownChoice box that loads a list of values on load(), but when I select a value from the list, the selected value does not show up in the box, even though it appears that getModelObject() does retrieve and return the correct value (the value I selected). It's just the box does not display it. I use Wicket 6.3.0, locally tested using jetty server 6.1.26 and FireFox 17.0, JQuery Mobile 1.2.0, JQuery 1.8.3. Any suggestions or ideas?

Here is the Wicket code:

MetaProfile profile = null;
...
IModel<List<String>> oxeNodeModel = null;
oxeNodeModel = new LoadableDetachableModel<List<String>>() {
           private static final long serialVersionUID = 1L;
            @Override
            protected List<String> load() {
                    try {
                            List<String> names = getOXENodeList(); 
                            //load the OXE node list

                            if (names == null)
                                   return Collections.emptyList();
                            else {
                                    return names;
                            }

                    }catch (Exception e) {
                                  return Collections.emptyList();
                    }
            }
    };

    oxeNodeBox = new DropDownChoice("oxeNode",
            new PropertyModel<String>(profile, "oxeNodeName"), oxeNodeModel);

    oxeNodeBox.setEnabled(true);
    oxeNodeBox.setOutputMarkupId(true);
    add(oxeNodeBox);

The html template is:

<tr id="oxeNodeRow" name="oxeNodeRow" style="display:none"> 
    <td align="right" nowrap class="fieldLabel"><label for="oxeNode" wicket:id="oxeNodeLabel" class="requiredLabel">OXE Node</label></td> 
    <td colspan="-1"><select id="oxeNode" name="oxeNode" wicket:id="oxeNode"> 
          <option selected>OXENode</option> </select>
    </td> 
</tr>

I have a bunch of DropDownChoice boxes on the same form having the same issue. However, the first DropDownChoice of the form does not have the problem, ie., it does display the selected value once I made the selection from the list. Its wicket code and html markup are below. Hopefully, someone with sharper eyes can spot the difference that could have triggered the problems:

    profileTypeBox = new DropDownChoice<MetaProfileType>("type",
        new PropertyModel<MetaProfileType>(profile, "type"),
        Arrays.asList(MetaProfileType.values()),
        new IChoiceRenderer<MetaProfileType>() {
            private static final long serialVersionUID = 1L;
            @Override
            public Object getDisplayValue(MetaProfileType object) {
                return object.name();
            }
            @Override
            public String getIdValue(MetaProfileType object, int index) {
                return object.name();
            }
        }
    );
    profileTypeBox.setOutputMarkupId(true);
    add(profileTypeBox);

html:

                  <td colspan="-1"> <select id="profileType" name="profileType" wicket:id="type">
              <option>default</option>
            </select> </td>

By the way, I am including the html header here too just in case it might be problem since the problem appeared after I switched from the old css header (commented out) to the standard jquery mobile includes:

    <html xmlns:wicket="http://wicket.apache.org/">
     <head>

      <!-- meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

     <link rel="stylesheet" type="text/css" href="css/custom.css" media="only screen and (max-width: 480px)"/>
     <link rel="stylesheet" type="text/css" href="css/default.css" media="only screen and (min-width: 1025px)"/>
     <link rel="stylesheet" type="text/css" href="css/portrait.css"
      media="all and (max-device-width: 1024px) and (orientation:portrait)"/>
     <link rel="stylesheet" type="text/css" href="css/landscape.css"
      media="all and (max-device-width: 1024px) and (orientation:landscape)"/>
     <meta name="viewport" content="user-scalable=no, width=device-width"/>
     <link rel="stylesheet" href="css/iphone-style-checkboxes.css" type="text/css"/>
     <script type="text/javascript" src="js/iphone-style-checkboxes.js"></script-->

     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />  
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>  
     <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">    </script>        

     </head>

When you say "select a value from the list", do you mean select the value when using your application via the browser? Or do you mean select a value from the list in the code? — Sarhanis, Nov 27 '12 at 03:33
Sorry if it was not clear, I meant when a user manually selects a value from the DropDownChoice list on the web page in the browser, the selected value is not displayed in the box on the gui. No, I did not mean selecting a value programmatically. — shimin q, Dec 01 '12 at 19:24
That sounds impossible. Can you show what HTML gets displayed? Is there some AJAX calls that are made? And why is colspan = -1? That doesn't make sense. — Sarhanis, Dec 03 '12 at 04:14

score 0 · Answer 1 · answered Dec 03 '12 at 04:15

0

This seems like a HTML problem.

First step: delete colspan="-1". That is invalid HTML: http://www.w3.org/wiki/HTML/Elements/td

answered Dec 03 '12 at 04:15

Sarhanis

1,577
1
12
19

Thanks for your input. I did try to delete colspan="-1", unfortunately, the problem persists. – shimin q Dec 05 '12 at 16:26

DropDownChoice does not display the selected value

1 Answers1