This page contains a set of example JQueryPlugin helpers that can be used in
wiki applications. The examples demonstrate how you can
dynamically populate autocomplete enabled input boxes using JQueryUIAutocomplete.
Examples are in two parts; a Client section and a Server section.
The Client section is designed to be included into your topics using
%INCLUDE. The Server section is expanded in
response to an AJAX request from a jQuery plugin.
This page also acts as a library of some commonly-used form inputs. For
example, the Topic selector example can be used
in your own topics to define an HTML form input with the name newtopic
by putting this in your topic:
Note that the examples below are implemented
using base Foswiki functionality. There are a range of plugins, such as
Foswiki:Extensions.RenderPlugin, Foswiki:Extensions.FlexWebListPlugin and
Foswiki:Extensions.DBCachePlugin that can be used to simplify or improve
these sections when building up your own library of input types. Some
examples of the use of these plugins are given at the end of this topic.
Topic selector
Select a topic in the current web. JQueryUIAutocomplete is given a url that
loads the topic section of this topic, which expands to the topic list.
Client section
INCLUDE Parameters
INPUT_NAME: name (and id) of HTML input field
INPUT_VALUE: preselected value
PLACEHOLDER: example value
EXCLUDE: exclude expression to filter out unwanted topics, see the excludetopic parameter in VarSEARCH
Note: there is currently no way to filter a list of webs in the
default Foswiki core. FlexWeblist Plugin is not installed. To use this example you will have to install
Foswiki:Extensions.FlexWebListPlugin.
Note: This example obtains user information with the %USERINFO% macro. If the wiki is configured to hide user details ($Foswiki::cfg{AntiSpam}{HideUserDetails}), then this example will not work unless you are an administrator.
Perform a %QUERY asynchronously (requires Foswiki 1.1
or later).
Client section
INCLUDE Parameters
ID: id of an element to bind an onclick event to
SOURCE: topic to get the field from
QUERY: query to perform
%STARTSECTION{"queryfetcher"}%%ADDTOZONE{"script"
tag="query::js"
requires="JQUERYPLUGIN"
text ="<literal>
<script>
jQuery(function($){
$(\"#%ID%\").click(function() {
$.get(foswiki.getScriptUrl('view', foswiki.getPreference('SYSTEMWEB'), 'JQueryAjaxHelper', {
section: 'query',
source: '%SOURCE%',
query: '%QUERY%',
skin: 'text'
}),
function(data) {
// This is the function that will be executed when the
// data is fetched
alert('%QUERY% is ' + data);
});
});
});
</script></literal>
"}%%ENDSECTION{"queryfetcher"}%
to get the parent of this topic asynchronously (should be 'JQueryPlugin')
Other selectors
Server sections for some other selectors that are common in wiki applications.
Formfield
Fetch a formfield from a topic asynchronously.
Uses FORMFIELD, which is deprecated in Foswiki 1.1. Foswiki 1.1 and later should use QUERYURL Parameters
source: source topic
formfield: name of formfiled to retrieve
Server section
%STARTSECTION{"formfield"}%%FORMFIELD{
"%URLPARAM{"formfield" default="does not exist"}%"
topic="%URLPARAM{"source" default="does not exist"}%"
}%%ENDSECTION{"formfield"}%
User photo
This one returns an <img...> to a user's photo. See the User selector example above.
URL Parameters
Note: there is currently no way to filter a list of webs in the
default Foswiki core. FlexWeblist Plugin is not installed. To use this example you will have to install