0

I tried to load an EJS page using JSDOM however, I can't seem to load the page.

Here's part of my script in app.js:

const { JSDOM } = require("JSDOM");
const dom = new JSDOM('<!DOCTYPE html><p>Hello world</p>');
console.log(dom.window.document.querySelector("p").textContent); // "Hello world"

const list_dom = new JSDOM('views/list.ejs');
console.log(list_dom.window.document);

The first console log is just to make sure that I'm getting JSDOM to work. Here's the result:

Hello world
Document { location: [Getter/Setter] }

I've tried variations of "views/list", and "views/list.ejs".

Here's my list.ejs:

<%- include('partials/header') -%>

<div class="box" id="heading">
  <h1><%=listTitle%></h1>
</div>

<div class="box">

  <% newListItems.forEach(function(item){ %>

  <form action="/delete" method="post">
    <div class="item" contenteditable="true">
      <input type="checkbox" name="checkedItem" value="<%=item._id%>" onChange="this.form.submit()">
      <p><%=item.name%></p>
    </div>
    <input type="hidden" name="listName" value="<%=listTitle%>"></input>
  </form>
  <% }); %>


  <form class="item" action="/list" method="post">
    <input type="text" name="newItem" placeholder="New Item" pattern="[a-zA-Z][a-zA-Z0-9\s]*" autocomplete="off" required autofocus>
    <button type="submit" name="list" value=<%=listTitle%>>+</button>
  </form>
</div>

<%- include('partials/footer') -%>
Lee
  • 57
  • 7
  • The output looks pretty normal. Did you try running a query on the `document` for the EJS template? That said, why do you want to run JSDOM on an EJS template in the first place? EJS is a templating engine that produces HTML, which is then normal to want to feed into an HTML parser. Running an HTML parser on EJS seems liable to cause issues since EJS isn't HTML. It has special EJS-specific tags that I'd be surprised JSDOM can understand and work with. Maybe provide more context to avoid an [xy problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem/233676#233676). – ggorlen Oct 10 '22 at 20:18
  • @ggorlen When I select document, I receive null. The reason I'm using EJS is to run a for loop inside my html to display all the list elements provided by the user. This is a todo list app, with a text box for user to input list items, and a delete button next to each item. I'm trying to make list items editable. I thought the way to accomplish this was to be able to query the document elements, and then save the newly edited item to db that way. I thought to use JSDOM because I was using Node.js like [this person](https://stackoverflow.com/questions/32126003/node-js-document-is-not-defined). – Lee Oct 11 '22 at 04:30
  • I don't see what any of that has to do with JSDOM. EJS runs long before the user gets a chance to touch the HTML. It's an HTML preprocessor. I think there's a confused situation here. If the user can input list items and delete items, are you running that code on the client or server? If it's on the client (AJAX style), you don't need JSDOM, and if it's on the server (full page refresh style), just use pure EJS and render a new page with the edited/deleted/updated items. – ggorlen Oct 11 '22 at 04:54
  • The link you shared is a good one--same situation likely where the person is confused about whether the code runs on the client or server. Unlike the suggested answer, though, I don't think JSDOM makes sense for this use case. – ggorlen Oct 11 '22 at 04:57
  • @ggorlen, thank you for your response. I'm running my code on the server end. I will look into your suggested solutions. – Lee Oct 13 '22 at 05:14

0 Answers0