Hi Henrik - I tried this, states are coming fine, and this might look rusty, but where is the Topics object defined?
Regarding the last state, you can use AJAX and the Lithium API to allow a user to give a kudo. Here is a quick example where the "Topic" object contains all the information about the topic (id, kudos count, etc.):
Getting an error in firebug, ReferenceError: Topic is not defined
Posting a snippet of my code below:
<div id="recent_threads_feed_view">
<#assign recent_threads = rest("/categories/id/community-id/topics/recent?restapi.response_style=view&page_size=5").messages>
<#list recent_threads.message as threads>
<div class="thread-feeds-widget">
<div id="thread-feeds">
<ul class="th-feeds" id="feeds-list">
<#assign kudo_status = "anonymous" />
<#if !user.anonymous>
<#assign kudo_status = "disabled" />
<#if rest("/messages/id/${threads.id}/kudos/give/allowed").value == "true" >
<#assign kudo_status = "kudoed" />
<#if rest("/messages/id/${threads.id}/kudos/for/users/self/count").value?number == 0 >
<!-- <div style="background-color:orange; color:#fff;">kudo given</div> -->
<script>
alert("0");
Topic.prototype.like = function () {
alert("1");
var topic = this;
var url = '/restapi/vc/messages/id/' + ${threads.id} + '/kudos/give';
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
alert("2");
} else {
alert("3");
xhr = new ActiveXObject("Microsoft.xhr");
}
xhr.onreadystatechange = function () {
alert("4");
if (xhr.readyState == 4 && xhr.status == 200) {
alert("5");
topic.kudo.count += 1;
topic.kudo.status = "kudoed";
topic.kudo.refreshButton();
}
alert("6");
};
alert("7");
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send();
};
</script>
<#assign kudo_status = "enabled" />
</#if>
</#if>
</#if>