How to replace parts of a page dynamically

Clicking on one of the thumbnails on the right should populate the left side with the appropriate larger image, description, etc.

I made a simple crud app that lets them add/edit titles, price, etc., which will show on the left of the page when the corresponding thumbnail is clicked. Would it make sense to use jQuery.load() to replace the left section on click?

Comments

The other option, which is probably a little more complicated, would be to save out all the data for all the albums to Javascript like this:

<script>var albums = {{album_list|json_encode}};</script>

This assumes the template was passed album_list as an array of objects. Then have the click event replace the left column with a client-side rendered template (using something like handlebars).

The trade-off is between fetching each album separately (with probably faster initial page load, but separate server calls for each album click) versus loading all at once and then everything being client-side (with more data fetched initially, plus the extra client-side template logic, but faster responses once it's rendered).

For logged in admins, I want to show the elefant edit/add/versions/delete buttons in the left pane (the parts that gets replace onclick). That's no problem in the divs that load via jquery, but I'm stumped about how to show the ones specific to the initial CD when the page first loads. Obviously I need to add the show button code to the handler, but how do I get the buttons to show up inside the left pane so that they're replaced when a different CD is loaded?