Transform free text into a valid WikiWord with JQuery

  • Tip Category - Developing Wiki Applications
  • Tip Added By - PaulHarvey - 25 Jan 2010 - 00:00
  • Extensions Used - JQueryPlugin
  • Useful To - Experts
  • Tip Status - New
  • Related Topics -


You need to generate a valid WikiWord topic name from some free text entered by the user.


You have a HTML form that Eg. creates a topic via a POST to the save script. You want to avoid instructing the user to carefully construct a name for the topic they're saving to, instead it would be preferrable to build a valid WikiWord topic name from a different field that they have to enter anyway, Eg. perhaps you have defined a label or title field for your DataForms application.


Use JQueryPlugin's wikiword plugin to "wikify" one of the fields the user has entered some text into, and write that into the topic param before submitting the form.

newtopic Label (descriptive text):

Existing entries:
Label Data
This is a test with some descriptive data Blah blah blah...
Number of topics: 1

The code to do this looks like:


    function () {
        /* Wikified topic name is built from #wordSourceSelector field and saved to #topicFieldSelector
           when the HTML form #formSelector is submitted
        var wikifyOnSubmit = function (formSelector, wordSourceSelector, topicFieldSelector) {
                function () {
                    var wikifiedTopicName;
                    wikifiedTopicName = jQuery.wikiword.wikify(jQuery(wordSourceSelector).val()); 
        wikifyOnSubmit('#Create', '#CreateLabel', '#CreateTopic');

<form id='Create' action='%SCRIPTURLPATH{"edit"}%/%WEB%/'>
%ICON{"newtopic"}% Label (descriptive text): 
<input id="CreateLabel" type="text" name="Label" size="32" /><br/>
<input type="submit" value='Create' />
<input id="CreateTopic" type="hidden" name="topic" />
<input type="hidden" name="onlywikiname" value="on" /> 
<input type="hidden" name="onlynewtopic" value="on" /> 
<input type="hidden" name="formtemplate" value="%TOPIC%Form"/>
<input type="hidden" name="action" value="form"/>
<input type="hidden" name="t" value="%GMTIME{"$epoch"}%"/>
<input id="CreateTopicparent" type="hidden" name="topicparent" value="%BASETOPIC%"/>
<input id="CreateRedirectto" type="hidden" name="redirectto" value="%BASETOPIC%"/>

Known Uses

Known Limitations

This example cheated a little for clarity. Please consider Extensions.SafeWikiPlugin compatibility.

There shouldn't be script elements in the HTML body, and there shouldn't be inline javascript at all. The best way is for the javascript to be placed into an attachment of the topic, and use %ADDTOHEAD% like this:
  text="<script type='text/javascript' src='%PUBURLPATH%/%WEB%/%TOPIC%/mydataform.js'></script>"

Also - JQueryPlugin duplicates an equivalent Foswiki core javascript method foswiki.String.makeWikiWord()

To-do: rewrite using core js feature instead of jquery wikiword plugin

See Also

The real 'best practice' would be to use the built into foswiki code javascript function foswiki.String.makeWikiWord(string). This is the function used in foswiki for the new topic creators and on the registration topics .

-- SvenDowideit - 25 Jan 2010

jquery.wikiword is much more capable than foswikiString as it can combine strings from multiple sources, take care of prefixes and suffixes, properly transliterates common utf8 characters, and attaches to the change event on selected input elements.


New Project



Project topic:

-- MichaelDaum - 08 Feb 2010

Updated above example using the latest JQueryWikiWord

-- MichaelDaum - 07 Nov 2013

BestPracticeTipsForm edit

Category Developing Wiki Applications
Related Topics
Topic revision: r6 - 07 Nov 2013, MichaelDaum
The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. See Copyright Statement. Creative Commons License    Legal Imprint    Privacy Policy