If you are seeing this message it is likely that the master layout is unavailable. Please contact helpdesk and raise a support case.

Accordion

This example shows the expanding and collapsing of hidden information.

The functionality of accordions is accessed by calling AccordionAction(AccordionContainerElement); within the $(document).ready(function () {…});.

AccordionContainerElement is optional (technically it's not optional but you can pass an empty string). In this case AccordionAction will act on any accordion HTML code on the page.

view codeSample HTML code

<div class="fullWidth" id="Accordion1">
    <div class="accordionHeader">
        <span class="icon32 icon-expand32">Expander</span><abbr class="icon32 icon-results32">Accordion
            A</abbr>
        Accordion A
    </div>
    <div class="accordionContent">
        <p>
            Accordion content A here.</p>
    </div>
</div>
<div class="fullWidth" id="Accordion2">
    <div class="accordionHeader">
        <span class="icon32 icon-expand32">Expander</span><abbr class="icon32 icon-results32">Accordion
            B</abbr>
        Accordion B
    </div>
    <div class="accordionContent">
        <p>
            Accordion content B here.</p>
    </div>
</div>

When an accordion is loaded via Ajax AccordionAction(AccordionContainerElement); must be called from within the loaded code.

Alternative layout

In some instances the title information will crowd the accordion header. In these instances the text content should be wrapped in span elements using the sml class.

view codeSample HTML code

<div class="outcomePanel fullWidth" id="Cancelclientcontact">
    <div class="accordionHeader">
        <span class="icon32 icon-expand32">expander</span><abbr class="icon32 icon-taskOutcome8-32">Cancel
            client contact</abbr>
        Cancel client contact
    </div>
    <div class="accordionContent">
        <p>
            Non-proceed form here</p>
    </div>
</div>

view codeSample jQuery code

//call each outcome as requested
$('.outcomeChoice').click(function (){
        
    //identify the specif outcome requested. Hide all panels and show the panel requested
    $('.outcomePanel').slideUp({
	                duration: 467, 
	                easing: 'easeInExpo'});
    $('#' + $(this).attr('rel') + ' .accordionContent').show();
    $('#' + $(this).attr('rel') + ' .accordionHeader span').next('span').removeClass('icon-expand32').addClass('icon-contract32');
    $('#' + $(this).attr('rel')).slideDown({
	                duration: 962, 
	                easing: 'easeInOutQuart'});

});

Hierarchy

The full functionality of this section consists of the following:

Nesting
Sortable
Expand/Collapse levels
Removable candidates
Adding candidates
Display expanded accordion information

1. Expander EditManageCopyAddDeleteItem 1
   Item description (id = 1)
   1. Expander EditManageCopyAddDeleteItem 1.1
      Item description (id = 2)
      1. Expander EditManageCopyAddDeleteItem 1.1.1
         Item description (id = 3)
         1. Office i
         2. Office ii
         3. Office iii
   2. Expander EditManageCopyAddDeleteItem 1.2
      Item description (id = 4)
2. Expander EditManageCopyAddDeleteItem 2
   Item description (id = 5)
3. Expander EditManageCopyAddDeleteItem 3
   Item description (id = 6)
   1. Expander EditManageCopyAddDeleteItem 3.1
      Item description (id = 7)

Nesting

Use nested <ol> elements to create the indented style.

Sortable

Add the class sortable to the parent <ol> which is used to fire the nestedSortable jQuery UI plugin extension the same as used for a non-nested collection; calling $('ol.sortable').nestedSortable({…}); from within $(document).ready(function () {…});.

Expand/collapse levels

Similar to AccordionAction() in functionality, to make nested levels expand and collapse on demand add <var class="icon32 icon-contract32 expander">Expander</var> immediately after the first <span> element in each <li>. This will be picked up by a jQuery call within $(document).ready(function () {…});.

view codeSample jQuery code

//Expand/collapse functionality for nested sortable (hierarchy)
$('.sortable .expander').click(function(){
        
    $(this).parent().nextAll('ol').slideToggle();

    currentClass = $(this).attr('class');

    newClass = currentClass == 'icon32 icon-expand32 expander' ? 'icon32 icon-contract32 expander' : 'icon32 icon-expand32 expander'
            
    $(this).removeClass(currentClass).addClass(newClass);
});

Removable candidates

The final nested <ol> used for the removable candidates requires the class finalLevel added and is displayed at a reduced height with checkboxes.

The checkbox ids are used as the unique identifier for each candidate and contain the class candidateRemoval.

view codeSample HTML code

<ol class="finalLevel">
    <li><span>
        <input class="candidateRemoval" id="1" type="checkbox" />
        <var class="icon16 icon-hand16">
        </var>
        <strong>Office i</strong></span> </li>
    <li><span>
        <input class="candidateRemoval" id="2" type="checkbox" />
        <var class="icon16 icon-hand16">
        </var>
        <strong>Office ii</strong></span> </li>
    <li><span>
        <input class="candidateRemoval" id="3" type="checkbox" />
        <var class="icon16 icon-hand16">
        </var>
        <strong>Office iii</strong></span> </li>
</ol>

Clicking the 'Remove item(s)' button with the id #RemoveCandidatesBtn will fire a click event iterating through all checkboxes with the class candidateRemoval, build a comma separated string ready for posting to a backend method.

view codeSample jQuery code

$('#RemoveCandidatesBtn').click(function(){
        
    //create var to hold checked item array
    var arrToRemove = '';

    //iterate through all cechboxes on page and collect IDs
    $('.candidateRemoval').each(function(){

        //add checked item to array
        if($(this).attr('checked') == true){

            arrToRemove = arrToRemove + $(this).attr('id') +',';
                
        }
            
    });

    //finally, remove any trailing comma
    if(arrToRemove > ''){
            
        arrToRemove = arrToRemove.substring(0, arrToRemove.length - 1)
            
    }

    alert('Array of IDs checked: ' + arrToRemove);
        
});

Adding candidates

Documentation for this feature is within the 'Add candidates' RH tab.

Display expanded accordion information

In the requirement to display more information about a given level add a block element with the class .generalMessage and style="display:none;" (this is assumming the default position is closed).

The toggle is triggered by a click event on an element containing the class showHideContent.

The content of this element can be any HTML you require. This example has accordions with table data.

1. Expander InfoEditManageCopyAddDeleteItem 1
   Item description
   ExpanderAccordion header Internal users

   Role	Name
   Team leader	Andrew Baker-Miles	Assigned
   Account Manager	Matthew Johnson	Inherited
   Pipeline chaser	Andrew Blackmore	Inherited excluded
   Muppet	Greg Williams	Assigned excluded

   ExpanderAccordion header External users

   Role	Name
   Negotiator	Andrew Bright	Assigned
   Fee earner	Basheer Ahmed	Inherited
   Accout contact	Giles Guthrie Britton	Inherited excluded

   1. Expander InfoEditManageCopyAddDeleteItem 1.1
      Item description
      ExpanderAccordion header Accordion header

      Accordion content

      accordion content text

      ExpanderAccordion header Accordion header

      Accordion content

      accordion content text

      ExpanderAccordion header Accordion header

      Accordion content

      accordion content text

view codeSample HTML code

<ol class="sortable">
    <li><span>
        <var class="right">
            <a class="icon32 icon-info32 showHideContent" title="Toggle info">Info</a></var><b>Item 1</b><br />
        Item description</span>
        <div class="generalMessage" style="display: none;">
            ####Expanded element content here####
        </div>
    </li>
</ol>

view codeSample jQuery code

$('.showHideContent').click(function(){
        
    $(this).parent().parent().siblings('.generalMessage').slideToggle();
        
});

Nested choices

The basic UI structure is simple set of nested <ol> elements.

The example below shows items with and without associated items. Where an association already exists, the item checkbox will be unavailable until the associated item is unchecked.

For the jQuery to manipulate the checkbox availability appropriately the checkboxes must have the classes .userParentItem and .userAssoc respectively.

view codeSample HTML code

<ol>
    <li><span>
        <input type="checkbox" disabled="disabled" class="userParentItem" />Item 1 <em>set item A
        <input type="checkbox" class="userAssoc" checked="checked" /></em></span>
    </li>
</ol>

A click event on either of these will fire the appropriate jQuery method.

view codeSample jQuery code

$('.userAssoc').change(function(){
        
    if($(this).attr('checked')){

        $(this).parent().prev('input').attr('disabled','disabled');

    }else{

        $(this).parent().prev('input').removeAttr('disabled');

    }
        
});

$('.userParentItem').change(function(){
        
    if($(this).attr('checked')){

        $(this).next().children('input').attr('disabled','disabled');

    }else{

        $(this).next().children('input').removeAttr('disabled');

    }
        
});

Posting data back to the server

Due to the dynamic nature of nested choices it is impractical to post all rendered checkbox form fields to the server. Instead changes to each checkbox fire a jquery change event and are stored as a key/value pair array to a hidden field with the id #hdnNestedChoices which can be posted back to the server for processing before updating the view.

view codeSample jQuery code

//collect up all the user checking and unchecking ready for posting to the server
$('.userParentItem, .userAssoc').change(function(){
        
    //Get the value of the changed item
    var changedID = $(this).val();
    //get the status of the changed item
    var changedValue;
    if($(this).attr('checked')){
        changedValue = 1;
    }else{
        changedValue = 0;
    }
            
    //update the hidden field
    var hdnArray = $('#hdnNestedChoices').val();
    hdnArray = hdnArray + changedID + ',' + changedValue + '|'; 
    $('#hdnNestedChoices').val(hdnArray);
});

Clicking 'update' fires a jquery click event which checks to see if any changes have been made and if so, tidies the hidden field value ready for posting.

For demonstration purposes the hidden field value is displayed in an alert when 'update' is clicked.

view codeSample jQuery code

//Send the array
$('#btnUpdateChoices').click(function(){
        
    var anythingToSend = $('#hdnNestedChoices').val();
    //has the user made any changes
    if(anythingToSend > ''){
        //Remove the trailing pipe
        anythingToSend = anythingToSend.substring(0, anythingToSend.length - 1);
        alert('String sent to server: ' + anythingToSend);
    }else{
        alert('Nothing to post');
    }
});

Teleportation boxes

This is a system for being able to move several items from one list to another.

The multi-select input elements are placed with a table with the class teleportationBoxes.

<table class="teleportationBoxes">
    <tr>
        <td>
            <div class="editor-label">
                <label for="LenderCompany">
                    Available lender company</label></div>
            <div class="editor-field">
                <select id="TargetItemStart" multiple="multiple" name="LenderCompany">
                    <option value="50">Peter Lending Agency</option>
                    <option value="51">Tom Lending Agency</option>
                    <option value="52">Jones Lending Agency</option>
                </select>
            </div>
        </td>
        <td style="width:32px;">
            <span id="addItem" class="icon32 icon-moveRight32">Add</span> <span id="delItem" class="icon32 icon-moveLeft32">Del</span>
        </td>
        <td>
            <div class="editor-label">
                <label for="LenderCompany">
                    Assoc. lender company</label></div>
            <div class="editor-field">
                <select id="TargetItemEnd" multiple="multiple" name="LenderSupplier">
                    <option value="53">Kim Lenders</option>
                </select>
            </div>
        </td>
    </tr>
</table>

//teleportation boxes add
$('#addItem').click(function() {
    teleportationBoxes('#TargetItemStart', '#TargetItemEnd', '#SelectedTargetItems');
});
//teleportation boxes remove
$('#delItem').click(function() {
    teleportationBoxes('#TargetItemEnd', '#TargetItemStart', '#SelectedTargetItems');
});

Ajax functions

Many MWU sites now use Ajax extensively. In order to simplify re-use of code there are several jQuery functions available to accomodate the types of calls used:

AjaxFormPost
AjaxAction

AjaxFormPost

For submit actions use the AjaxFormPost(selector,target); function call inside the $(document).ready(function () {...});

In this example the form ID is AjaxPostExample and the resulting data is targetted at <div id="AjaxPostResultSample">

view codeSample jQuery code

//Posting a form via jQuery Ajax from the main pane
$('#AjaxPostExample').submit(function(){
    //Pass in "this" (the form as a jQuery object) and the target element
    AjaxFormPost($(this),'#AjaxPostResultSample');
    return false;
});

AjaxAction

For GET actions, including GET actions that require being sent via the POST method (such as actions that amend a db but can be presented to the server via querystring)

Call the AjaxAction(e,selector,target,optional request type,optional final action); function via a jquery submit or click method inside the $(document).ready(function () {...});

Arguments:

e: event object
action: request address
target: element on page assigned to recieve requested address response
requestType: optional string. 'GET' by default can be set to 'POST'
finalAction: optional string. On some pages there may be multiple accordions that need closing. e.g. 'SlideUp' is required if the accordion is to close

In this GET example the hyperlink ID is AjaxGETActionLink and the resulting URL/action result is targetted at <div id="AjaxGETResultSample">

Make sure e has been declared as an argument in the calling event function; such as $('#AjaxGETActionLink').click(function(e){...});

view codeSample jQuery code

//Hyperlink using jQuery Ajax from the main pane
$('#AjaxGETActionLink').click(function(e){
    AjaxAction(e, $(this).attr('href'),'#AjaxGETResultSample');
});

Ajax me a link