7 Replies Latest reply on Nov 5, 2008 10:24 PM by Nick Belaevski

    ajaxSingle not working

    Ben Maisano Newbie

      Hi,
      I'm using RichFaces 3.1.5 and my objectives I believe are simple. Just want to get a text box to auto-populate based on a selection from a pull down menu. I have the standard JSF components working and added an a4j:support tag within my h:selectOneMenu item with event="onchange". This h:selectOneMenu also has a value change listener on it, which does get called and I capture the pull down selection and set the text box value in the managed bean successfully. I put a reRendered="textboxId" too. My problem is RichFaces seems to be refreshing my entire page, and after the request is complete all my page has is a textbox, and JS errors. Not sure why anything besides my textbox is even being touched by RichFaces JS code. I believe some problem with the submit request or handling the response. Code pieces below, any help is greatly appreciated, I've been fighting with this for days. Do I need to wrap things in a4j components like regions, output panels or forms? I've tried several variations with no success.

      (Note i've tried with and without the region and form as a4j components)
      <f:view>
      <a4j:region id="myRegion">
      <a4j:form id="myForm" >
      <h:panelGrid columns="2" id="myGrid">
      <h:panelGroup>
      <h:selectOneMenu id="commArrangementCode" value="#{myMB.myCd}"
      binding="#{myMB.myCdUIInput}"
      valueChangeListener="#{myMD.myCdChangeEvent}"> <f:selectItem itemValue=" " itemLabel=" " />
      <f:selectItems value="#{contextRefData.myCds}" />
      <a4j:support event="onchange" reRender="cdName" ajaxSingle="true" />
      </h:selectOneMenu>
      </h:panelGroup>
      <h:panelGroup>
      <h:inputText styleClass="textfield" id="cdName" size="40"
      value="#{myMB.myCdName}" maxlength="60"
      binding="#{myMB.myCdNameUIInput}">
      </h:inputText>
      </h:panelGroup>
      </h:panelGrid>
      </a4j:region >
      </a4j:form >
      </f:view>

        • 1. Re: ajaxSingle not working
          Ilya Shaikovsky Master

          Please try to wrap the select only with a4j:region instead of ajaxSingle using.

          b.t.w. why do you need bindings to the components and what about scopes of the beans? And why do you think that all the page updated? you could check client side updates with a4j:log component

          • 2. Re: ajaxSingle not working
            Ben Maisano Newbie

            Thank you for the reply Ilya. I tried taking out the binds wrapping just select in a4j:region and removing a4j single. Nothing worked, same result, get long hang time like something is wrong, then refresh to blank page or only thing left is text box in the reRender. Funny thing is it has the auto-populated value, so all back end working (no db, all in memory, which is why I thought long hang is weird too).
            I added the a4j:log you suggested and that had some interesting information. Here is some of it:
            debug[13:43:48,798]: Have Event [object Object] with properties: target: undefined, srcElement: [object], type: change
            debug[13:43:48,798]: NEW AJAX REQUEST !!! with form :compPlanFilterForm
            debug[13:43:48,814]: Append select-one control compPlanFilterForm:commArrangementCode with value [908] and value attribute [908]
            .....
            debug[14:09:25,078]: Replace content of node by outerHTML()
            error[14:09:25,093]: Error to clear node content by innerHTML Unknown runtime error
            debug[14:09:25,093]: search for elements by name 'script' in element input
            .....

            I've stripped down a test page to just this, and still have same problem
            <f:view>
            <a4j:form id="testForm">
            <a4j:log level="ALL" popup="false" width="600" height="400" />
            <h:selectOneMenu id="commArrangementCode"
            value="#{compPlanViewerMB.compPlanSearch.commArrangementCode}"
            valueChangeListener="#{compPlanViewerMB.caoChangeEvent}">
            <f:selectItem itemValue=" " itemLabel=" " />
            <f:selectItems value="#{contextRefData.commArrgmtOffices}" />
            <a4j:support event="onchange" reRender="caoNameTest"/>
            </h:selectOneMenu>
            <h:inputText id="caoNameTest" value="#{compPlanViewerMB.commArrangementName}" />
            </a4j:form>
            </f:view>


            Also in Firefox I get this JS errors:
            Error: syntax error
            Source File: http://localhost:9085/basicscompmgmt/faces/jsf/common/jsfTileNavigator.jsp?javax.portlet.faces.DirectLink=true
            Line: 2, Column: 63
            Source Code:
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

            Its like entire document coming back in response, and not sure what this javax.portlet.faces.DirectLink=true is, thats not from our application.

            • 3. Re: ajaxSingle not working
              Ben Maisano Newbie

              Think this is a problem with h:inputText. I retested using an h:outputText and it ajax updates just fine. I tried wrapping everything in an a4j:region and pointing to the region in my reRender but that still didn't update the input text box correctly. I think based on the a4j:log output some javascript is trying to update an INPUTs "innerHTML", which would be a problem as inputs does have innerHTML attributes in the DOM, would have to update its ".value". Is this RichFaces bug? Can anyone reproduce problems with inputText components? I also had similar problem using the RichFaces suggestion box, thinking its related.

              • 4. Re: ajaxSingle not working
                Fab Mars Novice

                Another victim...

                http://ishabalov.blogspot.com/2007/08/sad-story-about-uiinput.html

                Maybe this won't help in this precie case but I happen to use this shock therapy:

                public static void clearInputs(UIComponent comp) {
                 if (comp != null) {
                 if (comp instanceof UIInput) {
                 UIInput input = (UIInput) comp;
                 input.setSubmittedValue(null);
                 input.setValue(null); // this is the local value
                 }
                 else {
                 for (UIComponent child : comp.getChildren()) {
                 clearInputs(child);
                 }
                 }
                 }
                 }


                • 5. Re: ajaxSingle not working
                  Ben Maisano Newbie

                  Thanks for the info, however this did not help me. I tried using your code, clearing the local and submitted values myself and variations along these lines with no change in the behavior, getting the JS error about innerHTML. Searching web found this on RichFaces:
                  https://jira.jboss.org/jira/browse/RF-2735
                  This this is RichFaces bug, perhaps related to IE and FireFox partially following the W3C standards for block content within and other structures. At this point I may be giving up on using RichFaces for this, could have done this in 1min with prototype and struts.

                  • 6. Re: ajaxSingle not working
                    Ben Maisano Newbie

                    Can anyone just get a pull down to populate a text box with RichFaces?, anything to populate an inputText ? If you can please post code, thx.

                    • 7. Re: ajaxSingle not working
                      Nick Belaevski Master

                      Hi,

                      This behavior is caused by specifics of request handling in RF 3.1.5 caused by JSF 1.1 support. Consider upgrading to 3.2.x/JSF 1.2 or try this:

                      <?xml version="1.0" encoding="UTF-8"?>
                      
                      <jsp:root version="2.1" xmlns:jsp="http://java.sun.com/JSP/Page"
                       xmlns:c="http://java.sun.com/jsp/jstl/core"
                       xmlns:f="http://java.sun.com/jsf/core"
                       xmlns:h="http://java.sun.com/jsf/html"
                       xmlns:rich="http://richfaces.org/rich"
                       xmlns:a4j="http://richfaces.org/a4j">
                      
                       <jsp:directive.page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"/>
                       <jsp:output omit-xml-declaration="no"
                       doctype-root-element="html"
                       doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
                       doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
                      
                       <f:view>
                       <html xmlns="http://www.w3.org/1999/xhtml">
                       <body>
                       <h:form id="testForm">
                       <h:selectOneMenu id="commArrangementCode"
                       value="#{forum11Bean.selectValue}">
                       <f:selectItem itemValue="1" itemLabel="1" />
                       <f:selectItem itemValue="2" itemLabel="2" />
                       <f:selectItem itemValue="3" itemLabel="3" />
                       <f:selectItem itemValue="4" itemLabel="4" />
                       <a4j:support event="onchange" reRender="caoNameTest" ajaxSingle="true"
                       actionListener="#{forum11Bean.resetInputValue}" />
                       </h:selectOneMenu>
                       <h:inputText id="caoNameTest"
                       value="#{forum11Bean.inputValue}" />
                       </h:form>
                       </body>
                       </html>
                       </f:view>
                      </jsp:root>


                      package org.richfaces;
                      
                      import javax.faces.component.EditableValueHolder;
                      import javax.faces.event.ActionEvent;
                      
                      public class Forum11Bean {
                      
                       private String selectValue;
                      
                       public String getSelectValue() {
                       return selectValue;
                       }
                      
                       public void setSelectValue(String selectValue) {
                       this.selectValue = selectValue;
                       }
                      
                       private String inputValue;
                      
                       public String getInputValue() {
                       return inputValue;
                       }
                      
                       public void setInputValue(String inputValue) {
                       this.inputValue = inputValue;
                       }
                      
                       public void resetInputValue(ActionEvent event) {
                       EditableValueHolder holder = (EditableValueHolder) event.getComponent().findComponent("caoNameTest");
                       holder.setValue(selectValue);
                       holder.setSubmittedValue(null);
                       }
                      }