Gültigkeit von Variablen im Inline Script einer durch AJAX geladenen DOM

SonMiko

SonMiko

Erfahrenes Mitglied
Hi Leute,

nach langer Zeit mal wieder eine Frage die mich aktuell beschäftigt.
Wie stehen Variablen und Funktionen zu einem Inline-Script, dass nach einem erfolgreichen Request, dem ursprünglichen DOM hinzugefügt wird?

Gehen wir einmal hiervon aus:

HTML: 
<html>
    <!-- Headbereich mit JQUERY und Assets lassen wir mal weg... -->
    <body>
        <div id="loadWrapper">
            
        </div>
        <button id="load">
            Laden
        </button>
        <script type="text/javascript">
            $(document).ready(function(){
                
                //Button: Load
                $("#load").on('click',function(){
                    $.post('/ajax',function(res){
                        $("#loadWrapper").html(res);
                    });
                });
                
                function foo(bar){
                    alert(bar);
                }
                
                var variable = true;
                
            });
        </script>
    </body>
</html>

Und dann noch die Datei die geladen wird:

HTML: 
<div class="content">
    <div>
        Ich wurde geladen...
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
            foo("test");
            console.log(variable);
        });
    </script>
</div>

In den meisten Fällen sind der geladenen Datei weder die Funktion foo, noch die variable bekannt.
Wenn ich diese aber ans Globale window Objekt hefte, dann werden sie gefunden. Sieht aber nicht sehr elegant aus:


Javascript: 
window.foo = function(bar){
    alert(bar);
}

window.variable = true;

Wie geht ihr mit Scripten um, die ihr dynamisch ladet, wenn diese auf Variablen und Funktionen zugreifen müssen die im Dom bereits verfügbar sind?
 
Wie geht ihr mit Scripten um, die ihr dynamisch ladet, wenn diese auf Variablen und Funktionen zugreifen müssen die im Dom bereits verfügbar sind?
Zum Vergrößern anklicken....
Was mich betrifft, lautet die Antwort: Ich lade überhaupt keine Skripts dynamisch, weil das nur zu den Problemen führt, die Du beschreibst. Bisher hat es immer eine alternative Lösung gegeben. Um das für deinen Fall zu prüfen, müsstest Du dein Vorhaben etwas konkreter beschreiben.
 
Hi,

danke für Deine Antwort.
Ich finde gut, wenn Javascript Code, von dem ich weiss er wird nur in Zusammenhang mit einer Komponente ausgeführt, auch mit der Komponente geladen wird. Aus dem Grund möchte ich den Script-Teil der dann an der Stelle relevant ist, auch nicht auslagern, hinzu käme dass es ein unnötiger Zusatz-Request wäre. Alternativ könnte man den Part natürlich auch in einer großen JS Datei die immer geladen wird, auslagern - aber hier stört mich, dass der Code dann mitgeschleppt wird, obwohl ich weiß dass er nur in einem Fall Verwendung findet...
 
OK, ich verstehe das so, dass der Inhalt, den Du da lädst, nicht immer der selbe ist sondern dynamisch, d. h. jeweils mit unterschiedlicher URL und Du brauchst jeweils anderes Javascript für den jeweiligen Inhalt. Und es handelt sich um eine Vielzahl von Ajax-Aufrufen. Richtig?
 
Gar nicht mal unbedingt. Also - gehen wir davon aus, ich habe in einem Admin-Panel einen Bereich in dem ich eine Eigenschaft eines Datensatzes bearbeiten möchte der relativ speziell ist. Dann bietet sich beispielsweise ein Szenario an indem ich anhand eines Events ein Modal-Fenster lade, welches via AJAX seinen weg ins DOM findet. Nach dem laden, wird der dann darin befindliche Code doch automatisch ausgeführt. Klappt soweit ja auch in der Praxis seit Jahren sehr zuverlässig. Was mich bloß immer stört, ist die Tatsache, dass der neu hinzugefügte Code, nicht wirklich auf Funktionen und Variablen des Parten Dokuments, zugreifen kann - bzw. nur anhand Helfern wie "window.".
 
Wenn ich mir diesen Teil des Codes ansehe:
Code: 
        <script type="text/javascript">
            $(document).ready(function(){
                
                //Button: Load
                $("#load").on('click',function(){
                    $.post('/ajax',function(res){
                        $("#loadWrapper").html(res);
                    });
                });
                
                function foo(bar){
                    alert(bar);
                }
                
                var variable = true;
                
            });
        </script>
wird klar, warum das so ist. Die Definitionen sind innerhalb des document-ready-Handlers definiert und nur dort sichtbar. Wenn Du sie heraus ziehst, so dass sie global sind, dürfte es kein Probleme geben. Läuft im Endeffekt natürlich auf das selbe hinaus wie wenn Du das window-Objekt zu Hilfe nimmst.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück