How is apex:actionSupport connected to the event DOM element

Question

I have never used actionSupport before and here is my first try:

<apex:page controller="TestCommandButtonController">
    <apex:pageMessages />
    <apex:form >
        <label>Text</label>
        <apex:outputPanel>
            <apex:inputText value="{!text}"/>
            <apex:actionSupport event="onchange" action="{!refreshText2}" reRender="text2Input"/>
        </apex:outputPanel>
        <label>Text2</label>
        <apex:inputText id="text2Input" value="{!text2}" rendered="{!text=='Other'}"/>
        <label>Text3</label>
        <apex:inputText value="{!text3}"/>
        <apex:commandButton action="{!sampleButtonHandler}" value="Sample Button"/>
    </apex:form>
</apex:page>

The controller code is pretty straight forward as well so I don't paste it here.

The above sample doesn't work well. When I change the text to be Other it doesn't display the text2 input box.

I am just wondering how does the actionSupport connect to the related DOM element. In this case, it is the inputText. It doesn't have a for="" attribute or something similar. How can I make it work?

Answer 1

The problem is that you are telling it to do a re-render of an element that isn't there. The target element you want to be re-rendered isn't on the page, so it can't be re-rendered. If you remove the conditional rendered of text2Input, then it should work. If you still want this conditional rendering, then you have a few choices.
One way is to move up the rerender to a wrapper element that just wraps the input text.

<apex:outputPanel id="text2Input">
  <apex:inputText id="text2InputB" value="{!text2}" rendered="{!text=='Other'}"/>
</apex:outputPanel>

This would work as the text2Input is always there to be re-rendered. The child inputText then would be there or not based on your condition.

Another alternative would be to make the css display none or not based on the condition, but the above is closer to what you were originally aiming for.