8 Replies Latest reply: May 10, 2012 11:03 AM by Beaudoin Gaël RSS

JavaScript Error The content of elements must consist of well-formed character data or markup.

Val Sw Expert
Hi,

I am trying to implement dependent dropdown in Seam using an example.

but I get the error as "content of elements must consist of well-formed character data or markup."

The same code works perfectly fine when I use Simple JSP project.

The error is on the for loop line....
for (o=1; o < age.length; o++) //HERE is the error...
   {
     agelmt[o].text = age[o];
   }

Please suggest.
...

  • 1. Re: JavaScript Error The content of elements must consist of well-formed character data or markup.
    Daniel Roth Apprentice

    Need more info. Post code for xhtml, and bean. The error suggest some kind of dirty output.

  • 2. Re: JavaScript Error The content of elements must consist of well-formed character data or markup.
    Val Sw Expert
    Thanks for looking into it.. I am using hardcoded values.... no bean.
    When I run the same code using simple JSP it works perfectly fine.

    Scenario : I have 2 dropdowns, value in 2nd is dependent on 1st dropdown.
    I am using .txt file to read the values
    1st dropdown contains : ItemA, ItemB, ItemC
    2nd dropdown displays 1,2,3 when user selects ItemA.
    2nd dropdown displays 4,5,6,7 when user selects ItemB, similarly 8,9 for ItemC selection.
    I got the example while searching...

    ItemA.txt contains 1|2|3, ItemB.txt |4|5|6|7 and ItemC.txt |8|9.

    This is the xhtml I am using in Seam, it gives error on line
    "for (o=1; o < itemDetailsar.length; o++)", (The content of elements must consist of well-formed character data or markup)

    Please suggest what is wrong....

    Complete Test.xhtml
    -------------------
    <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                                 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                    xmlns:s="http://jboss.com/products/seam/taglib"
                    xmlns:ui="http://java.sun.com/jsf/facelets"
                    xmlns:f="http://java.sun.com/jsf/core"
                    xmlns:h="http://java.sun.com/jsf/html"
                    xmlns:a="http://richfaces.org/a4j"
                    xmlns:a4j="http://richfaces.org/a4j"
                    xmlns:rich="http://richfaces.org/rich"
                    template="layout/template.xhtml">
                          
    <head>
    <script src="request.js"></script>
    <script>
    function handleOnChange(dd1)
    {
      var idx = dd1.selectedIndex;
      var val = dd1[idx].text;
      var par = document.forms["frmSelect"];
      var parelmts = par.elements;
      var itemDetailssel = parelmts["itemDetails"];
      var item = val;
      if (item != "Select item")
      {
       var directory = ""+document.location;
       directory = directory.substr(0, directory.lastIndexOf('/'));

       Http.get({
              url: "./" +  item + ".txt",
              callback: fillitemDetails,
              cache: Http.Cache.Get
         }, [itemDetailssel]);
      }
    }
    function fillitemDetails(xmlreply, itemDetailselmt)
    {
      if (xmlreply.status == Http.Status.OK)
      {
       var itemDetailsresponse = xmlreply.responseText;
       var itemDetailsar = itemDetailsresponse.split("|");
       itemDetailselmt.length = 1;
       itemDetailselmt.length = itemDetailsar.length;
      
       for (o=1; o < itemDetailsar.length; o++)
       {
         itemDetailselmt[o].text = itemDetailsar[o];
       }
      }
      else
      {
       alert("Cannot handle the Ajax call.");
      }
    }
    </script>
    </head>
    <ui:define name="body">
      <h:messages globalOnly="true" styleClass="message" id="globalMessages"/>
        <h:form id="listTest" styleClass="edit">   
         <select name="item" onChange="handleOnChange(this);">
              <option>Select Item</option>
              <option>ItemA</option>
              <option>ItemB</option>
              <option>ItemC</option>
         </select>
         <select name="itemDetails">
              <option>Select Item details</option>
         </select>   
        </h:form>
    </ui:define>
    </ui:composition>
  • 3. Re: JavaScript Error The content of elements must consist of well-formed character data or markup.
    Daniel Roth Apprentice

    I cannot really say why it doesn't work, but jsf modifies stuff quite a lot. I suggest you step through your javascript in firebug or equivalent.


    Is there a particular reason why you try to do this with javascript? I think it would be a lot easier (even trivial) to do this with ajax4jsf.

  • 4. Re: JavaScript Error The content of elements must consist of well-formed character data or markup.
    Val Sw Expert

    Thanks for replying Daniel...


    No there is no reason for using javascript, infact I would definitely prefer ajax4jsf, I tried searching for samples but couldn't found any....


    I really don't want to use javascript or simple JSF, ajax would be best choice...


    Please let me know if you can suggest any sample ajax4jsf, this is very urgent for us.

  • 5. Re: JavaScript Error The content of elements must consist of well-formed character data or markup.
    Val Sw Expert
    I tried ajax4jsf, the code works fine if I create separate test.xhtml and use only these 2 dropdowns..
    But, when I try to embed in our main xhtml (which have multiple panels), looks like <a:support event="onchange".. is not fired. Both files uses the same war...

    StudyEdit.xhtml behavior:
    I can see Master and details dropdown, 1st. dropdown displays List as "Item A, Item B, Item C", 2nd. dropdown displays only A,B,C.
    If I change any 1st. dropdown, 2nd. dropdown does not change.
    Same code works fine if I create separate test.xhtml and use only these 2 dropdowns..

    Please suggest what is missing ...here are both xhtmls

    Test.xhtml (this works fine)
    ----------
    <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                                 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                             ...
                        xmlns:a="http://richfaces.org/a4j"
                    xmlns:rich="http://richfaces.org/rich"
                    template="layout/template.xhtml">
                          
    <ui:define name="body">   
        <h:messages globalOnly="true" styleClass="message" id="globalMessages"/>
        <h:form id="listTest" styleClass="edit">
       
         <rich:panel>     
         <a:outputPanel id="myPanel1">
              <s:decorate id="masterItems" template="layout/edit.xhtml">          
                 <ui:define name="label">Master Item List: </ui:define>
                   <h:selectOneMenu value="#{itemListTestBean.masterValue}" required="true">
                        <s:selectItems var="v_item" value="#{itemListTestBean.masterItems}" label="#{v_item}" noSelectionLabel="select master ..."/>
                        <a:support event="onchange" reRender="panel2"></a:support>
                   </h:selectOneMenu>
              </s:decorate>
         </a:outputPanel>
         </rich:panel>
         
         <rich:panel id="panel2">
         <a:outputPanel rendered="#{!empty itemListTestBean.masterValue}">     
              <s:decorate id="detailItems" template="layout/edit.xhtml">
                 <ui:define name="label">Detail Item List : </ui:define>
                        <h:selectOneMenu value="#{itemListTestBean.detailValue}">
                             <s:selectItems var="v_item" value="#{itemListTestBean.detailItems}" label="#{v_item}" noSelectionLabel="select details ..."/>
                             <a:support event="onload" reRender="panel2"></a:support>          
                        </h:selectOneMenu>
              </s:decorate>     
         </a:outputPanel>
         </rich:panel>
        </h:form>
    </ui:define>
    </ui:composition>

    Main StudyEdit.XHTML (Nothing happens when I change 1st. dropdown)
    I can see Master and details dropdown, 1st. dropdown displays List as "Item A, Item B, Item C", 2nd. dropdown displays only A,B,C.
    If I change any 1st. dropdown, 2nd. dropdown does not change.
    ---------------
    <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                                 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                             ...
                        xmlns:a="http://richfaces.org/a4j"
                    xmlns:rich="http://richfaces.org/rich"
                    template="layout/template.xhtml">          
                          
    <ui:define name="body">   
        <h:messages globalOnly="true" styleClass="message" id="globalMessages"/>
        <h:form id="study" styleClass="edit">

    <rich:panel>     
    <a:outputPanel id="myPanel1">
         <s:decorate id="masterItems" template="layout/edit.xhtml">          
              <ui:define name="label">Master Item List: </ui:define>
              <h:selectOneMenu value="#{itemListTestBean.masterValue}" required="true">
                   <s:selectItems var="v_item" value="#{itemListTestBean.masterItems}" label="#{v_item}" noSelectionLabel="select master ..."/>
                   <a:support event="onchange" reRender="panel2"></a:support>
              </h:selectOneMenu>
         </s:decorate>
    </a:outputPanel>
    </rich:panel>

    <rich:panel id="panel2">
    <a:outputPanel rendered="#{!empty itemListTestBean.masterValue}">     
         <s:decorate id="detailItems" template="layout/edit.xhtml">
              <ui:define name="label">Detail Item List : </ui:define>
                   <h:selectOneMenu value="#{itemListTestBean.detailValue}">
                        <s:selectItems var="v_item" value="#{itemListTestBean.detailItems}" label="#{v_item}" noSelectionLabel="select details ..."/>
                   </h:selectOneMenu>
         </s:decorate>     
    </a:outputPanel>
    </rich:panel>

    <rich:panel>
         <s:decorate id="studyNameDecoration" template="layout/edit.xhtml">
              <ui:define name="label">Study Name</ui:define>
              <h:inputText id="studyName"
                               required="true"
                               value="#{studyHome.instance.studyName}"/>
         </s:decorate>
    </rich:panel>

    <rich:panel>
         <s:decorate id="entryPointDecoration" template="layout/edit.xhtml">
         <ui:define name="label">Entry Point</ui:define>
         <h:inputText id="entryPoint" required="true"
                          value="#{quantExperimentHome.instance.entryPoint}"/>
         </s:decorate>
    </rich:panel>

    <rich:panel>
         <table border="1" class="dr-table rich-table">
              <thead class="dr-table-thead">
                   <tr class="dr-table-header rich-table-header">
                        <th class="dr-table-headercell rich-table-headercell"><h:outputText value="Action" /></th>
                        <th class="dr-table-headercell rich-table-headercell"><h:outputText value="PName" /></th>
                   </tr>
              </thead>
             <ui:repeat value="#{studyHome.reagent}" var="info">
                <tbody onmouseover="this.style.backgroundColor='#F8F8F8'"
                          onmouseout="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">                      
                               <td align="center" class="dr-subtable-cell rich-subtable-cell" height="20%">
                                      <s:link action="#{studyHome.removeReagent}" value="Remove This" id="reagent"/>     
                            </td>
                           
                            <td align="center" class="dr-subtable-cell rich-subtable-cell" height="20%">
                                           <s:decorate template="layout/edit.xhtml">
                                                <h:inputText id="pname1" required="true" value="#{info.pname}"/>
                                           </s:decorate>
                            </td>
                     
                </tbody>
                </ui:repeat>
            </table>
     
                <div style="clear:both">
                    <span class="required">*</span>
                    required fields (Note : At least one reagent is required to create a Study)
                </div>        
              
              </rich:panel>
         
         <div class="actionButtons" align="center">
             <h:commandButton action="#{studyHome.addReagent}" value="Add More Reagents"/>
            <h:commandButton action="#{studyHome.removeReagent}" value="Remove Reagent" />
         </div>

    <div class="actionButtons">
         <h:commandButton id="save" value="Save" action="#{studyHome.persist}" ..../>
    </div>
    </h:form>
    </ui:define>
    </ui:composition>
  • 6. Re: JavaScript Error The content of elements must consist of well-formed character data or markup.
    Felipe Quinones Newbie
    Talvez un poco tarde para la respuesta, pero en fin a muchos puede servir, me pasaba lo mismo pero la solucion es la siguiente:

    <script type="text/javascript" language="javascript">
      <![CDATA[
      //]]>
    </script>


    De esa forma reconoce los caracteres directamen sin tenerlos que hacer un parser.

  • 7. Re: JavaScript Error The content of elements must consist of well-formed character data or markup.
    rembrandt Newbie

    Muchas Gracias:

     

    Me tomo estos momentos para agradecer esta sencilla nota que me saco de apuros. Me gustaria agregar esta nota:

     

     

    <script type="text/javascript" language="javascript">

      <![CDATA[

    Código del Script...

      //]]>

    </script>

     

    Saludos.