JQueryAjaxHelper

On this page:

This is a set of simple helper applications that can be used in ajax wiki applications, i.e. to fetch properties of dynamically populate jquery.autocomplete enabled input boxes.

Form library

Topic selector

Parameters

Implementation 

%STARTSECTION{"topicselector"}%<!-- topicselector  -->
<input type="text" class="foswikiInputField" name="%INPUT_NAME%" id="%INPUT_NAME%" autocomplete="%SCRIPTURL{"view"}%/%SYSTEMWEB%/JQueryAjaxHelper?section=topic;contenttype=text/plain;skin=text;baseweb=%BASEWEB%;%IF{"defined EXCLUDE" then="exclude=%EXCLUDE%"}%" size="60" value="%IF{"defined INPUT_VALUE" then="%INPUT_VALUE%"}%" />
<!-- //topicselector -->%ENDSECTION{"topicselector"}%

Test

Select a topic:

Web selector

Parameters

Implementation 

%STARTSECTION{"webselector"}%<!-- webselector  -->
<input type="text" class="foswikiInputField {matchCase:true}" name="%INPUT_NAME%" id="%INPUT_NAME%" autocomplete="%SCRIPTURL{"view"}%/%SYSTEMWEB%/JQueryAjaxHelper?section=web;contenttype=text/plain;skin=text;%IF{"defined EXCLUDE" then="exclude=%EXCLUDE%"}%" size="60" value="%IF{"defined INPUT_VALUE" then="%INPUT_VALUE%"}%" />
<!-- //webselector -->%ENDSECTION{"webselector"}%

Test

Select a web:

Jump box

Parameters

Implementattion 

%STARTSECTION{"jumpbox"}%<!-- jumpbox -->
<input type="text" class="foswikiInputField" name="%IF{"defined INPUT_NAME" then="%INPUT_NAME%" else="jumpbox"}%" id="%IF{"defined INPUT_NAME" then="%INPUT_NAME%" else="jumpbox"}%" autocomplete="off" size="60" />
<script type="text/javascript">
(function($){
  $(function(){
    $("#%IF{"defined INPUT_NAME" then="%INPUT_NAME%" else="jumpbox"}%").autocomplete(
      "%SCRIPTURL{"view"}%/%SYSTEMWEB%/JQueryAjaxHelper?section=topic;contenttype=text/plain;skin=text;%IF{"'%GLOBAL%' = 'on'" then="baseweb=all;format=$web/$topic" else="baseweb=%BASEWEB%;format=$topic"}%"
    ).result(function(event, item) {
      window.location.href="%SCRIPTURLPATH{"view"}%/%IF{"'%GLOBAL%' != 'on'" then="%BASEWEB%/"}%"+item;
    });
  });
})(jQuery);
</script>
<!-- //jumpbox -->%ENDSECTION{"jumpbox"}%

Test

Local Jump:

Global Jump:

User selector

Parameters

Implementation 

%STARTSECTION{"userselector"}%<!-- userselector -->
<input type="text" class="foswikiInputField" name="%INPUT_NAME%" id="%INPUT_NAME%" autocomplete="off" size="60" value="%IF{"defined INPUT_VALUE" then="%INPUT_VALUE%"}%" />
<script type="text/javascript">
(function($){
  $(function(){
    $("#%INPUT_NAME%").autocomplete(
      "%SCRIPTURL{"view"}%/%SYSTEMWEB%/JQueryAjaxHelper?section=user_fast;contenttype=text/plain;skin=text",
      {
        autoFill:false,
        selectFirst:false,
        scrollHeight:250,
        %IF{"not isempty MULTIPLE" then="multiple: true," else="/* single select */"}%
        formatItem: function(row, index, max, search) {
          return "<table width='100%'><tr><td width='60px'><img width='50' src='"+row[2]+"' /></td><td>"+row[0]+"<br />"+row[1]+"</td></tr></table>";
        }
      }
    );
  });
})(jQuery);
</script>
<!-- //userselector -->%ENDSECTION{"userselector"}%

