Loading mini-interfaces with ajax - php

Question

I'm in the process of creating a revised version of a CMS I've made for a few sites.
In this redesigned version, there is a list on the left, showing you different sections you can manage (text, photo gallery etc.). On the right, I want to load the appropriate UI via AJAX when the user selects an item.
I started off by simply making a request to various files, and shoving the HTML in a div, like so:
var map;
$(document).ready(function() {
map = {"text":"txt_interface.php","gallery":"gallery_interface.php"};
$('#left_pane li').click(function() {
var id = $(this).attr('id');
if (map[id].length) {
// show loading stuff etc.
var url = 'ajax/'+map[id];
$.ajax({
url: url,
type: 'GET',
success: function(res) {
$('#right_content').html(res);
}
});
}
});
});
However, I then realized that certain pages would require external JS (e.g. tinyMCE). So, I tried various solutions such as passing the js references down in JSON separately and using $.getScript, but it all became horribly over-complicated.
Preferably without using frames, what is the simplest way of achieving this?

Answer 1

You can put your JavaScript in a block that you can pull-out in your AJAX callback function and eval it (I know Google does something similar to this to defer parsing of certain JavaScript):
$.ajax({
url: url,
type: 'GET',
success: function(res) {
var tmp = res.split("{script}"),
code = tmp[1].split("{/script}")[0];
eval(code);
$('#right_content').html(tmp[0]);
}
});
Here is a jsfiddle: http://jsfiddle.net/4HReW/
This assumes that you put {script}/{/script} in place of the regular <script>/</script> tags and that the JavaScript block comes at the end of the content pulled in via AJAX.