Issue #2762Opened May 9, 2020by lofcz0 reactions

[QUESTION] How to listen to trait value change directly from block add

Question

I'm passing following JSON to editor.BlockManager.add() function to define my block, load it's content from the server and populate select-type trait named defaultCategory in the same manner.
Everything works nice. Now I need to listen to onchange event of that select and execute some JS there. I've consulted https://grapesjs.com/docs/modules/Traits.html#add-traits-to-components but can't fugure out how to do this.

Would you mind to quickly show how would I execute alert('test') when value of my trait is changed (by user selecting one of the options)? Thanks in advance.

{
    label: '<img src="/Uploads/Lanbuilder/articlesRow.png" class="lanbuilderIcon" width="50" height="50"/><div>My block</div>',
    category: c.category,
    attributes: {
      class:'gjs-fonts gjs-f-b4',
      defaultCategory: ''
    },
    content: {
        content: 'AJAX loading content of this block...',
        script: function() {
          moduleCommonFunctions.loadContentToDiv(this.id, '/topic/getTopicRow');
        },
        traits: [
          {
            type: 'select',
            name: 'defaultCategory',
            label: 'Default category',
            options: JSON.parse(categoriesJson)
          }
       ]
    }
  });

image

For the button there is an option we can assign our JS, it would be really usefull to have such event for all built in trait types.

image

Answers (3)

Aiyush-GJune 22, 20200 reactions

Did you solve this issue? If so, how?

SwapnilSoni1999August 22, 20230 reactions

guide please

Vampire-VSeptember 28, 20230 reactions

@lofcz How do you fix this problem?

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.