function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

YUI Panel render not working as expected when using repeater components

hi there,


I have spent many hours on this and can't figure out why Visualforce has trouble with YUI Panel renders when using repeater components.  Here is my isolated repro test case:



<apex:page controller="TestYUIC" tabStyle="Account" sidebar="false">

<apex:styleSheet value="" />
<apex:includeScript value="" />
<apex:includeScript value="" />
<apex:includeScript value="" />

    YAHOO.namespace(""); = function() {
        document.getElementById("myDialogPanel").style.display = "block";;
    function passToShowMe(repeaterString)
        var elementID = "DialogHere" + repeaterString;;;
    } = function() {;
    } = function() {
        document.body.className = document.body.className + " yui-skin-sam";
       = new YAHOO.widget.Panel(
            "myDialogPanel",  // The id of our dialog container
                    width           :   50,    // You can play with this until it's right
                    visible         :   false,  // Should be invisible when rendered
                    draggable       :   true,   // Make the dialog draggable
                    close           :   false,  // Don't include a close title button
                    modal           :   false,   // Make it modal
                    fixedCenter     :   false,   // Keep centered if window is scrolled
                    zindex          :   40,     // Make sure it's on top of everything
                    constraintoviewport    :    true,           
    YAHOO.util.Event.addListener(window, "load",;

<apex:form id="MainForm">
<apex:repeat value="{!repeaterStrings}" var="s" id="StringRepeater">
        <input id="Button{!s}" type="button" class="btn"
                    value="{!s}" />
        <div id="DialogHere{!s}"></div>
        <apex:actionFunction name="passToController" action="{!DoSelect}" rerender="dialogPanel">
            <apex:param name="FruitSelection" value="" />

<apex:form >
<div id="myDialogPanel" style="display: none" >
     <apex:outputPanel id="dialogPanel" layout="block">
  <div class="hd">
    <apex:outputText value="{!Fruit}" />
  <div class="bd">
        <div style="text-align: center;" >
          <apex:commandButton value="Close" immediate="true" oncomplete=";"/>




public class TestYUIC {
public List<String> repeaterStrings = new List<String>();
public String Fruit {get; set;}

      public TestYUIC()
      public void DoSelect()
          Fruit = Apexpages.currentPage().getParameters().get('FruitSelection');
      public List<String> getrepeaterStrings()
          return repeaterStrings;



Based on the view source of the page, the above code correctly generates a set of unique div tags intended for panel placements, eg.  DialogHereApple, DialogHereStrawberry, and so on.


        <input class="btn" id="ButtonApple" onclick="passToShowMe('Apple')" type="button" value="Apple" />
<div id="DialogHereApple"></div><script id="j_id0:MainForm:StringRepeater:0:j_id7" type="text/javascript">passToController=function(FruitSelection){A4J.AJAX.Submit('_viewRoot','j_id0:MainForm',null,{'similarityGroupingId':'j_id0:MainForm:StringRepeater:0:j_id7','parameters':{'j_id0:MainForm:StringRepeater:0:j_id7':'j_id0:MainForm:StringRepeater:0:j_id7','FruitSelection':FruitSelection||''} ,'actionUrl':''} )};
        <input class="btn" id="ButtonStrawberry" onclick="passToShowMe('Strawberry')" type="button" value="Strawberry" />
<div id="DialogHereStrawberry"></div><script id="j_id0:MainForm:StringRepeater:1:j_id7" type="text/javascript">passToController=function(FruitSelection){A4J.AJAX.Submit('_viewRoot','j_id0:MainForm',null,{'similarityGroupingId':'j_id0:MainForm:StringRepeater:1:j_id7','parameters':{'j_id0:MainForm:StringRepeater:1:j_id7':'j_id0:MainForm:StringRepeater:1:j_id7','FruitSelection':FruitSelection||''} ,'actionUrl':''} )};


The page simply displays 4 buttons on load.  I expect a dialog to render right after each button depending on the button I click on (because each button has an unique div tag after it for rendering). However, when clicking on the buttons, the panel always renders after the first button I click on ...




Say I click on the button for Mango first, the panel renders in the DialogHereMango div tag, but then if I click on the Apple button, the panel still renders in the DialogHereMango div tag.  If I put an alert tag after the line var elementID = "DialogHere" + repeaterString; in the passToShowMe function, it correctly shows the elementID passed on to the render method for each click.


Any YUI/VF experts out there who can help shed some light on why the YUI panel does not render in the targeted div tag when using apex:repeater component?




Best Answer chosen by Admin (Salesforce Developers) 
Actually, adding; ahead of the render call fixed it.