JQueryLoader

Homepage: http://foswiki.org/Extensions/JQueryPlugin
Author(s): Michael Daum
Version: 4.70

This plugin allows to delay rendering parts of a page that are loaded later on asynchronously and patched into the page.

On this page:

Usage

Add the %JQREQUIRE{"loader"}% macro to the page that you want to use this module on. Then add the jqLoader css class to the div (or verbatim) element which will serve as a container for the content to be loaded. Any jqLoader container requires either an url or a section parameter to specify the location from where to load the content.

Parameter are specified using JQueryMetadata, as in

<div class="jqLoader {key:'value', ....}"></div>

Parameter Description DefaultSorted ascending
section the section within the topic (see VarSTARTSECTION)  
select jQuery selector to extract a specific node from the retrieved data  
effectopts additional options for the selected effect; possible values vary depending on the actual effect being used  
onload a JavaScript function called when the content has been loaded  
beforeload a JavaScript function called before the content is requested  
finished a JavaScript function called when the content has been loaded and displayed on the page  
delay additional time in miliseconds to delay fetching the content from the content; specifying 0 means load the content immediately; any other value will wait that time until issuing the request 0
effectspeed the effect speed in milliseconds used in animated display modes 500
url the full url from where the content, e.g. url:'https://wiki.hwr-berlin.de/foswiki/MyWeb/MyTopic %SCRIPTURLPATH{"view"}/<web>/<topic>
mode specify whether the content is either loaded automatically or by clicking on the container; possible values: auto, manual auto
topic the topic from where to load content current topic
web the web from where to load content current web
effect the effect used when showing the loaded content; possible values are: show, fade, slide, blind, clip, drop, explode, fold, puff, pulsate, highlight fade
placeholder the image to be displayed as long as the content hasn't been loaded
params url parameter that are sent to the server {"skin":"text"}

The jqLoader element is able to receive JavaScript events and process them accordingly. Similarly these events can be used to hook your own callbacks to be processed when they are fired.

Event Description
refresh.jqLoader when triggered will reload the content from the backend
beforeload.jqLoader is triggered before requesting the content from the backend (see beforeload parameter above)
onload.jqLoader is triggered when the content has been successfully been loaded (see onload parameter above)
finished.jqLoader is triggered when content has been loaded and finally been displayed on the page (see finished parameter above)

Examples

%JQREQUIRE{"loader"}%
<div class="jqLoader {section:'recentchanges'}" id="myLoader">
<verbatim>
%STARTSECTION{"recentchanges"}%<!-- -->
%SEARCH{
    "'1'" 
    web="%BASEWEB%" 
    type="query" 
    nonoise="on" 
    order="modified" 
    reverse="on"
    limit="10"
    format="<p class='foswikiSearchResult'>[[$web.$topic]] $date - $rev - $wikiusername</p>"
}%
<!-- -->%ENDSECTION{"recentchanges"}%
</verbatim>
</div>

... if installed:

 
Refresh
Topic revision: r3 - 27 Jul 2017, AdminUser
This site is powered by FoswikiCopyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback