Issue #493Opened November 8, 2017by bungambohlah0 reactions

[QUESTION] Can i set content dynamically from block API ?

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, 20170 reactions

You can update the block's content in this way

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

Oh i see , thank a lot @artf

bungambohlahNovember 10, 20170 reactions

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

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.