I'm trying to use JQuery to append an EJS partial. What I want to do is to implement infinite scrolling in a table - I am using EJS to render the table's rows as partials and within each partial using more EJS to display the variables passed into the view from Express.

table.html

<tbody>
  <% include row.html %>
</tbody>

row.html

<% users.forEach(function(user){ %>
  <td><%= user.name %></td>
  ...and so on
<% }) %>

jQuery

$('tbody').append('<%- include row.html %>')

The issue I'm having now is that I can't get the last <% include row.html %> to work in the jQuery. I have debugged this and isolated the issue to this line of code. What can I do to make this work?

Thanks!

I'm trying to use JQuery to append an EJS partial. What I want to do is to implement infinite scrolling in a table - I am using EJS to render the table's rows as partials and within each partial using more EJS to display the variables passed into the view from Express.

table.html

<tbody>
  <% include row.html %>
</tbody>

row.html

<% users.forEach(function(user){ %>
  <td><%= user.name %></td>
  ...and so on
<% }) %>

jQuery

$('tbody').append('<%- include row.html %>')

The issue I'm having now is that I can't get the last <% include row.html %> to work in the jQuery. I have debugged this and isolated the issue to this line of code. What can I do to make this work?

Thanks!

• javascript
• jquery
• node.js
• express
• ejs

• It contains a for loop of one of the arrays I'm passing in and rendering the contents with EJS. I'll edit the original post to showcase it. – user2829448 Commented Dec 6, 2013 at 7:17
• Nothing renders onto the page. But I just noticed in the console Uncaught SyntaxError: Unexpected identifier. – user2829448 Commented Dec 6, 2013 at 7:23
• If I remove the jQuery line the console error message disappears. – user2829448 Commented Dec 6, 2013 at 7:25
• When I view the page source it looks like the HTML markup is rendered from the EJS inside the jquery append function, it's just not getting appended. – user2829448 Commented Dec 6, 2013 at 7:52
• There's a lot of rendered HTML so I don't know how practical it would be to post it all. But probably something in there is preventing the jquery from executing because the scroll stops working when the code is there and works again when I remove it. I'll pour through the source to see what the issue might be. Thanks for all your help. – user2829448 Commented Dec 6, 2013 at 8:09

2 Answers 2

From my understanding of express/ejs, if you're wanting to add additional EJS templates after the page has loaded (on the client), you'll need to include the EJS client script on your page, render the new HTML, and append it with jQuery.

Example:

// Get your data
var additionalUsers = { users: [ { name: 'Bob' } ] };

// Moved and renamed the row.html to: /public/templates/row.ejs
var html = new EJS({ url: '/templates/row'}).render(additionalUsers);

// Append the rendered HTML
$('tbody').append(html);

Make sure to escape your HTML, meaning if it contains a single quote, it won't work.

$('tbody').append('<p>Johny's HTML AIN'T werkin'!</p>');

should be

$('tbody').append('<p>Johny\'s HTML IS werkin\'!</p>');