EditLive! 9 Documentation : getEditableSections Method

Created by Jessica Hardy, last modified by Gavin Douglas on Jul 25, 2012

This function returns an array of ID attributes for each DIV registered with EditLive! as an Inline Editing Section. 

For more information on the Inline Editing functionality for EditLive!, see the Using Inline Editing article.

Syntax

JavaScript
editliveInstance.getEditableSections();

Example

The following code creates a webpage featuring three DIV HTML elements. Each DIV is registered with EditLive! as an inline editing section. The Display Editable Sections button will display the ID attributes for each DIV registered with EditLive! as an inline editing section.

<HTML>
   <HEAD>
      <TITLE>EditLive! JavaScript Example</TITLE>
      <!--Include the EditLive! JavaScript Library-->
      <SCRIPT src="../../redistributables/editlivejava/editlivejava.js" language="JavaScript"/>
      <SCRIPT language="JavaScript">
         function displayEditableSectionDIVIDs(){
            var editableSectionArray = editlive_js.getEditableSections();
 
            for(i = 0; i < editableSectionArray.length; i++) {
               alert("Editable Section DIV ID: " + editableSectionArray[i]);
            }
         }
      </SCRIPT>
   </HEAD>
   <BODY>
      <FORM name = exampleForm>
         <P>Click the section below to edit it's contents.</P>
          <DIV id="div1" style="width: 600px; height: 400px; overflow: auto; border: 1px dotted gray; white-space:normal;">
         </DIV>
         <P>Click the section below to edit it's contents.</P>
          <DIV id="div2" style="width: 600px; height: 400px; overflow: auto; border: 1px dotted gray; white-space:normal;">
         </DIV>
         <P>Click the section below to edit it's contents.</P>
          <DIV id="div3" style="width: 600px; height: 400px; overflow: auto; border: 1px dotted gray; white-space:normal;">
         </DIV>
         <P>Click the following button to display the content for the editable section: <INPUT type="button"
               name="divButton"
               value="Display  Editable Sections"
               onClick="displayEditableSectionDIVIDs();" >
         </P>
      </FORM>
      <SCRIPT language="JavaScript">
         var editlive_js;
         editlive_js = new EditLiveJava("editlive", "100%", "100%");
         editlive_js.setConfigurationFile("../../redistributables/editlivejava/sample_eljconfig.xml");
         editlive_js.addEditableSection('div1');
         editlive_js.addEditableSection('div2');
         editlive_js.addEditableSection('div3');
         </SCRIPT>
   </BODY>
</HTML>

See Also