Issue #493💬 AnsweredOpened November 8, 2017by bungambohlah0 reactions

Can i set content dynamically from block API ?

快速解答by artf

You can update the block's content in this way

Read full answer below ↓

Question

Hi @artf , very great web builder framework and keep it up :+1:

code :

...
blockManager.add('dynamic-nav', {
  label: 'Dynamic Navigation',
  attributes: {
    class: 'fa fa-ellipsis-h',
    title: 'Insert Dynamic Menu of Navigation'
  },
  category: 'Section',
  content: `<ul class="hide-on-med-and-down" data-gjs-type="navigation" data-section-type="navigation">
              <li>
                <a href="page1.html">Page 1</a>
              </li>
              <li>
                <a href="page2.html">Page 2</a>
              </li>
              <li>
                <a href="page3.html">Page 3</a>
              </li>
                ...
            </ul>`,
});
...

As you can see, can i make <li> tag dynamically from my backend? i use EJS template for my view render engine and can passing data to ejs.

Thank you very much and have a nice day

Answers (3)

artfNovember 8, 2017

You can update the block's content in this way

const dblock = blockManager.get('dynamic-nav');
dblock.set('content', `<ul>...`);
bungambohlahNovember 9, 2017

Oh i see , thank a lot @artf

bungambohlahNovember 10, 2017

Hi, @artf I have a problem, my dynamic-nav's block works now, but when I give some script to that component its give me an error Unexpected identifier. May I correct? if not please correct me, thank you very much

That's my script :

...
          // Dynamic navigation
          blockManager.add('dynamic-nav', {
            label: 'Dynamic Navigation',
            attributes: {
              class: 'fa fa-ellipsis-h',
              title: 'Insert Dynamic Menu of Navigation'
            },
            category: 'Section',
            content: {
              script: function () {
                var contentDynamic = "";
                var xhr = new XMLHttpRequest();

                contentDynamic += `<div id="dynamic-nav-wrapper" class="nav-wrapper" data-section-type="dynamic-menu-nav">
                <a href="index.html" class="brand-logo"><img src="images/logo.png"></a>
                <a href="index.html" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
                <ul id="dynamic-page" class="right hide-on-med-and-down">`;

                xhr.onreadystatechange = function() {
                  if (xhr.readyState == XMLHttpRequest.DONE) {
                    var pages = "";
                    pages = JSON.parse(xhr.responseText);
                    for (var i = 0; i < pages.length; ++i) {
                      console.log(pages[i]);
                      if (pages[i].uuid == "<%= page.uuid %>") {
                        contentDynamic += `<li class="current"><a href="${pages[i].url}">${pages[i].menu_name}</a></li>`;
                      } else {
                        contentDynamic += `<li><a href="${pages[i].url}">${pages[i].menu_name}</a></li>`;
                      }
                    }
                  }
                }
                xhr.open('GET', '/dev/editor/dynamicnav', true);
                xhr.send(null);
                contentDynamic += `</ul></div>`;

                this.innerHTML(contentDynamic);

                console.log('the element', this);
              },
            }
          });
...

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.