Dynamisch Div mit eigenem Javascript laden

[Stefan-S]

Javascript Datei für dynamisch verändertes Div nachladen

Ich habe eine Hauptseite bei der ich in ein Div per jquery.ajax dynamisch neuen Content lade. Dabei handelt es sich um kleine Mini-Apps. Diese wiederum benötigen dann teilweise eigene Javascript Bibliotheken. Um diese zu laden bin ich nach dem Muster auf dieser Seite vorgegangen. Nun ergeben sich allerdings zwei Probleme:

1. Eine dynamisch geladene Javascript Datei wird nicht automatisch ausgeführt (edit: Eigentlich werden nur Funktionen im Stil von "var init = function () {}" nicht automatisch ausgeführt. Alles andere funktioniert). Ich möchte beispielsweise ein neu erzeugtes Map Div im dynamischen Div mit einer OpenStreetMap Karte füllen, sobald das dynamische Div geladen wird. Das Map Div bleibt dann allerdings leer.
Aktiviere ich jetzt allerdings Firebug, wird aus irgendeinem Grund die Karte dann doch geladen. Kann ich dieses Verhalten, was von Firebug ausgelöst wird auch irgendwie selbst erzeugen? Scheinbar werden bei der Aktivierung alle im DOM enthaltenen Javascripte neu geladen.

2. Sind die neuen Scripte einmal geladen, lassen sie sich nur aus dem DOM, aber nicht aus dem Speicher des Browsers entfernen. Ich löse das nun damit, dass ich beim beenden einer Mini-App die Hauptseite einfach mit location.reload neu lade. Das funktioniert zwar, aber so richtig schön ist das nicht. Gibt es da noch eine geschicktere Lösung?

Schonmal danke für jeden hilfreichen Tipp :)


Hier noch ein Beispiel zur Veranschaulichung:

Am Anfang ist das div leer.

<div id=apps></div>

Anschließend wird folgendes über $("#apps").html(ajaxResponse) in das apps div geladen:

<script>
   loadjscssfile("osmscript.js", "js") //dynamisch osm Script(e) nachladen
</script>

<div id=map></div>

Ach so, nur um das als Fehlerquelle auszuschließen: Dieses OSM Karten Beispiel funktioniert, wenn ich das entsprechende Script statisch auf der Hauptseite lade und das Map Div ebenfalls statisch vorhanden ist.

 

[Sentence]

Moin,
du nutzt doch jQuery, warum nimmst du dann nicht $.getScript()?

MfG

 

[Stefan-S]

Hatte das auch gefunden, dachte dann aber, das ist nur dazu gedacht, irgendwelche Scripte remote und nicht von ner lokalen Stelle zu laden.
Mal davon abgesehen, dass es einfacher ist diesen Befehl zu nutzen, meinst du das hilft mir auch bei Problem 1)? Kann das gerade nicht ausprobieren.

 

[Sentence]

Mal davon abgesehen, dass es einfacher ist diesen Befehl zu nutzen, meinst du das hilft mir auch bei Problem 1)? Kann das gerade nicht ausprobieren.

Ne, ich schreibe sowas nur zum Spaß.

...... Loads and executes a JavaScript file using an HTTP GET request.....

 

[Tronjer]

$.getScript() habe ich noch nie verwendet. Ich würde die Funktion zum Befüllen des Divs direkt auf den success Callback des Ajax-Requests binden.

 

[Stefan-S]

Ne, ich schreibe sowas nur zum Spaß.

Hätte ja auch sein können, dass du nur darauf hinweisen willst, dass ich mir es grundsätzlich erstmal zu kompliziert mache
Danke jedenfalls :)

@Tronjer
Wäre auch ne Möglichkeit, allerdings konnte ich bei einem Test komischerweise keine Methoden aus dem Script direkt aufrufen. Daher wärs gut, wenn einfach die Initialisierung funktionieren würde.

 

[Stefan-S]

So, bin endlich mal wieder dazu gekommen mich mit dem Problem zu beschäftigen. Konnte es jetzt eingrenzen. $.getScript() funktioniert zwar (es lädt das Script und führt es aus), aber das Ganze nur mit Einschränkungen

- Dinge wie ein freistehendes alert("script geladen") werden direkt ausgeführt
- Funktionen lassen sich aufrufen
- Nun aber das Problem: Funktionen die die direkt einer Variablen zugewiesen werden, funktionieren nicht, z.B.:

var init = function() {
    alert("test");
}

Wie bringt man diese nun mit $.getScript() zur automatischen Ausführung? Nachträglich kann ich sie ja nicht aufrufen, da sie anonym sind.


EDIT:
Habe das ganze jetzt mal mit nem iFrame probiert. Statt $.getScript() zu benutzen, habe ich die Scriptdateien ganz normal direkt im Header der iFrame HTML Datei geladen. Es tritt aber das gleiche Problem auf wie vorher :/

EDIT2:

Wenn ich das richtig sehe, soll die Funktion gar nicht automatisch ausgeführt werden, da sie gar kein () am Ende besitzt. Stattdessen habe ich in einer anderen Scriptdatei einen Aufruf dieser Funktion gefunden. Dieser Aufruf wird allerdings durch sowas hier getriggert:

$('#mappage').live('pageshow',function (){
                fixContentHeight();
            });

Da scheint nun also die Ursache zu stecken. Das Script versucht vorher mappage so zu setzen:

window.location.replace(window.location.href.split("#")[0] + "#mappage");

Was aber wohl nicht funktioniert, wenn dieser Code innerhalb eines Divs erst aufgerufen wird.