nicht angemeldet
js-Datei laden über ajax
Hallo, ich bin schon mal über das gleiche Problem gestolpert.
Ich lade über ajax in den Content einer Seite ein JS-Script nach. Dieses benötigt Stammdateien da es ein js-plugin aus dem Netz ist (jqgrid).
Wenn ich nun die benötigten Dateien zuvor schon im <head> Teil geladen hatte und danach via ajax in den Content ein bestimmtes Script nachlade was genau diese im Head-teil definierten Dateien benötigt kann js auf diese Funktionen nicht zugreifen.
Lade ich jedoch die gleichen Dateien die ich zuvor schon im Head-teil geladen hatte nun mit dem js-script was mit Ajax in den Content geladen wird, so funktioniert es.
Beispiel:
<html>
<head>
<script src="assets/js/i18n/grid.locale-de.js" type="text/javascript"></script>
<script src="assets/js/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<body>
<div id="ajaxcontent">hier kommt der js Teil später hin</div>
<script>
$.ajax({url: "js/meinscript.js", success: function(result){
$("#ajaxcontent").html(result);
// in dem meinscript.js werden Funktionen aus jquery.jqGrid.min.js benötigt
}});
</script>
</body>
</html>
Datei meinscript.js
/
/lade ich diese beiden dateien innerhalb meinscript.js funktioniert es
// lade ich sie NUR im head-Teil der Seite funktioniert es nicht
<script src="assets/js/jquery.jqGrid.min.js"></script>
<script src="assets/js/grid.locale-en.js"></script>
<script type="text/javascript">
//scriptteil
var subgrid_data =
.
.
.
.
</script>
Für mich ist das deshalb nicht verständlich, da wenn ich etwas im head-teil zuvor lade, doch dann alle Funktionen schon vorhanden sein sollten oder?
Ich vermute gerade, dass wenn ich mit Ajax etwas nachlade, und dieser Teil dann im Browser erscheint das genau dieser teil keinen Kenntnis von dem bereits geladenen Code hat....
ist das so?
wenn ja, wie löst man so etwas eleganter?
Eigentlich steckte folgende Idee dahinter.
Da meine Seite sehr viele verschiedene Plugins hat wollte ich diese nur bei Bedarf nachladen. Aktuell lasse ich die ganzen Menüleisten stehen und nur in dem Mittelteil werden via Ajax die Seiten geladen die ich benötige. jede Seite benötigt wieder bestimmte js-plugins.
ich wollte eigentlich mit den jquery-Möglichkeiten $.getScript("assets/js/jquery.jqGrid.min.js"); und $("head").append("<style>"+css+"</style>"); bestimmte js und css Teile nachladen
Nun bin ich aber schon daran gescheitert das wenn sie im head-Teil geladen werden ... mmmhhh?
Grüße Jürgen
-
Lieber selfmade01,
<script> > $.ajax({url: "js/meinscript.js", success: function(result){ > $("#ajaxcontent").html(result); > // in dem meinscript.js werden Funktionen aus jquery.jqGrid.min.js benötigt > }}); > </script>Du lädst also HTML-Code nach, in dem ein <script>-Element steht? Und Du erwartest, dass der Browser das dann auch brav ausführt? Meines Wissens geht das so nicht.
Du kannst aber ein <script>-Element im <head> erzeugen, welches eine externe JavaScript-Datei nachlädt, in der dann Code steht, der tatsächlich nach dem Laden ausgeführt wird.
Datei meinscript.js
//lade ich diese beiden dateien innerhalb meinscript.js funktioniert es > // lade ich sie NUR im head-Teil der Seite funktioniert es nicht > <script src="assets/js/jquery.jqGrid.min.js"></script> > <script src="assets/js/grid.locale-en.js"></script> > > <script type="text/javascript"> > > //scriptteil > var subgrid_data = > . > . > . > . > </script> >Was hat denn um Himmels Willen HTML-Code in Deiner JavaScript-Datei zu suchen?
Für mich ist das deshalb nicht verständlich, da wenn ich etwas im head-teil zuvor lade, doch dann alle Funktionen schon vorhanden sein sollten oder?
Das sind sie genau dann, wenn sie im globalen Namensraum definiert sind. Das bedeutet, es muss das window-Objekt neue Eigenschaften oder/und Methoden erhalten (wie z.B. window.jQuery oder window.$), damit diese für Dein Script nutzbar sind.
wie löst man so etwas eleganter?
Warum sollte Dein AJAX-Content aktiven JavaScript-Code enthalten? Warum kann nicht Dein AJAX-Aufruf eine Callback-Funktion enthalten, die sich mit dem erhaltenen HTML-Code "schon auskennt" und die gewünschten Operationen ausführt?
Da meine Seite sehr viele verschiedene Plugins hat wollte ich diese nur bei Bedarf nachladen.
Dann aber so, dass Du im <head> ein <script>-Element erzeugst, das dann die externe Ressource nachlädt!
Aktuell lasse ich die ganzen Menüleisten stehen und nur in dem Mittelteil werden via Ajax die Seiten geladen die ich benötige.
Du willst also nur Besucher mit aktiviertem JavaScript. Schon klar.
jede Seite benötigt wieder bestimmte js-plugins.
Warum schreibst Du nicht alles in eine JavaScript-Datei (per serverseitigem Script natürlich bei Bedarf erzeugt und abgespeichert), damit der Browser nur diese eine Datei laden muss?
Liebe Grüße,
Felix Riesterer.
--
"Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)-
Hallo,
ja muss mir das Ganze nochmals genauer überlegen.
Das mit dem aktivierten js ist für mich ok, da dies eine Anwendung ist und wenn jemand kein JS nutzen möchte so muss er die Anwendung auch nicht nutzen :)
Wieso ich oben einen html-code in eine js packte war etwas verwirrend. Diese Datei wird durch php eingebunden und genau in diesem Moment benötige ioch diese beiden js-Dateien auch.
Anschliessend kommt dann der script-teil
War etwas unübersichtlich dargestellt von mir sorry
Grüße Jürgen
-