Why is a tag inserted at the end of my minimal Seam page?

Question

I have been searching for an answer to my problem for two days now, so I figure its time to ask. Hopefully someone wiser in the ways of JSF and Seam (it won't take much, I'm still new to both) will be able to enlighten me.

I have a Seam application that requires a dropdown, but one that the user can type into as well. This will allow user-created entries as well as pre-defined ones. I am attempting to create this combobox using the FlexBox jQuery plugin. It seems like a good candidate for what I need. I just need to specify a div and a page that returns JSON data in order to create this combobox effect.

add-codes.html

...
<div>
Department: <div id="dept-dropdown" />
</div>
...

AccountComboBoxList.java

...
@Scope(SESSION)
@Name("actComboBoxAction")
public class AccountComboBoxList implements Serializable {
...
@WebRemote
public JSONObject getDepartmentJSON() {
    JSONObject returnJSON = new JSONObject();
    try {
        //if dept name is null, skip this and return empty obj
        if(deptName!=null) {
            JSONArray returnArray =
                JsonDataHelper.convertAcctToolEnt2JsonArray(deptName);
            returnJSON = new JSONObject();
            returnJSON.put("results",returnArray);
            logger.info("JSON results: "+returnJSON);
        }
    } catch (JSONException je) {
        logger.warn("JSONException thrown!");
        logger.warn(je.getMessage());
        je.printStackTrace();
    } finally {
        return returnJSON;
    }
}
...

deptString.xhtml - in its entirety

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:s="http://jboss.com/products/seam/taglib">

<h:outputText value="#{actComboBoxAction.getDepartmentJSON()}" />

</ui:composition>

Then in my javascript file I simply create the combobox with this line:

...
$("#test-string").flexbox('./includes/deptString.seam');
...

The problem comes in at this point. deptString.seam calls the seam method correctly and successfully returns a JSONObject. But the combobox doesn't work correctly because a '' is attached on the end of the string. For example, I copy-and-pasted this from the resulting 'View Source' of the page:

{"results":[{"id":"1","name":"Dept1"},{"id":"2","name":"Dept2"},{"id":"3","name":"Dept3"}]}</html>

What is adding this extraneous tag and is there any way to get rid of it? I created a text file with just the proper JSON in it and called that file into the .flexbox() method. The combobox worked as advertisted then, so I know the flexbox code works. I also tried removing all the JSF code from the deptString.xhtml file and had just the single line #{actComboBoxAction.getDepartmentJSON()} in the file. This caused a 'com.sun.facelets.FaceletException: Error Parsing /includes/deptString.xhtml: Error Traced[line: 1] Content is not allowed in prolog.' error.

Like I said, i'm new to JSF and Seam. If there is an obvious/better way to get a simple String from the backend to the frontend in a Seam/JSF application, I'm all ears.

Thanks in advance for your help.

Answer 1

If your javascript was in a facelet (xhtml) file the you should be able to do

$("#test-string").flexbox('#{actComboBoxAction.getDepartmentJSON()}'); 

Mixing JSF EL in a JavaScript file mentions someways of achieving this