[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)
You can update the block's content in this way
const dblock = blockManager.get('dynamic-nav');
dblock.set('content', `<ul>...`);
Oh i see , thank a lot @artf
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.
Issue #511
Cannot edit the content after update it via block manager API
Hello @artf sorry for my last issue, I must create a new issue, my problem is got error like this EDIT : sorry i just fixed my last issue w...
Issue #1471
[Question] Blockmanager and Image
Hi! I use this code to add a new block: blockManager.add("image", { label: 'Image', category: 'Basic', attributes: { class: "gjs-fonts gjs-...
Issue #1034
insert element or block inside parent element
Good day, i have component, have block i have Trait on listen changes, how can I add "h1 " inside that block "'<div class="container" style...
Issue #1545
[Question] How I Get ID From Block?
Hi, i have my block and I get print in Div id results from my javascript class component... How i get ID from my block ??? editor.BlockMana...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.