Adding a button with Onclick

Product Support

AI-generated summary

The discussion revolves around adding a button with an onclick event in a Discourse component. Initially, Fausto_Dassenno attempts to use jQuery to attach the event, but it doesn’t work. codinghorror advises that since Discourse is an Ember.js app, Ember rules should be followed, and jQuery might be removed soon.

Fausto_Dassenno then explores creating a component or plugin to achieve this. Ultimately, Fausto_Dassenno shares a solution by creating a widget in the /head section of the component using Ember’s API, which includes a button with an onclick event. The code includes creating multiple widgets, such as a modal button and a banner, using Ember’s createWidget method and Handlebars templates.

1

I am clearly missing something here.
I am trying to add a button and attach an onclick event .

in a component’s HTML I added:

<button id="button_test" class="bottone">Prova</button>

and in the /head I added:

$('#button_test').on('click', moreDetails);
function moreDetails(e){
console.log(`Listening to: ${e.target.value}`);
}

But it’s not triggering anything.

I am this dumb?

F.

2

Remember that Discourse is an Ember.js app so you’ll need to follow Ember rules for JavaScript coding.

I believe jQuery is soon going to be removed entirely from Ember as well, so that $ does not bode well.

3

Thx @codinghorror,

can this be achieved with a component or I need a Plugin?

4

Hi all,

I ended up creating a widget in the /head section of my component and then adding it in the Handlebar template.

let currentLocale = I18n.currentLocale();
I18n.translations[currentLocale].js.custom_modal_title = “My custom modal”;

const showModal = require("discourse/lib/show-modal").default;
const h = require("virtual-dom").h;

api.createWidget("modal-button", {
  tagName: "button.btn.btn-primary",

  html(arg) {
    return arg;
  },

  click(arg) {
      if(arg.target.innerText=="+ Nuovo Wisper") {
        $('#create-topic').click();
      } else if(arg.target.innerText=="Aiuta") {
          window.location.replace("/c/supporto/11");
      } else {
          window.location.replace("/t/invita-amici-a-mywisper/26");
      }
  }
});

api.createWidget("banner", {
  tagName: "div.wrap",
  html() {
    let contents = [];
    contents.push(h("div.hc-column","Più siamo più funziona. Condividi con i tuoi amici, è gratis!"));
    contents.push(h("div.hc-column","Fai login e pubblica la tua richiesta di aiuto"));
    contents.push(h("div.hc-column","Vuoi aiutare? Cerca i Wisper nella tua città"));
    let row1 = h("div.row-cont", contents);
    let h1 = h('div.top-spot',h('h1','myWisper è un luogo dove offrire e cercare aiuto'));
    let inner = [];
    let bottoni = [];
    bottoni.push(h("div.hc-column",this.attach('modal-button','Invita')))
    bottoni.push(h("div.hc-column",this.attach('modal-button','+ Nuovo Wisper')))
    bottoni.push(h("div.hc-column",this.attach('modal-button','Aiuta')))
    let row2 = h("div.row-cont", bottoni);
    inner.push(h1,row1,row2);
    return h("div.hc-banner",inner);
  },
});

api.createWidget("banner_mobile", {
  tagName: "div.wrap",
  html() {
    let h1 = h('div.top-spot',h('h1','myWisper è un luogo dove offrire e chiedere aiuto.'));
    let inner = [];
    let bottoni = [];
    bottoni.push(h("div.hc-column-mobile",this.attach('modal-button','Invita')))
    bottoni.push(h("div.hc-column-mobile",this.attach('modal-button','+ Nuovo Wisper')))
    bottoni.push(h("div.hc-column-mobile",this.attach('modal-button','Aiuta')))
    let row2 = h("div.row-cont", bottoni);
    inner.push(h("h1.mobile-header","myWisper è un luogo dove offrire e chiedere aiuto"));
    inner.push(row2);
    return h("div.hc-banner-mobile",inner);
  },
});
</script>