Modifying page content with AJAX based on tags

Sometimes you may want the features of a page to change based on the page's tags.  For example I want user's to be able to make identifying badges and colors appear on the page title when they tag it.  This makes it much easier for other users to determine the tags without scrolling to the bottom of the page.  

To do this, you must first add the AJAX plugin and then insert this script into one of your custom HTML regions in the control panel.

<script type=\"text/javascript\">

Deki.$(\"body\"). ready( function() {

var pgid = Deki.PageId;

var siteuri = window.location.protocol + '//' + window.location.hostname;

var pgpath = siteuri + \"/@api/deki/pages/\" + pgid + \"/tags\";

var tags = Array();

Deki.$.ajax({

type: \"GET\",

url: pgpath,

async: false,

dataType: \"xml\",

success: function(xml) {

Deki.$(\"tag\", xml).each( function(){

tags.push(Deki.$(this).attr(\"value\"));

});

chckTags(tags);

chckTagsimg(tags);

}

});

});

function chckTags(tags) {

var bg = Array();

bg['Color1']=\"#FFC0CB\";

bg['Color2']=\"#FFFF99\";

bg['Color3']=\"#99FF66\";

bg['Color4']=\"#99CCFF\";

bg['Color5']=\"#CDC9C9\";

for (i=0;i<tags.length;i++){

if (bg[tags[i]]) {

clearBg();

var bgcolor = bg[tags[i]];

Deki.$(\"#title\").css(\"background-color\",bgcolor);

}

}

}

function clearBg() {

Deki.$(\".global\").css(\"background-image\",\"none\");

Deki.$(\"body\").css(\"background-image\",\"none\");

}

function chckTagsimg(tags) {

var img = Array();

img['Image1']=\"/pick/an/image.jpg\";

img['Image2']=\"/pick/an/image.jpg\";

img['Image3']=\"/pick/an/image.jpg\";

img['Image4']=\"/pick/an/image.jpg\";

img['Image5']=\"/pick/an/image.jpg\";

for (i=0;i<tags.length;i++){

if (img[tags[i]]) {

var theimg = img[tags[i]];

Deki.$(\"#title\").append(\"<img width='26' height='26' alt='\"+tags[i]+\"' id='\"+tags[i]+\"' src='\"+theimg+\"'/>\");

}

}

}

</script>

You can use any JQuery function you want, I've just given two examples, but the fundamental principles remain the same.