Issue #1157πŸ’¬ AnsweredOpened June 1, 2018by krunal0390 reactions

Return span randomly in custom component

Quick answerby artf

Well from what you've posted I can't tell what is happening but definitely, there is nothing generated randomly, just go deeper with the debug. BTW you can solve this easier by using find(query) method:

Read full answer below ↓

Question

I have custom component and on trait change wanted to updated html but randomly it returned span/textnode in trait change function insted of html element. Below is html generated by component and on title change want to updated h4 element.

updateTitle : function updateTitle() {
                    var title = this.get('title');
                    var linkModel = this.get("components").at(0);
                    if (linkModel) {
                        var titleContainer = linkModel.get("components").at(3);
                        if (titleContainer) {
                            var h4 = titleContainer.get("components").at(0);
                            if (h4) {
                                h4.set("content", title);
                            }
                        }
                        linkModel.attributes.attributes["aria-label"] = title;
                        linkModel.attributes.attributes["title"] = title;
                    }
                    this.set("data-title", title);
                    if (this.get('isCreatePage') && this.changed && this.changed.title) {
                        this.set('isPageCreated', false);
                        this.set('bespokePageUrl', '');
                        this.updateIsCreatePage();
                    }
                }
  • linkModel.get("components").at(0) returns "div.programme-description" correctly
  • linkModel.get("components").at(1) returns "span" not sure from where it is coming
  • linkModel.get("components").at(2) returns "span" not sure from where it is coming
  • linkModel.get("components").at(3) returns "img.programme-content-image" correctly
  • linkModel.get("components").at(4) return "div.programme-play-button-hidden" correctly
  • linkModel.get("components").at(5) return "div.programme-title" correctly

here not sure from where linkModel.get("components").at(1) & linkModel.get("components").at(2) "span" are returned and they are returned randomly so not sure what is happing and due to it h4 title is not updated as index of item changes.

Answers (3)

artfβ€’ June 6, 2018

Well from what you've posted I can't tell what is happening but definitely, there is nothing generated randomly, just go deeper with the debug. BTW you can solve this easier by using find(query) method:

var title = this.get('title');
...
var h4 = this.find('h4')[0]; // returns an array of models
h4 && h4.set("content", title);
...
krunal039β€’ June 7, 2018

@artf I tried to debug but no luck as it is happening on some pages and not on all pages. also

this.find is undefined image

artfβ€’ June 14, 2018

Just update grapesjs

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

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins β†’
Premium option

Premium plugins ship with support, regular updates, and production-ready features β€” save days of integration work.

Browse premium plugins β†’

Related tutorials

In-depth guides on the same topic.

All tutorials β†’

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.