# Decorate topic list with jquery?

**URL:** <https://meta.discourse.org/t/decorate-topic-list-with-jquery/53931>\
**Category:** Development\
**Created:** [December 7, 2016, 5:09pm UTC](https://meta.discourse.org/t/decorate-topic-list-with-jquery/53931 "2016-12-07T17:09:55Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![jgujgu](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jgujgu/32/64012_2.png) [@jgujgu](https://meta.discourse.org/u/jgujgu)\
**Post date:** [December 7, 2016, 5:09pm UTC](https://meta.discourse.org/t/decorate-topic-list-with-jquery/53931/1 "2016-12-07T17:09:55Z")

</div>

I understand that there is a way to decorate posts after cooking with `api.decorateCooked()`. Is there a similar method for decorating topic list items or the topic list?

---

<div class="post-metadata">

**Author:** ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)\
**Post date:** [December 7, 2016, 8:59pm UTC](https://meta.discourse.org/t/decorate-topic-list-with-jquery/53931/2 "2016-12-07T20:59:12Z")

</div>

What are you trying to achieve?

---

<div class="post-metadata">

**Author:** ![jgujgu](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jgujgu/32/64012_2.png) [@jgujgu](https://meta.discourse.org/u/jgujgu)\
**Post date:** [December 7, 2016, 9:21pm UTC](https://meta.discourse.org/t/decorate-topic-list-with-jquery/53931/3 "2016-12-07T21:21:05Z")

</div>

I’m making a plugin that incidentally interacts with [https://meta.discourse.org/t/topic-list-previews/41630](https://meta.discourse.org/t/topic-list-previews/41630).

My end goal is to display these [http://bl.ocks.org/](http://bl.ocks.org/) in a post (which I have working), but I also want to display the thumbnail in the `topic-item`. I overrode `ExcerptParser.rb` methods to allow my custom tag to go through (akin to the `spoiler` class attribute on `div` and `span`). My hope is to grab the data within the allowed `span` tag and render the thumbnail after it uses this data to make an ajax request.

---

<div class="post-metadata">

**Author:** ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)\
**Post date:** [December 7, 2016, 9:26pm UTC](https://meta.discourse.org/t/decorate-topic-list-with-jquery/53931/4 "2016-12-07T21:26:38Z")

</div>

> [@jgujgu](#):
>
> My hope is to grab the data within the allowed span tag and render the thumbnail after it uses this data to make an ajax request.

Could you break this down a bit more into discrete steps? I assume you’ve looked at how TLP creates and uses thumbnails in the topic list?

---

<div class="post-metadata">

**Author:** ![jgujgu](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jgujgu/32/64012_2.png) [@jgujgu](https://meta.discourse.org/u/jgujgu)\
**Post date:** [December 7, 2016, 9:37pm UTC](https://meta.discourse.org/t/decorate-topic-list-with-jquery/53931/5 "2016-12-07T21:37:28Z")

</div>

Yes I have indeed looked over the TLP code. Unfortunately, particular to how I render the blocks (for example [Choropleth · GitHub](http://bl.ocks.org/mbostock/4060606)), the only `cooked` data that resides in the database is an html tag,

```html
<div class="gist" data-user="mbostock" data-gist="4060606"></div>

```

For decorating posts, I’m currently using jquery to find the `.gist` class, `get()` the gist data according to the `user` and `gist`, then render the iframe.

For excerpts, I was hoping to use a similar method, using the untouched `div` in the excerpt to get the data necessary to find the thumbnail on github.

---

<div class="post-metadata">

**Author:** ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)\
**Post date:** [December 7, 2016, 10:37pm UTC](https://meta.discourse.org/t/decorate-topic-list-with-jquery/53931/6 "2016-12-07T22:37:02Z")

</div>

I reckon the best way to achieve what you’re trying to do is add a method that listens for the post created event on the server. See a similar method in my ratings plugin [here](https://github.com/angusmcleod/discourse-ratings/blob/master/plugin.rb#L113).

In this method you should

1. Parse the cooked html for what you need.

2. Use the parsed content to get your data.

3. Save the response to a custom field.

Then you’ll add a new method to the topic list item serializer that gets your saved data from the custom field.

Then you just need to render the serialized data in the topic list item using one of the plugin outlets.

I would avoid making an ajax request on the client if possible.

---

<div class="post-metadata">

**Author:** ![jgujgu](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jgujgu/32/64012_2.png) [@jgujgu](https://meta.discourse.org/u/jgujgu)\
**Post date:** [December 8, 2016, 12:42am UTC](https://meta.discourse.org/t/decorate-topic-list-with-jquery/53931/7 "2016-12-08T00:42:12Z")

</div>

Your suggestion is quite excellent. I will use your approach when parsing for the thumbnail info.

I will admit, using `ajax` in contexts like this is a janky work around. 😅