# Custom menu with an AJAX call

**URL:** https://meta.discourse.org/t/custom-menu-with-an-ajax-call/76267
**Category:** Development
**Created:** [12월 17, 2017, 5:49오후 UTC](https://meta.discourse.org/t/custom-menu-with-an-ajax-call/76267 "2017-12-17T17:49:00Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Happy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/happy/32/84237_2.png) [@Happy](https://meta.discourse.org/u/Happy)
#### Post date: [12월 17, 2017, 5:49오후 UTC](https://meta.discourse.org/t/custom-menu-with-an-ajax-call/76267/1 "2017-12-17T17:49:00Z")

</div>

Hello,

I set up a forum and I would like to have the same menu as the site on the forum. So for that, I have a route that returns the menu.

I see two solutions: make an ajax call and append the result in the dom or create a plugin to customize the header.

The first solution is easy to set up but I would like to know how to create a plugin with an ajax call.  
I managed to create the widget but I did’nt succed to make an ajax call .

Is that possible ?

Thanks,  
Happy

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [12월 17, 2017, 6:21오후 UTC](https://meta.discourse.org/t/custom-menu-with-an-ajax-call/76267/2 "2017-12-17T18:21:14Z")

</div>

The best way to get help is to show code 😉

---

<div class="post-metadata">

### Author: ![Happy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/happy/32/84237_2.png) [@Happy](https://meta.discourse.org/u/Happy)
#### Post date: [12월 18, 2017, 3:24오후 UTC](https://meta.discourse.org/t/custom-menu-with-an-ajax-call/76267/3 "2017-12-18T15:24:38Z")

</div>

You’re right 🙂

Here’s the code I have a mistake with.

```
export default createWidget('discourse-custom-header', {
    tagName: 'div',

    html() {
        return $.when($.ajax({
            url: 'http://www.example.com/menu',
            async: false
        })).then(result => {
            return [
                h('div', [
                    new RawHtml({ html: `${result}` })
                ])
            ];
        });
    }
});

```

I get this warning

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check [https://xhr.spec.whatwg.org/](https://xhr.spec.whatwg.org/).

and this error

```
Error: Unexpected virtual child passed to h().
Expected a VNode / Vthunk / VWidget / string but:
got:
{}.
The parent vnode is:
{
    "tagName": "DIV",
    "properties": {
        "attributes": {},
        "className": "custom-menu"
    }
}

```

---

<div class="post-metadata">

### Author: ![notriddle](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/notriddle/32/133055_2.png) [@notriddle](https://meta.discourse.org/u/notriddle)
#### Post date: [12월 19, 2017, 6:22오후 UTC](https://meta.discourse.org/t/custom-menu-with-an-ajax-call/76267/4 "2017-12-19T18:22:17Z")

</div>

> [@Happy](#):
>
> ```
> async: false
> 
> ```

Why isn’t it `async: true`?

---

<div class="post-metadata">

### Author: ![Happy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/happy/32/84237_2.png) [@Happy](https://meta.discourse.org/u/Happy)
#### Post date: [12월 20, 2017, 8:14오전 UTC](https://meta.discourse.org/t/custom-menu-with-an-ajax-call/76267/5 "2017-12-20T08:14:16Z")

</div>

Even with the async option to true, i have the same error. I don’t think the async option is the real problem here, but maybe i’m wrong.