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.