2 Replies Latest reply: Jan 25, 2008 1:14 AM by jefbak RSS

    How do I place external content in a Collapsible Panel

    jefbak Community Member
      I figured out how to add a tooltip to a collapsible panel today, but I am having trouble getting content to load in the content portion of the panel from another HTML file.
      I have created a loader.gif animation that I would also like to appear in the content panel while the content is loading.

      This, like the tooltips, is way above my skill level and any help would be appreciated. I am starting from using Spry 1.6's built in features in Dreamweaver CS3 and trying to expand on them with help using the other spry js found here in the Labs.

      Link to collapsible panel page I am working on

      Currently I have all the content panel text in panels. I would like to copy the content to another file so it can load only when the panel tab is opened.
        • 1. How do I place external content in a Collapsible Panel
          Arnout Kazemier Community Member
          Check out this example.

          http://labs.adobe.com/technologies/spry/samples/utils/update_content.html

          its about updateContent which allows u to place content in your div.

          U could create a little function for it to load content in your divs.

          Example of load indicator + function setup:
          the indicator div

          <div id="indicatorMessageBoxId"><img scr="imagehere.gif" /> Please wait loading content </div>


          The function (place in <script> tags and place it in header (dont forget to include SpryData.js)

          function updateContent(ele,url){
          //U call this by using the command: updateContent('ID_toLoad_contentIn',url_of_new_content');
          document.getElementById('indicatorMessageBoxId').style.display = ""; //this will show the indicator loadimage box
          Spry.Utils.updateContent(ele, url, function() {
          document.getElementById('indicatorMessageBoxId').style.display = "none"; }); //this will hide the box when loading file is done
          });
          }

          u can attach this function on your collapspannel by adding a onclick="updateContent('myId','data/page.html');" to the element.

          Hope this helps :)
          • 2. Re: How do I place external content in a Collapsible Panel
            jefbak Community Member
            Thanks V1, always an honor to get an answer from you.