Mini-interfaces laden met ajax

Ik ben bezig met het maken van een herziene versie van een CMS die ik voor een paar sites heb gemaakt.

In deze opnieuw ontworpen versie staat links een lijst met verschillende secties die u kunt beheren (tekst, fotogalerij, enz.). Aan de rechterkant wil ik de juiste gebruikersinterface via AJAX laden wanneer de gebruiker een item selecteert.

Ik begon met simpelweg een verzoek in te dienen bij verschillende bestanden en de HTML in een div te duwen, zoals zo:

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);
                }
            });
        }
    });
});

Toen realiseerde ik me echter dat bepaalde pagina's externe JS vereisten (bijvoorbeeld tinyMCE). Ik heb dus verschillende oplossingen geprobeerd, zoals het afzonderlijk doorgeven van de js-verwijzingen naar JSON en het gebruik van $. GetScript , maar het werd allemaal vreselijk ingewikkeld.

Bij voorkeur zonder frames te gebruiken, wat is de eenvoudigste manier om dit te bereiken?

2
@BenL in dit specifieke exemplaar dat ik heb gegeven bij de vraag die ik het kleineMCE-bronbestand (extern) nodig heb, en een functie die moet worden aangeroepen zodra de inhoud is geladen op tinyMCE tinyMCE.init (); - ik passeer een paar parameters in die oproep.
toegevoegd de auteur Alex Coplan, de bron
Kunt u ons een paar specifieke voorbeelden geven van wat JS moet uitvoeren en hoe? Het lijkt erop dat je js-bestanden op je hoofdpagina kunt invoeren en vervolgens kunt uitvoeren wat je moet doen als je de juiste inhoud invoert, maar het is moeilijk om richting te geven als er geen specifiek voorbeeld is.
toegevoegd de auteur Ben L, de bron

1 antwoord

U kunt uw JavaScript in een blok plaatsen dat u in uw AJAX-callbackfunctie kunt achterhalen en eval (ik weet dat Google iets soortgelijks doet om het parseren van bepaalde JavaScript-berichten te vertragen):

        $.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.

1
toegevoegd
dit is leuk - hoewel ik slechte dingen over eval heb gehoord:/- lost het ook het probleem van externe JS niet op
toegevoegd de auteur Alex Coplan, de bron
voor nu neem ik gewoon alle externe scripts op die ik nodig heb op de hoofdpagina - maar dit voor het laden van inline scripts werkt echt goed - bedankt :)
toegevoegd de auteur Alex Coplan, de bron