Using PrototypeJs, how to load a jsp page asynchronously

Question

We're using Spring and PrototypeJs in our app. Basically I want to have a template page and then fill the template page with some values. I found a JQuery.load method but we're not using JQuery.

Closest thing I found was prototype Template object which is just a string. I can make a template in Javascript like the following:

var template1 = new Template("user id: #id name is <span class name='userName'>#name</span>");

and then once I have all the data as json fill in the blanks but this is not enough. I want to display tags etc and be more complex and ideally just load this template file once and just fill in the values later. Is that even possible without using backbone.js or angularjs?

I guess my question is, how do I construct a page better? Currently I'm creating my entire page in javascript (e.g. new Element("div").addClassName("something")) so I was hoping to create my page 'template' in a jsp or some other form and then just fill in the blanks.

I have all the data to display on the page as json.

Answer 1

The Template class is quite flexible about how you create its members. What I would do, for readability, is code your template as an actual page element in the HTML, and then remove it on page load before using it to fill in your JSON.

<div id="template-1" class="#{classname}">
  <h1>#{headline}</h1>
  <p>#{description}</p>
</div>
<div id="articles"></div>

<script type="text/javascript">
var tmp = $('template-1').remove();
tmp.writeAttribute('id',false);
var template = new Template(tmp.outerHTML);
// do whatever with it
$('articles').insert(template.evaluate(myJSON));
</script>

That should get you started. The major benefit of working this way is that you don't have to keep backslashing quotes and writing everything in one line, or bashing it together with + signs.