CheckedMultiSelect and Roo Controller

[mbabauer]

I have been using all my Googling-ninja skillz to try and find a solution to this, but I can't seem to get a multi-select to work in Roo.

My HTML code looks like this:

  			<form id="newArtForm" name="newArtForm" action="${add_user_art_base}${userObject.username}" method="post" enctype="multipart/form-data" >
	  			<br/><label for="newArtTitle">Title: </label><input type="text" id="newArtTitle" dojoType="dijit.form.TextBox" name="newArtTitle" trim="true" />
	  			<br/><label for="newArtDescription">Description: </label><textarea id="newArtDescription" name="newArtDescription" dojoType="dijit.form.Textarea" style="width:200px;"><jsp:text /></textarea>
	  			<br/><label for="newArtCategories">Category: </label>
	  			<select name="newArtCategories" id="newArtCategories" dojoType="dojox.form.CheckedMultiSelect" multiple="true">
	  				<!-- This is a "Hack".  Need a better, more openly-compatible way to render these nested categories -->
	  				<c:forEach items="${rootCategories}" var="category" varStatus="index">
	  					<option value="${category.id}">${category.name}</option>
	  					<c:if test="${not empty category.childCategories}">
	  						<c:forEach items="${category.childCategories}" varStatus="childIndex1" var="child1">
	  							<option value="${child1.id}"><span style="padding-left:10px">${child1.name}</span></option>
	  							<c:if test="${not empty child1.childCategories}">
	  								<c:forEach items="${child1.childCategories}" varStatus="childIndex2" var="child2">
	  									<option value="${child2.id}"><span style="padding-left:20px">${child2.name}</span></option>
	  								</c:forEach>
	  							</c:if>
	  						</c:forEach>
	  					</c:if>
	  				</c:forEach>
	  			</select>
	  			<br/><label for="newArtFile">File: </label><input type="file" id="newArtFile" name="newArtFile" />
	  			<br/><input type="button" value="Submit Form" id="newArtBusyButton" dojoType="dojox.form.BusyButton" label="Upload" busyLabel="Submitting Form..." timeout="2000" />
  			</form>

And on my controller:

    @RequestMapping(value="/addUserArt/{username}")
   	public @ResponseBody String addUserArt(
   			@PathVariable("username") String username, 
   			@RequestParam(value="newArtTitle") String newArtTitle, 
   			@RequestParam(value="newArtDescription") String newArtDescription, 
   			@RequestParam(value="newArtCategories",required=false) Integer [] newArtCategories, 
   			@RequestParam(value="newArtFile") MultipartFile newArtFile, 
   			Model uiModel,
   			Principal principal) throws IOException {
    	SiteUser user = SiteUser.findSiteUsersByUsernameEquals(username).getSingleResult();
    	if(user!=null) {
	    	ArtPiece art = new ArtPiece();
	    	art.setTitle(newArtTitle);
	    	art.setDescription(newArtDescription);
	    	art.setSize(newArtFile.getSize());
	    	art.setImage(newArtFile.getBytes());
	    	art.setContentType(newArtFile.getContentType());
	    	art.setUploaded(new Date());
	    	art.setOwner(user);
	    	return "{ status:ok }";
    	} else {
    		return "{ status:failed }";
    	}
    }

The problem is, the newArtCategories variable is alway null, no matter what I change it too or do on the UI. I tried making it a String and an array of Integers, but it still comes over as null. If I set the required to true, it fails because it's null.

Anyone know where I have deviated from the path?

Edit: I am pasting in the rendered HTML from doing a View Source.

  <form enctype="multipart/form-data" method="post" action=
  "/ArtSite/json/addUserArt/mbauer" name="newArtForm" id="newArtForm">
    <br />
    <label for="newArtTitle">Title:</label> <input trim="true" name="newArtTitle"
    dojotype="dijit.form.TextBox" id="newArtTitle" type="text" /><br />
    <label for="newArtDescription">Description:</label> 
    <textarea style="width:200px;" dojotype="dijit.form.Textarea" name=
    "newArtDescription" id="newArtDescription">
</textarea><br />
    <label for="newArtCategories">Category:</label> <select multiple="true" dojotype=
    "dojox.form.CheckedMultiSelect" id="newArtCategories" name="newArtCategories">
      <option value="1">
        Images
      </option>

      <option value="5">
        Sketch
      </option>

      <option value="8">
        Computer Generated
      </option>

      <option value="7">
        Paintings
      </option>

      <option value="9">
        Photography
      </option>

      <option value="11">
        Natural World
      </option>

      <option value="12">
        Human Experience
      </option>

      <option value="13">
        Other
      </option>

      <option value="6">
        One-Line Drawing
      </option>

      <option value="10">
        Video
      </option>

      <option value="14">
        Real World
      </option>

      <option value="15">
        Animated
      </option>

      <option value="2">
        Audio
      </option>

      <option value="16">
        Dramatic Narrative
      </option>

      <option value="19">
        Instrumental
      </option>

      <option value="20">
        Instrument
      </option>

      <option value="17">
        Rap
      </option>

      <option value="18">
        Accapella
      </option>

      <option value="3">
        Products
      </option>

      <option value="22">
        Other
      </option>

      <option value="21">
        Sculpture
      </option>

      <option value="4">
        Written Word
      </option>

      <option value="23">
        Poetry
      </option>

      <option value="24">
        Short Story
      </option>
    </select><br />
    <label for="newArtFile">File:</label> <input name="newArtFile" id="newArtFile" type=
    "file" /><br />
    <input timeout="2000" busylabel="Submitting Form..." label="Upload" dojotype=
    "dojox.form.BusyButton" id="newArtBusyButton" value="Submit Form" type="button" />
  </form>

There may be something with how the page is rendering. I can add the full files if needed.

[mbabauer]

More information...used Chrome's Dev Tools to see what is actually getting rendered after Dojo and the rest of the JavaScript has its way. I couldn't paste it directly, so here is the pastebin link.

One thing I noticed is that the options don't end up under the select tab. I think this is most likely the problem, but it would be nice to have some reassurance. So, this may just likely be a Dojo problem.

[mbabauer]

I wanted to update this posting in case someone else happens across it.

The problem looks to be with Dojo. There is an open bug report here that discribes the problem, and has several suggested patches. I tried updating to dojo 1.6.1, then applied the suggestions in comment #12 on the bug report, but it still doesn't work. If you use the DOM inspector on your browser (I personally use Chrome), you will see that with the patched code, the hidden select does get the options set, but the DOM element node does not have a name. The result is that it doesn't get processed with the rest of the form.

For now, I am switching my UI to use the plan vanilla MultiSelect. It's not really the component I want, but at least it works.

[Macs]

Hello mbabauer,
I got the same problem but made it work.
After you apply the patch you see here: http://bugs.dojotoolkit.org/ticket/10544
you have also to modify the internal template in CheckedMultiSelect.js. It uses that (instead of CheckedMultiSelect.html) I think because is a "compiled" version of dojo.
Here my working version: http://pastebin.com/n3RVpXre

check my blog for the more clear steps to make it work:

http://massimofranzoni.wordpress.com...tiselect-work/

[mbabauer]

Fantastic! Thanks for the help!