Basic Enterprise Application Realm

Basic Enterprise Application Realm Documentation
  • 1 PHP Reference
    • 1.1 Introduction
    • 1.2 shared_lib.php
    • 1.3 ac_tables.php
    • 1.4 ac_email.php
  • 2 Javascript Reference
    • 2.1 Introduction
    • 2.2 ac_ajax
    • 2.3 ac_event
    • 2.4 ac_filter
    • 2.5 ac_menu
    • 2.6 ac_panel
    • 2.7 ac_select
    • 2.8 ac_toc
  • 3 Forms
    • 3.1 Introduction
    • 3.2 How It Works
    • 3.3 AJAX
    • 3.4 form_processor_v2
    • 3.5 form_processor

2.6 ac_panel

March 25th, 2025

Provides features for adding collapsable panels or user controllable repeating elements. This is commonly used for creating forms for hidden advanced options that can be expanded or holding a number of large components on a screen in a minimised state (such as docked panels). Repeatable elements are particularly useful in forms that need to allow a user to add an arbitrary number of sections.

Current version: 2
Dependencies: ac_event_v2.js

2.6.1 Public Properties

Version Type Default Purpose
$fps 2 integer 35 This is the number of frames per second that a collapsable panel should run at when opening and closing. Since the panel being opened might be very large, a high FPS like 35 gives a smooth transition. This value has no effect on dynamic panels (that is, panels where the size is not known or hard coded).

2.6.2 Public Methods

Version Arguments Purpose
createPanel 2 panel ID (string)[, extend height (integer), persistence (boolean)] Registers an HTML element as a collapsable panel (closed by default). If the entend height argument is provided then the panel will open and close as a smooth scrolling animation by the number of pixels specified. When the persistence state is set to true, the panel starts life in the last known state (either opened or closed). This is useful if the page reloads due to a form submission and you want the panel to appear closed or opened as it was last seen by the user. However, persistence has no meaning for pages controlled by AJAX.
createDynamic 2 panel ID (string), repeat limit (integer), namespace (string) Registers a button which triggers the repeatable addition of a section of HTML. The HTML used is generally a hidden portion of HTML and treated as a template. This is commonly used for forms which need the user to be able to arbitrarily add and subtract an arbitrary number of elements. Each time a panel is inserted, all the HTML name and ID attributes are appended with incrementing integers to prevent form name collisions.

2.6.3 HTML Attributes

None. However, hidden HTML <input> elements are used to store the panel state and pass it back to any submitted form. Pay attention to the examples shown below.

2.6.4 Usage Example

Create a smoothly animated panel

Javascript

ac_panel.createPanel('my_panel',500);

HTML

<style>

#my_panel { height: 0px; overflow: hidden; }

</style> <input name="my_panel_trg" type="button" id="my_panel_trg" value="show/hide options"> <div id="my_panel"> <input name="my_panel_show" type="hidden" id="my_panel_show" value="0"> <!-- CONTENTS OF THE PANEL /--> </div>

Note, that this requires additional HTML tags as shown above:

  • A button: This is presented as a HTML <input> element of type button. However, this is not necessarily part of any <form>. This is the trigger for opening and closing the panel and has the ID label "<panel_ID>_trg".
  • A tracker: A hidden HTML <input> element inside the panel itself acts as the tracker between the open and closed states. This must be placed inside a <form> element if you want persistance to work.
Create a simple non-animated panel

Javascript

ac_panel.createPanel('my_panel');

HTML

<style>

#my_panel { height: 0px; overflow: hidden; }

</style> <input name="my_panel_trg" type="button" id="my_panel_trg" value="show/hide options"> <div id="my_panel"> <input name="my_panel_show" type="hidden" id="my_panel_show" value="0"> <!-- CONTENTS OF THE PANEL /--> </div>

This is identical to the animated version but without passing the extend height argument. Note, that this requires additional HTML tags as shown above:

  • A button: This is presented as a HTML <input> element of type button. However, this is not necessarily part of any <form>. This is the trigger for opening and closing the panel and has the ID label "<panel_ID>_trg".
  • A tracker: A hidden HTML <input> element inside the panel itself acts as the tracker between the open and closed states. This must be placed inside a <form> element if you want persistence to work.
Create a dynamic repeating panel that supports up 64 items

Javascript

ac_panel.createDynamic('add_user',63,'register_user');

HTML

<div id="add_user_template" class="hidden"> <p>Name: <input name="name_" type="text" id="name_"></p> <p>Password: <input name="password_" type="text" id="password_"></p> <p> <input type="button" name="add_user_del_trg" id="add_user_del_trg" value="remove"> <input type="button" name="add_user_insert_trg" id="add_user_insert_trg" value="insert"> </p> </div> <form action="register.acx" name="form1" id="form1" target="_self" method="post"> <input type="hidden" name="add_user_max" id="add_user_max" value="0"> <input type="hidden" name="add_user_total" id="add_user_total" value="0"> <p>Name: <input name="name_0" type="text" id="name_0"></p> <p>Password: <input name="password_0" type="text" id="password_0"></p> <p> <input type="button" name="add_user_add_trg" id="add_user_add_trg" value="insert"> </p> <div id="add_user"></div> </form>

Notice that this example has a default element containing a new username and password fields which is not dynamic and part of the form. That is not necessarily required but is common. In this scenario, the static parts in the form have the index suffix of "0". Hidden <input> fields are used to indicate where to start counting from for dynamically inserted panels. In addition, the elements will get prefixed by the supplied namespace which is required when working with AJAX forms. The required HTML elements are:

  • An initial button: To add the first panel, a HTML <input> element if type button is required. The naming convention is "<panel_ID>_add_trg".
  • A current index counter: For ac_panel to know what the current highest index is, a hidden HTML <input> field is required named "<panel_ID>_max". Generally this will be set to "0" but you may have several segments like your panel that are static on the page and want new elements to start counting from a higher number. When the form is submitted, this also tells your PHP how many iterations to search for valid user input elements. This number does not represent the number of elements inserted but the highest index marker. If a user deletes and then re-adds a panel element, this number continues to increment. Therefore, the value could be much higher than the total number of panel elements.
  • A counter of all panel elements: For ac_panel and your PHP to know how many panel elements to expect, a hidden HTML <input> field is required named "<panel_ID>_total".
    The panel template: To insert a dynamic panel, some template is required. This is generally a hidden element and named for the ID of the panel in the Javascript.
  • A button to insert more panels: The template must include a HTML <input> element of type button which can be used to trigger insertion of a new panel element after the current one. The naming convention for this is"<panel_ID>_insert_trg".
  • A button to delete panels: The template must include a HTML <input> element of type button which can be used to trigger deletion of a panel element. The naming convention for this is"<panel_ID>_del_trg".
  • The insert point for panels: The HTML <form> element must contain an area where the panels are to be inserted. Typically, this is an empty <div> tag with the ID of the panel set.
previous: ac_menu next: ac_select