# Layouts Plugin

**URL:** https://meta.discourse.org/t/layouts-plugin/55208
**Category:** Plugin
**Tags:** pavilion, broken
**Created:** [January 5, 2017, 9:41am UTC](https://meta.discourse.org/t/layouts-plugin/55208 "2017-01-05T09:41:13Z")
**Posts on this page:** 20
**Page:** 3

<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: [March 6, 2017, 1:51pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/41 "2017-03-06T13:51:18Z")

</div>

> [@Pad\_Pors](#):
>
> I used the setting in the category to disable the “Disable discovery list header for selected routes in this category” and "navigation menu " for a category. Now I’m unable to bring them back, since even the admin can’t see the category setting

Yes, I had this problem once too. I’ve added a backup edit category button that will appear if these conditions are met.

[https://github.com/angusmcleod/discourse-layouts/commit/c350bd7f569abf968b331f48cf121cb85a2c93c9](https://github.com/angusmcleod/discourse-layouts/commit/c350bd7f569abf968b331f48cf121cb85a2c93c9)

 ![](https://global.discourse-cdn.com/meta/original/3X/8/8/88b2da8fdf1767d73baf2f39405989f21696f6b0.png)

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [April 4, 2017, 9:06am UTC](https://meta.discourse.org/t/layouts-plugin/55208/42 "2017-04-04T09:06:02Z")

</div>

Hi Angus,

we’ve had a widget showing the top solutions in the right sidebar together installed with the layouts plugin, here:

[https://github.com/Alavi1412/developing-answers](https://github.com/Alavi1412/developing-answers)

It was working fine, until we currently [installed nginx outside docker](https://meta.discourse.org/t/running-other-websites-on-the-same-machine-as-discourse/17247). after that this widget is not being shown in the sidebar anymore!

do you have any clue why that may have happened?

does it have anything to do with https protocol? (our only guess at the moment!)

---

<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: [April 4, 2017, 12:54pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/43 "2017-04-04T12:54:19Z")

</div>

What errors are you seeing in your console and logs?

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [April 4, 2017, 2:07pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/44 "2017-04-04T14:07:30Z")

</div>

no errors in the admin log panel. no errors in browser console either!

---

<div class="post-metadata">

### Author: ![Alavi1412](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alavi1412/32/67721_2.png) [@Alavi1412](https://meta.discourse.org/u/Alavi1412)
#### Post date: [April 5, 2017, 2:18pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/45 "2017-04-05T14:18:30Z")

</div>

Can it be because of the way I used **href** in my code?  
For example I have this code in plugin

```plaintext
contents.push(h("h2.novatitle",[h("a",{attributes:{href:"https://padpors.com/t/نوآوری-جمعی-در-پادپُرس-چه-جوری-کار-میکنه؟/3601#No" ,target: "_blank"}},"راه‌حل‌"),"های نوآوران"]));
           $.ajax({
          url: "https://padpors.com/t/3854.json",
          dataType: 'json',
          async: false,
          success: function(data){
              view2 = data.views;
          }});

```

Can the nginx block a plugin?  
What else can cause [this](http://padpors.com) problem?  
NOTE: We are using **HTTPS**  
NOTE: widgets are working correctly on local

---

<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: [April 6, 2017, 6:17pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/46 "2017-04-06T18:17:31Z")

</div>

You have three issues.

One is that the widget file needs to be the same name as the widget itself. I have submitted PRs to your two widget repos to fix this.

[https://github.com/Alavi1412/developing-answers/pull/1](https://github.com/Alavi1412/developing-answers/pull/1)  
[https://github.com/Alavi1412/developing-answers/pull/1](https://github.com/Alavi1412/developing-answers/pull/1)

The second issue is a [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) issue with some of the assets you’re using. I can’t fix that. You’ll need to update the CORS permissions or change where the assets are hosted.

 ![](https://global.discourse-cdn.com/meta/original/3X/5/b/5b2d5469bfb305c9225322632555d421440664c3.png)

The third issue is a bug in the developing-solution widget when viewing a discovery category route. I have submitted a PR for a temporary fix for the issue. It won’t make the content you want to appear appear, but it will stop the exception from occurring and the widget containers themselves will appear in discovery category routes.

[https://github.com/Alavi1412/developing-answers/pull/2](https://github.com/Alavi1412/developing-answers/pull/2)

 ![](https://global.discourse-cdn.com/meta/original/3X/c/c/cc99e110a66ccf273a62479bac638f591a3b8a8c.png)

Generally you need to look more closely at better use of [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) to handle all the ajax requests you’re making. You need to wait until the ajax request resolves before you can use the requested data, i.e. after the request add `.then(function(data){})`.

Handling ajax requests is a little tricker in a vDom widget, without Ember’s computed properties and observers. In fact there probably shouldn’t be any ajax requests in a vDom widget. Nonetheless, have a look at how I’ve done it in [this widget](https://github.com/angusmcleod/civil-discourse/blob/master/assets/javascripts/discourse/widgets/service-list.js.es6).

---

<div class="post-metadata">

### Author: ![Alavi1412](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alavi1412/32/67721_2.png) [@Alavi1412](https://meta.discourse.org/u/Alavi1412)
#### Post date: [April 8, 2017, 2:15pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/47 "2017-04-08T14:15:35Z")

</div>

> [@angus](#):
>
> .then(function(data){}).

Thank you. But I have a problem with promises.

```plaintext
ajax(`/t/3854.json`).then(function (res) {
              view2 = res.views;
              return ajax(`/t/3766.json`);
            })
            .then(function (res){
                view4 = res.views;
                return ajax(`/t/2568.json`);
            })
            .then(function (res){
                view1 = res.views;
                 contents.push(h("div.solution",[
            h("a.image-sulotion", {attributes: {href: "https://padpors.com/t/%D8%A7%DB%8C%D8%B3%D8%AA%DA%AF%D8%A7%D9%87-%D9%87%D8%A7%DB%8C-%D8%AA%D9%88%D9%84%DB%8C%D8%AF-%D8%A8%DB%8C%D9%88%DA%AF%D8%A7%D8%B2-%D8%A7%D8%B2-%D8%AF%D9%88%D8%B1%D8%B1%DB%8C%D8%B2%D9%87%D8%A7%DB%8C-%D8%BA%D8%B0%D8%A7/2568"}}, h("img", {attributes:{src: "https://padpors.com/uploads/default/original/2X/b/b5242cbc6ca0a76e477a51fc187e47df1b37c85b.jpg"}})),
            h("a.topiclink",{attributes: {href: "https://padpors.com/t/%D8%A7%DB%8C%D8%B3%D8%AA%DA%AF%D8%A7%D9%87-%D9%87%D8%A7%DB%8C-%D8%AA%D9%88%D9%84%DB%8C%D8%AF-%D8%A8%DB%8C%D9%88%DA%AF%D8%A7%D8%B2-%D8%A7%D8%B2-%D8%AF%D9%88%D8%B1%D8%B1%DB%8C%D8%B2%D9%87%D8%A7%DB%8C-%D8%BA%D8%B0%D8%A7/2568"}}, "رآکتور بیوگاز"),
            h("a.novacate", {attributes:{ href: "https://padpors.com/c/nova-foodwaste"}}, "هدر رفت غذا") ,
            h("span", "بازدید:" + view1),
            h("div.level", Discourse.SiteSettings.developing_1)]));

          contents.push(h("div.solution",[
            h("a.image-sulotion", {attributes: {href: "https://padpors.com/t/پیاده-برو،-پاداش-بگیر/3854/16"}}, h("img", {attributes:{src: "https://padpors.com/uploads/default/original/2X/f/ff2f9cb328fc5708c1c2a51b9a3bfce1b6f5765c.jpg"}})),
            h("a.topiclink",{attributes: {href: "https://padpors.com/t/پیاده-برو،-پاداش-بگیر/3854/16"}}, "پیاده برو، پاداش بگیر!"),
            h("a.novacate", {attributes:{ href: "https://padpors.com/c/nova-pollution"}}, "آلودگی هوا") ,
            h("span", "بازدید:" + view2),
            h("div.level", Discourse.SiteSettings.developing_2)]));

          contents.push(h("div.solution",[
            h("a.image-sulotion", {attributes: {href: "https://padpors.com/t/چه-جوری-درختکاری-چریکی-رو-به-نفع-هوای-آلوده-رواج-بدیم؟/3766"}}, h("img", {attributes:{src: "https://padpors.com/uploads/default/original/2X/b/bcde56c436a83f58e6741a792bbc51da33f41673.jpg"}})),
            h("a.topiclink",{attributes: {href: "https://padpors.com/t/چه-جوری-درختکاری-چریکی-رو-به-نفع-هوای-آلوده-رواج-بدیم؟/3766"}}, "درخت کاری چریکی"),
            h("a.novacate", {attributes:{ href: "https://padpors.com/c/nova-pollution"}}, "آلودگی هوا") ,
            h("span", "بازدید:" + view4),
            h("div.level", Discourse.SiteSettings.developing_4)]));

             return h('div.widget-inner', contents);
            });

```

I have this code but it didn’t render anything in my page.  
I also deleted the last main `return h('div.widget-inner', contents)` but nothing happened. just an empty widget.

---

<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: [April 8, 2017, 2:31pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/48 "2017-04-08T14:31:55Z")

</div>

You need to understand the concept before you can implement what you’re attempting.

First, try to get a single promise returning a single result from the server. Stick a `console.log(res)` in the `.then(function{})` to see what is being returned.

Once you get that working, then try to display that single piece of data. Have a look at the widget I linked you to to see how to re-render the widget to display the data.

When you have successfully got a single promise to return data and you have displayed that single piece of data in the widget show me your code and we can work with that.

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [April 13, 2017, 2:11pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/50 "2017-04-13T14:11:02Z")

</div>

A slight issue regarding the plugin:

using the layouts plugin and without any widgets installed I got the blank page in category+tag page:

[https://meta.discourse.org/t/empty-page-when-both-category-and-tag-are-filtered/60585](https://meta.discourse.org/t/empty-page-when-both-category-and-tag-are-filtered/60585)

---

<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: [April 14, 2017, 1:43am UTC](https://meta.discourse.org/t/layouts-plugin/55208/51 "2017-04-14T01:43:20Z")

</div>

Sounds like an issue. Will take a look tomorrow.

---

<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: [April 14, 2017, 1:38pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/52 "2017-04-14T13:38:35Z")

</div>

Give it another try now. The sidebars will show up on all the tags routes now. The settings won’t all work perfectly as the tags routs in Discourse core are different from the other routes. I’ll fix the settings for tags a bit later today.

[https://github.com/angusmcleod/discourse-layouts/commit/f399361492b340d0aeb5a81511fa8392cbff0e95](https://github.com/angusmcleod/discourse-layouts/commit/f399361492b340d0aeb5a81511fa8392cbff0e95)

---

<div class="post-metadata">

### Author: ![Alavi1412](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alavi1412/32/67721_2.png) [@Alavi1412](https://meta.discourse.org/u/Alavi1412)
#### Post date: [April 22, 2017, 1:01pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/53 "2017-04-22T13:01:09Z")

</div>

@angus  
Can I add an attribute to my js widget code for using [this](https://support.cloudflare.com/hc/en-us/articles/200168056-What-does-Rocket-Loader-do-) .  
In html we can simply do:

```plaintext
<script>
</script data-cfasync='true'>

```

but I don’t what should I do here.

---

<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: [April 22, 2017, 2:15pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/54 "2017-04-22T14:15:11Z")

</div>

I don’t think that is relevant to this plugin. If you’re adding scripts to your page `head` you should do it via `Customize / Themes` .

---

<div class="post-metadata">

### Author: ![Alavi1412](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alavi1412/32/67721_2.png) [@Alavi1412](https://meta.discourse.org/u/Alavi1412)
#### Post date: [April 22, 2017, 3:21pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/55 "2017-04-22T15:21:16Z")

</div>

I didn’t mean that.  
I want to add an attribute to my whole widget but I don’t know how

---

<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: [April 23, 2017, 1:48pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/56 "2017-04-23T13:48:22Z")

</div>

Invariably, the answer is to have a look at how other widgets work. [For example](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/widgets/avatar-flair.js.es6#L25).

Spend more time learning how widgets work. It’ll make what you’re trying to do a lot easier.

---

<div class="post-metadata">

### Author: ![Alavi1412](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alavi1412/32/67721_2.png) [@Alavi1412](https://meta.discourse.org/u/Alavi1412)
#### Post date: [April 24, 2017, 3:40pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/57 "2017-04-24T15:40:17Z")

</div>

@angus  
I have written [this](https://gist.github.com/Alavi1412/aa305cc75e2e992f9dc004e9a20f3ff0) widget. This widget will show a list of your bookmarked topics beside you. But I have problem for remove bookmark button. When I press the remove button, It will remove the last Item in my bookmark list.  
The problem is logical because when I press the button, the variable `data` has the value of the last index of the list.  
How can I solve this probelm?  
How can I set a special variable for each button?

---

<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: [April 26, 2017, 12:22pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/58 "2017-04-26T12:22:59Z")

</div>

What is the button meant to do? and what context is the widget meant to appear in? The Discovery list or Topics?

---

<div class="post-metadata">

### Author: ![Ham](https://avatars.discourse-cdn.com/v4/letter/h/ecb155/32.png) [@Ham](https://meta.discourse.org/u/Ham)
#### Post date: [June 8, 2017, 4:01pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/59 "2017-06-08T16:01:51Z")

</div>

Hi. Im just trying this out on my site. I enabled both sidebars on all the pages. On the main page (Latest) it looks fine. On categories is fine. But when I click on Top the topics ( ` <table id="ember2013" class="topic-list ember-view">` ) It runs over into the right sidebar.

Also I tried the widget that @jez made for the custom content however nothing shows up in the right sidebar. Is there a list of widgets people are working on for this? Im looking for a categories widget on the side.

FYI- @jez i forked your widget and made the corrections to get it working. The original name and everything is the same in the code itself. Only changed the name so I didnt get it confused. [GitHub - xavierxxx/custom-html-widget: Widget to include arbitrary html for Discourse · GitHub](https://github.com/xavierxxx/custom-html-widget.git)

---

<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: [June 9, 2017, 3:53am UTC](https://meta.discourse.org/t/layouts-plugin/55208/60 "2017-06-09T03:53:54Z")

</div>

Could you send me a screenshot of it running over? This is what I see when I go to Top topics.

 ![](https://global.discourse-cdn.com/meta/original/3X/d/7/d74258e59e5425225088dfdc55e6efd2efdbbca5.png)

---

<div class="post-metadata">

### Author: ![Ham](https://avatars.discourse-cdn.com/v4/letter/h/ecb155/32.png) [@Ham](https://meta.discourse.org/u/Ham)
#### Post date: [June 9, 2017, 6:34am UTC](https://meta.discourse.org/t/layouts-plugin/55208/61 "2017-06-09T06:34:55Z")

</div>

I was able to fix it.

.topic-list {  
table-layout: fixed !important;  
}

 ![](https://global.discourse-cdn.com/meta/original/3X/f/f/ffaff28b90d7c6ddf9f0e531fc5658fe0e06e99d.JPG)

This is what was throwing over on mine. I’ll send you a pm with how it looked without it.

[Previous page](https://meta.discourse.org/t/layouts-plugin/55208.md?page=2)

[Next page](https://meta.discourse.org/t/layouts-plugin/55208.md?page=4)
