How can I add text from a DB query into a script?

[Eric_F]

I found a few topics on it, but they all had different solutions, and most were from a while ago. I’m hoping someone can give me an easy way to do this.

I need to have the following on a page.

<div id="gleam_competition"></div>
<script>
  function embedCompetition(el, html) {
    el.innerHTML = html;

    Array.from(el.querySelectorAll("script")).forEach(oldScript => {
      const newScript = document.createElement("script");
      Array.from(oldScript.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
      newScript.appendChild(document.createTextNode(oldScript.innerHTML));
      oldScript.parentNode.replaceChild(newScript, oldScript);
    });
  }

  /* Replace with your embed code */
  const embedCode = '<a class="e-widget generic-loader" href="MyURL" rel="nofollow">MyTEXT</a><script type="text/javascript" src="https://widget.gleamjs.io/e.js" async="true"><\/script>';

  embedCompetition(document.querySelector('#gleam_competition'), embedCode);
</script>

And MyURL and MyTEXT would come from a database query.

I saw some things about using dmx-parse or running javascript in a page flow. Most recent solution I could find is

How to make a <script> with dynamic "src" parameter?

Hi everyone! I have a live chat script on a website, similar to Intercom. Currenly it is simple tag, like <script src="//code-ya.jivosite.com/widget/abcde1234" async></script> Now I want to use different scripts in different situations (for example, depending on the user’s selected language). So it has to be dynamic data binding, like <script dmx-bind:src="serverconnect.data.jivolink" async></script> But I quickly recognized that dmx-bind:src doesn’t work here. I read some forum threads, in…

but I don’t really understand how to “use EJS templating to SSR the script src attribute”

I appreciate it if anyone can help me out on this.

[nickneustroev]

Hi!
The basic idea is that you can set the server action that would be loaded before rendering the page.
Specifically this is useful for preparing metatags for the page.
It is described in these tutorials.

Sever Side Rendering with NodeJS

Using Server Connect Data for Server Side Rendering in NodeJS

But you also could use these data in other places on the page. I have used this syntax: <%=_('yourVariable')%>

In my case it is like this:

(need to mention, this is the layout page)

[nickneustroev]

But maybe that would be even easier to just start this JS function after your server action success event.
(I am not fully sure, but I assume you just type function name here)

And inside your script you can get data using “dmx.parse”

For example:

dmx.parse('content.mySeverConnectAction.data.something')

(don’t forget “content” if you fetch data from page itself, and not from layout)

[Eric_F]

I’m having a bit of trouble with this, could you maybe take a quick look and see if I am doing anything wrong?

I have the server connect like

the data for the server connect is

I changed the area where the data is input to

  /* Replace with your embed code */
  const embedCode = '<a class="e-widget generic-loader" href="dmx.parse('content.getGiveaway.data.giveaway_url')" rel="nofollow">dmx.parse('content.getGiveaway.data.giveaway_text')</a><script type="text/javascript" src="https://widget.gleamjs.io/e.js" async="true"><\/script>';

And when I try to load the page, it doesn’t show anything and in the console, I see (ignore the middle one about analytcis)

Any ideas?

I am also maybe doing this whole thing the wrong way. I just want to be able to be able change to the current giveaway from an admin panel.

Is it possible to get the whole script from the database and run it with

once the server connect loads the data?

or use arguments to input the info? I am a beginner when it comes to JS so I’m a little lost.