Question

I do a lot of re-rendering templates (adding elements, removing elements) using AJAX. Is there an easier way to do this where I could define certain elements ahead of time and pass in a Javascript associative array and it would return the HTML for me? I have heard suggestions for Handlebars, but I heard that it conflicts with Django’s templating system.

An example of this is:

<div id="overlay"></div>

<div id="add-action-box" class="lightbox">
  <a class="close" href="#">X</a>
  <h2>Add Goal</h2>
  <form class="lightbox-form" id="add-action-form">
    <div class="lightbox-form-element">
      <label>Goal</label>
      <input type="text" />
    </div>

    <div class="lightbox-form-element">
      <label>Deadline</label>
      <input type="text" />
    </div>

    <div class="lightbox-form-element">
      <input type="submit" value="Add Goal" />
    </div>
  </form>
</div>

I want to be able to define the above HTML elsewhere and allow Jquery to append the above to another element. I don’t want to type in the above and delete all of the newlines, add \, put quotes around everything, etc. It makes it harder to read.

It is frustrating to edit HTML when it is on the same line like this:

$("body").append('<div id="add-action-box" class="lightbox"><a class="close" href="#">X</a><h2>Add Goal</h2>')

Answer 1

Have you considering using something similar to jQuery Templates. They are no longer maintained and the project has been picked up by jQuery UI. More details can be found here. I usually find them helpful in situations like yours.