title: Can't Render EJS Template on Client
body: <p>I'm coding an application on express, and I'm using ejs as a view/template engine. </p>
  
  <p>At path <code>/artists</code>, I'm rendering the view <code>artists.ejs</code> which has artists covers. When clicking on a cover, I want an AJAX call to retrieve the corresponding data, place it in my template/view for artist <code>artist.ejs</code> and display this template in my HTML under the cover.</p>
  
  <p>I've seen <a href="https://stackoverflow.com/questions/18935597/how-to-generate-content-on-ejs-with-jquery-after-ajax-call-to-express-server/18991407#18991407">this</a> related question but it has not solved my use case.</p>
  
  <p>Everything seems clear, but I can't render the data with the template. I would like to compile the template server-side, send it to the client ready to use, and then fill it in when needed with the data received from the AJAX call.</p>
  
  <p>What I've done:</p>
  
  <p>When calling <code>/artists</code>, compile on server-side using <code>ejs.compile(str, opt)</code>:</p>
  
  <pre><code>router.get('/artists', function(req, res) {
  
  // Compile artist template
  fs.readFile('views/artist.ejs', "utf-8", function(err, template) { // Convert template file to string
      artist_template = ejs.compile(template); // Compile template
  
      res.render('artists.ejs', {template: artist_template}); // render page with compiled template
  });
  </code></pre>
  
  <p>I took care of converting the file into String, as ejs compiler only works with String (compared to Jade .compileFile)</p>
  
  <p>Then on client-side, I grab the function:</p>
  
  <pre><code>&lt;script&gt;
      var template = &lt;%= template %&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Then on another script, I retrieve the data with an AJAX call:</p>
  
  <pre><code>$.get('/artists/'+artist_name, function(data) {
      var html = template({artist: data});
      $('#artist-page').html(html);
  }
  </code></pre>
  
  <p>But when I make the call, I receive:</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: fn is not defined</p>
  </blockquote>
  
  <p>When I call the template, <code>fn</code>, I receive:</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: opts is not defined.</p>
  </blockquote>
  
  <p>Is the function <code>fn</code> hard-coded? I've read the EJS and Jade documentation but there was little relevant information in regards to my issue.</p>
  
  <p>Do I perhaps need the template on client-side also?</p>