Problem
You need to generate a valid
WikiWord topic name from some free text entered by the user.
Context
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.
Solution
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.
Existing entries:
Number of topics: 1
The code to do this looks like:
%JQREQUIRE{"wikiword"}%
jQuery(document).ready(
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) {
jQuery(formSelector).submit(
function () {
var wikifiedTopicName;
wikifiedTopicName = jQuery.wikiword.wikify(jQuery(wordSourceSelector).val());
jQuery(topicFieldSelector).val(wikifiedTopicName);
}
);
};
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%"/>
</form>
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:
%ADDTOHEAD{"MyDataFormApp"
requires="JQUERYPLUGIN::WIKIWORD"
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.
Example:
--
MichaelDaum - 08 Feb 2010
Updated above example using the latest
JQueryWikiWord
--
MichaelDaum - 07 Nov 2013