<ajax:delayedload>
AJAX
ajax:delayedload
DESCRIPTION
ATTRIBUTES
id
placeholder
placeholderSkeleton
placeholderSkeletonWidth
test
EXAMPLES
Currency Feed
Sleep
ajax:event ajax:navigation ajax:region
Data
data:calendar data:column data:eventrepeater data:postrepeater data:productbrandrepeater data:productcategoryrepeater data:productrepeater data:repeater data:table data:template data:tree
Forms
forms:address forms:captcha forms:checkbox forms:checkboxgroup forms:codeeditor forms:combobox forms:datepicker forms:dialogbox forms:editbox forms:fileupload forms:form forms:hidden forms:money forms:officeuseregion forms:option forms:password forms:paymentmethod forms:radiobutton forms:radiobuttongroup forms:row forms:searchbox forms:signature forms:slider forms:spinbox forms:submitbutton forms:submitimage forms:submitlink forms:successcontent forms:textarea forms:timepicker
Layout
layout:divider layout:gallery layout:productgallery layout:rotator layout:stepper layout:stepperpanel layout:tablist layout:tablistitem
Logic
logic:dependency logic:else logic:if logic:include logic:parse logic:variable
Navigation
navigation:breadcrumbs navigation:item navigation:primary navigation:secondary
Personalisation
personalisation:firstname personalisation:fullname personalisation:lastname personalisation:other
Standard
standard:embed standard:icon standard:image standard:link standard:script standard:tooltip standard:video
Templates
templates:button templates:card templates:column templates:fancybox templates:faq templates:flexlayout templates:header templates:row templates:section templates:styles templates:teammember templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
Third Party
thirdparty:googlemap thirdparty:googlemapmarker

`<ajax:delayedload>` </...>

Delayed load regions can improve the server processing time of a page.

It works by ignoring the contents of this tag in the initial page load.
The contents are then loaded via a second AJAX request after everything else.

The main use case is to make secure server-side API requests without affecting performance.
For instance: loading data from an external feed, then presenting it in a repeater.

The AJAX request and this library's code makes the total download size of your page larger, so use of this control is recommended only to defer server processing time.

Content

any
The content to load later.

Attributes

- `id`
string
(Required) Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).
- `placeholder`
string
Text to display while loading.
- `placeholderSkeleton`
bool
Display an animated skeleton line while loading.
- `placeholderSkeletonWidth`
string
Width of the skeleton line ("50%", "200px").
Defaults to 100%.
- `test`
bool
Only delays the load if the test evaluates to false.

Can be used with Caching to prevent delaying loads when a cache exists.
Eg: test="[? \Framework\Caching::isCached('xyz') ?]"

Examples

Currency Feed

Pulls a JSON currency feed and displays the results

HTML:

 <h3>Live Currency Rates Will Appear Below</h3> <ajax:delayedload id="delayedload_region"> <data:table datasource="downloadRates()" as="rate" emptymessage="Could not download rates"> <data:column heading="Currency"> [? $rate['code'] ?] </data:column> <data:column heading="Rate"> [? round($rate['rate'], 2) ?] </data:column> </data:table> </ajax:delayedload> <p><a href="#" onclick="window.location.reload(); return false;">Refresh example.</a></p>

PHP:

 <?php function downloadRates() { $sJSON = @makeHTTPRequest('http://www.floatrates.com/daily/usd.json'); if (!$sJSON) return []; $arrJSON = @json_decode($sJSON, true); return $arrJSON ?? []; } ?>

Run Example

Sleep

Demonstrates a long running operation through calling PHP's sleep() function.

HTML:

 <p>This content loads first.</p> <ajax:delayedload id="delayedload_region"> <div> [? someLongRunningProcess() ?] <p>Before this content which took 3 seconds to process on the server.</p> </div> </ajax:delayedload> <p>This content also loads first.</p> <p><a href="#" onclick="window.location.reload(); return false;">Refresh example.</a></p>

PHP:

 <?php function someLongRunningProcess() { sleep(3); } ?>

Run Example