Custom menu with an AJAX call

Development

AI-generated summary

A user, Happy, wants to create a custom menu with an AJAX call in Discourse. They have two solutions: making an AJAX call and appending the result to the DOM, or creating a plugin to customize the header. Happy prefers the second solution but is struggling to make an AJAX call within a plugin.

Happy shared their code, which uses $.ajax with async: false and is receiving a deprecation warning. Additionally, they are getting an error stating “Unexpected virtual child passed to h().”

joffreyjaffeux suggested that Happy share their code, and notriddle pointed out that async: false might be the issue, recommending async: true instead. However, Happy reported that changing to async: true did not resolve the error.

1

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

2

The best way to get help is to show code :wink:

3

You’re right :slight_smile:

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/.

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"
    }
}
4

Why isn’t it async: true?

5

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.