Test

Find user:

Autocomplete backends

These are best called using a view url of the following format 
%SCRIPTURLPATH{"view"}%/%SYSTEMWEB%/JQueryAjaxHelper?contenttype=text/plain;skin=text;section=<backend>;<parameters>

You could also make use of Foswiki:Extensions/RenderPlugin to implement any of the below backends in a more flexible way. Note, that jquery.autocomplete will always add a q url param to the end of this string.

Topic selector

Url parameters

Implementation 

%STARTSECTION{"topic"}%%SEARCH{
  "^%URLPARAM{"q" default="does not exist"}%.*"
  type="regex"
  scope="topic"
  format="<nop>%URLPARAM{"format" default="$topic"}%"
  separator="$n"
  limit="%URLPARAM{"limit" default="10"}%"
  nonoise="on"
  excludetopic="%URLPARAM{"exclude"}%"
  web="%URLPARAM{"baseweb" default="%BASEWEB%"}%"
}%%ENDSECTION{"topic"}%

Web selector

Needs Foswik:Extensions/FlexWebListPlugin

Url parameters

Implementation 

%STARTSECTION{"web"}%%FLEXWEBLIST{
  include="%URLPARAM{"q" default="does not exist"}%.*"
  exclude="%URLPARAM{"exclude"}%"
  limit="%URLPARAM{"limit" default="10"}%"
  format="<nop>$web"
  separator="$n"
  subheader="$n"
}%%ENDSECTION{"web"}%

User and Group selector

Url parameters

Implementation (SEARCH-based) 

%STARTSECTION{"user"}%%SEARCH{
   "^%URLPARAM{"q" default="does not exist"}%.*"
   type="regex"
   scope="topic"
   format="$percntUSERINFO{\"$topic\" format=\"<nop>$dollarwikiname|$dollaremails|$percntFORMFIELD{\"Photo\" topic=\"$web.$topic\" default=\"%PUBURLPATH%/%SYSTEMWEB%/JQueryPlugin/plugins/ifixpng/images/pixel.gif\" alttext=\"%PUBURLPATH%/%SYSTEMWEB%/JQueryPlugin/plugins/ifixpng/images/pixel.gif\"}$percnt$n\"}$percnt"
   separator=""
   limit="%URLPARAM{"limit" default="10"}%"
   nonoise="on"
   web="%USERSWEB%"
}%%ENDSECTION{"user"}%

Implementation (DBQUERY-based) 

%STARTSECTION{"user_fast"}%%DBQUERY{
   "uc(topic) =~ uc('^%URLPARAM{"q" default="does not exist"}%')"
   format="$percntUSERINFO{\"$topic\" format=\"<nop>$dollarwikiname|$dollaremails|$expand(Photo or '%PUBURLPATH%/%SYSTEMWEB%/JQueryPlugin/plugins/ifixpng/images/pixel.gif')$n\"}$percnt"
   separator=""
   limit="%URLPARAM{"limit" default="10"}%"
   web="%USERSWEB%"
}%%ENDSECTION{"user_fast"}%

Misc

Formfield

Fetch a formfield from a topic asynchronously.

Url parameters

Implementation 

%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

Implementation 

%STARTSECTION{"userphoto"}%<img src='%FORMFIELD{"Photo" topic="%USERINFO{"%URLPARAM{"name" default="does not exist"}%" format="$wikiusername"}%" default="%PUBURLPATH%/%SYSTEMWEB%/JQueryPlugin/plugins/ifixpng/images/pixel.gif" alttext="%PUBURLPATH%/%SYSTEMWEB%/JQueryPlugin/plugins/ifixpng/images/pixel.gif"}%' alt='%URLPARAM{"name"}%' height='%URLPARAM{"height" default="50"}%' />%ENDSECTION{"userphoto"}%
spacer