jQCloud gone bad (jQuery Tag Cloud plugin in XPages)

I had the idea to make a custom control to make the display of a categorized view more attractive. Quickly you come to tag clouds. While the extension library has an easy to use tagcloud control you probably want to have a result that looks more like this:

jQCloud is a JQuery based plugin that does a bit of the trick for you. Unfortunately it seems the link option can not handle question mark parameters so an .xsp?filter= link does not work. This makes the plugin little of interest. Nevertheless here is my progress so far:

<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=”http://www.ibm.com/xsp/core”&gt;
<xp:this.beforePageLoad><![CDATA[#{javascript:var v:NotesView = database.getView(“country”);
v.setAutoUpdate(false);
var nav:NotesViewNavigator = v.createViewNav();
var entry:NotesViewEntry = nav.getFirst();
var data:String = “”;
while (entry != null && !entry.isTotal()) {
if (entry.isCategory()){
var cat = entry.getColumnValues().firstElement().toString();
var num = entry.getChildCount().toFixed();
//var link = “, link: ‘./jQueryCloud.nsf/country.xsp?cat=” + cat + “‘”;
var link = “, link: ‘./CountryFiltered.xsp'”
var data = data + “{text: ‘” + cat + “‘, weight: ” + num + link +”},”;
}
var tmpentry:NotesViewEntry = nav.getNext();
entry.recycle();
entry = tmpentry;
}
viewScope.put(“categories”,@LeftBack(data,”,”));

}]]></xp:this.beforePageLoad>
<head>
<title>jQCloud Example</title>
<link rel=”stylesheet” type=”text/css” href=”jqcloud.css” />
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”></script&gt;
<script type=”text/javascript” src=”jqcloud-1.0.3.js”></script>
<script type=”text/javascript”>
/*!
* Create an array of word objects, each representing a word in the cloud
*/
var word_array = [
{text: “Lorem”, weight: 150},
{text: “Ipsum”, weight: 90, link: “http://jquery.com/&#8221;},
{text: “Dolor”, weight: 60, html: {title: “I can haz any html attribute”}},
{text: “Sit”, weight: 7},
{text: “Amet”, weight: 5}
// …as many words as you want
]

</script>
</head>
<div id=”example” style=”width: 550px; height: 350px;”></div>
<xp:eventHandler event=”onClientLoad” submit=”false”>
<xp:this.script><![CDATA[var viewData = “”;
var viewData = viewData + “#{javascript:@Text(viewScope.get(“categories”).toString())}”;

var myStr = “var word_array = [” + viewData + “];”;

var p = eval(myStr);

$(function() {
// When DOM is ready, select the container element and call the jQCloud method, passing the array of words as the first argument.
$(“#example”).jQCloud(word_array);
});]]></xp:this.script>
</xp:eventHandler></xp:view>

Job Wanted

Looking for a creative brain? Choose me!

job-wanted

Advertisements

2 thoughts on “jQCloud gone bad (jQuery Tag Cloud plugin in XPages)

  1. brockness 2016-March-3 / 9:05 pm

    maybe url encode your url strings?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s