how to pass information from php to javascript

Question

I'm working on a web UI control called Folder - it basically mimics Windows Explorer folder - you see a grid of items inside a rectangle and can drag an item around, drop an item inside a different instance of the control, add new items and so on. each item is made of an item template - basically some php code that dictates the look of the item, for example an item template might look like this:

my_item_template.php:

<h3>my item</h3>
<p>i'm an item</p>

when dragging the item i want to replace it with a different template, for example:

my_item_drag_template.php:

<h3>my item</h3>
<p>i'm being dragged</p>

one page may host many different kinds of items, each with its template, its load template, its drop template and so on. my problem is moving all these templates from the server side to the client side.
what i'm doing now - in the server side stage i figure out all the templates that i'll need and include them on the page, hidden (display:none). whenever i need a template (for example when the user starts dragging an item and i need its drag template) i locate it, clone it and use. i'd like to avoid having all this code hidden in my page, maybe store it in a jquery's $(folder).data or something. however, i still need to move it from the php. one option would be to insert the templates to $(folder).data and remove them from the page on page load, but i'd rather avoid it (it adds unnecessary dom manipulation). are there any better ways?

Answer 1

It's certainly an interesting problem, but I don't think you are too far off from a good solution by storing the templates in the dom in a hidden div. Unless you have alot of templates, that generally is a great way to have easy access.

Another option is to ajax request a template when you need it. You can use jQuery's $.load function to get a chunk of html and inject it into an element.

$('<div class="newItem" />')
  .load('getTemplate.php?template_id=newItem')
  .appendTo('body');

You would obviously have to fill the new element with real data, but you can still do it in a single call.

There is obviously a performance hit by doing this, but the structural gain is pretty significant if you don't mind making the requests. It allows you to define your templates in your backend just like you would a normal page, instead of mucking them all together in a hidden div at the bottom.