0

I have an apex:outputPanel tag with an a tag inside it, with a div inside it, like so:

<apex:outputPanel id="myPanel">
    <a href="http://google.com">
        <div>Test</div>
    </a>
</apex:outputPanel>

When this originally renders, it renders as expected:

<span id="j_id0:j_id302:j_id303:myPanel">
    <a href="http://google.com">
        <div>test</div>
    </a>
</span>

But when I run an apex:actionFunction that rerenders myPanel, it renders as such:

<span id="j_id0:j_id302:j_id303:myPanel">
    <a href="http://google.com"></a>
    <div>test</div>
</span>

I want the div to be inside the a tag just like the first render. Is there a reason this happens?

  • 1
    and you have no jQuery or other javascript on the page that is manipulating the DOM? – cropredy Jun 11 '19 at 0:58
1

The HTML specification forbids block elements inside of inilne elements. MDN says this about inline elements:

Generally, inline elements may contain only data and other inline elements. You can't put block elements inside inline elements.

I believe that the Visualforce runtime is bumping the block element outside of the inline element in order to adhere to this rule. This does not happen if you replace the div with a span. Here's a self-contained example.

<apex:page>
    <apex:form>
        <apex:outputPanel id="render1">
            <a href="https://www.google.com/">
                <span>
                    This link works okay...
                </span>
            </a>
        </apex:outputPanel>
        <apex:actionFunction name="doAction1" reRender="render1" />
    </apex:form>
    <button onclick="doAction1(); return false;">
        Do ReRender
    </button>
    <br />    
    <apex:form>
        <apex:outputPanel id="render2">
            <a href="https://www.google.com/">
                <div>
                    This link <b>DOES NOT</b> work okay...
                </div>
            </a>
        </apex:outputPanel>
        <apex:actionFunction name="doAction2" reRender="render2" />
    </apex:form>
    <button onclick="doAction2(); return false;">
        Do ReRender
    </button>
</apex:page>
| improve this answer | |
  • This fixed it! Interesting that it only enforces this rule on rerender. Thanks! – Dylan Bowman Jun 11 '19 at 15:45
  • @DylanBowman Yeah, I believe it happens because of the a4j library that Visualforce uses. I never dug in to it too far, but I do recall running in to a problem like this before, now that I think about it. – sfdcfox Jun 11 '19 at 16:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.