+ 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="http://yui.yahooapis.com/2.6.0/build/assets/skins/sam/skin.css" />
<apex:includeScript value="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js" />
<apex:includeScript value="http://yui.yahooapis.com/2.6.0/build/container/container-min.js" />
<apex:includeScript value="http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js" />


    YAHOO.force.com.showMe = function() {
        document.getElementById("myDialogPanel").style.display = "block";
    function passToShowMe(repeaterString)
        var elementID = "DialogHere" + repeaterString;

    YAHOO.force.com.hideMe = function() {
    YAHOO.force.com.init = function() {
        document.body.className = document.body.className + " yui-skin-sam";
        YAHOO.force.com.myDialog = 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", YAHOO.force.com.init);

<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="YAHOO.force.com.hideMe();"/>




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':'https://c.cs0.visual.force.com/apex/TestYUIP'} )};
        <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':'https://c.cs0.visual.force.com/apex/TestYUIP'} )};


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 YAHOO.force.com.init(); ahead of the render call fixed it.