Code not working

Resolved

(@pagegenius)

Hi. I’m grateful for Code Embed, but having trouble getting it to work.

I wonder if this is the problem: I’ve looked in my page source, and I find that html elements are being writing inside my script tags. Here’s what I found:

<p><!-- Code Embed v2.3.2 --><br />
<script type="module">
import {Inspector, Runtime} from "https://unpkg.com/@observablehq/[email protected]?module";
  import notebook from "https://api.observablehq.com/@ralphlombreglia/[email protected]?v=3";</p>
<p>  const renders = {
    "chart": "#chart",
  };</p>
<p>  Runtime.load(notebook, (variable) => {
    const selector = renders[variable.name];
    if (selector) {
      return new Inspector(document.querySelector(selector));
    }
  });</p>
<p></script><br />
<!-- End of Code Embed output --></p>

Is that right?

Here’s the code I put into Code Embed. It works with no problem in a straight HTML page outside WordPress:

<script type="module">

// Load the Observable runtime and inspector.
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";

// Your notebook, compiled as an ES module.
import notebook from "https://api.observablehq.com/@ralphlombreglia/[email protected]?v=3";

// Load the notebook, observing its cells with a default Inspector
// that simply renders the value of each cell into the provided DOM node.
//new Runtime().module(notebook, Inspector.into(document.body));

// from https://observablehq.com/@observablehq/downloading-and-embedding-notebooks
new Runtime().module(notebook, name => {
  if (name === "chart") {
    return new Inspector(document.querySelector("#chart"));
 }
});
</script>

Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)

Thread Starter pagegenius
(@pagegenius)

6 years, 9 months ago
Additional info: I copied code from two different sources above, so let me do this correctly. The code I’m putting into Code Embed is this:
```
<script type="module">

import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";

import notebook from "https://api.observablehq.com/@ralphlombreglia/[email protected]?v=3";

new Runtime().module(notebook, name => {
  if (name === "chart") {
    return new Inspector(document.querySelector("#chart"));
 }

});

</script>
```
The code I see in my rendered page source looks like this:

`<p><!– Code Embed v2.3.2 –><br />
<script type=”module”></p>
<p>import {Runtime, Inspector} from “https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js”;</p>
<p>import notebook from “https://api.observablehq.com/@ralphlombreglia/[email protected]?v=3”;</p>
<p>new Runtime().module(notebook, name => {
if (name === “chart”) {
return new Inspector(document.querySelector(“#chart”));
}
});</p>
<p></script><br />
<!– End of Code Embed output –></p>`
Plugin Author David Artiss
(@dartiss)

6 years, 9 months ago

Hi,

Yeah, I’ve seen this occur a few times before. You have, most likely, a plugin or a theme setting that’s causing this, where it’s adding the tags to anything output. By default, when you add any code to custom fields, these tags won’t be added – and my plugin doesn’t add them, so something else is.

Thread Starter pagegenius
(@pagegenius)

6 years, 9 months ago

David,

I’ve turned off all my plugins, and my JS code via Code Embed works.

Surprising though it sounds, WPBakery Visual Composer seems to be the culprit. When it’s the only plugin activated, I get the unwanted HTML I described.

The problem is, we have tons of pages authored with Visual Composer, and turning it off is way too much hassle.

Anybody have any ideas?

Plugin Author David Artiss
(@dartiss)

6 years, 9 months ago

I did wonder if it was going to be a page builder of some kind – in this case, it’s intercepting the output from this plugin and modifying it. There’s nothing I can do about this, as the fault lies with WPBakery.

Thread Starter pagegenius
(@pagegenius)

6 years, 9 months ago

Thanks for your answer. Code Embed is a nice tool, but when a common page builder interferes this much with it, it’s a problem. This ate up two of my days, though partly that was because I wasn’t systematic enough in my approach to it.

I initially tried to use Visual Composer’s “Raw JS” widget to put this code in my pages. When it didn’t work, I immediately gave up on it. What I failed to understand was that I had to disable the Code Embed method before trying the Raw JS method.

Instead, I adopted the CSS & JavaScript Toolbox for injecting JS into individual page headers. That’s a good tool also, and it worked.

But then I got around to suspecting that I hadn’t given Visual Composer’s Raw JS widget the proper shot, and tried it once more on a virgin page with no other embedding option in place, and sure enough it works fine.

Duh. Web life!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Code not working’ is closed to new replies.