Aufruf von Funktionen aus anderen Scriptbereichen

  • Hallo Ihr :-)


    Ich habe aktuell ein Problem an dem ich hänge und ich komme irgendwie nicht weiter - vermutlich suche ich nach den falschen Begriffen oder so?!


    Ich habe eine Seite erstellt, welche über AJAX und JavaScript mehrere Farbcodes und Namen hierzu aus einer JSON-API zieht (Feste Anzahl).

    Es gibt dann eine Tabelle, in welcher der Zellenhintergrund in dem Farbcode gefärbt wird und der Name als Inhalt drin steht. Das funktioniert auch alles schon soweit gut. Nun kann es aber vorkommen, dass der Farbcode Schwarz ist - und die Schrift auch. Das verringert die Lesbarkeit enorm, insbesondere auf einem Ausdruck ;-)


    Ich habe aktuell "alles" in einem HTML Dokument. Das ist nicht schön. Außerdem funktioniert das Script für die Farbanpassung nur, wenn ich dieses im gleichen Scriptblock laufen lasse?!


    Es ist auch JScript eingebunden, da die Scriptvorlage die ich gefunden und angepasst habe dies nutzt. Das funktioniert auch. Wenn ich es recht verstanden habe ist im JScript $ als "Zentraler Name" definiert. Das finde ich aber nirgends und ich vermute, dass ich einfach den Wald vor lauter Bäumen nicht sehe :rolleyes:


    Kann mir vielleicht einer einen Tipp geben?


    Wenn ich den Aufruf der Funktion im oberen Bereich zufüge geht es. Ich würde aber gerne dieses Script in eine extra JS Datei auslagern und dann nur den "aktiven" Teil in dem HTML verknüpfen. Oder ist dass der falsche Weg?


    Ich könnte jetzt natürlich allen Code in einem Script-Block zusammenpressen und irgendwie das Problem umgehen. Ist aber ja auch nicht sinnvoll.

    Herzlichen Dank schon jetzt für euer Hirnschmalz :-)


    Liebe Grüße


    Christian

  • Hallo Christian und willkommen im Forum!

    Zitat

    Es ist auch JScript eingebunden, da die Scriptvorlage die ich gefunden und angepasst habe dies nutzt. Das funktioniert auch. Wenn ich es recht verstanden habe ist im JScript $ als "Zentraler Name" definiert. Das finde ich aber nirgends und ich vermute, dass ich einfach den Wald vor lauter Bäumen nicht sehe

    Verwechselst Du hier vielleicht JScript mit jQuery? jQuery bindest Du nämlich ein und zwar hiermit:

    <script src="/EditTemplate/jquery-3.5.0.js"></script>

    Und in jQuery ist $ der zentrale Funktionsname.


    Was bedeutet das #(FileID) hier?

    var requestURL = 'https://example.com/coloring/api/colorinfo/'+#(FileID)+'/'+#(FileID)+'/0';


    Der Kern der Sache scheint mir jedoch dieses zu sein:

    Zitat

    Hier bekomme ich immer einen Fehler in der Konsole, da er hier die Funktion aus dem oberen Script-Bereich nicht erkennt. Eigentlich ist der Plan dies in das AJAX Script für die JSON Abfrage zu integrieren, da der Rückgabewert den ersten Parameter darstellt.

    Der Grund dafür, dass er die Funktion nicht erkennt, ist, dass diese weiter oben innerhalb der anonymen Funktion von

    $(document).ready(function(){

    definiert wird.

    Außerhalb ist sie dann nicht bekannt, siehe hier:

    https://stackoverflow.com/ques…avascript-nested-function

    Stackoverflow schrieb:

    The functions defined within another function won't be accessible outside the function

    Zusätzlich musst Du jedoch folgendes beachten:

    Verwendest Du Ajax, ist das xhr.response erst verfügbar, wenn die Antwort vom Server eingetroffen ist, bzw. wenn die anonyme Funktion aufgerufen wird, die Du xhr.onload zugewiesen hast. D. h. alles was die Antwort vom Server bzw. die Farbcodes braucht, musst Du innerhalb dieser Funktion erledigen.

  • Ich habe eine Seite erstellt, welche über AJAX und JavaScript mehrere Farbcodes und Namen hierzu aus einer JSON-API zieht (Feste Anzahl).

    Es gibt dann eine Tabelle, in welcher der Zellenhintergrund in dem Farbcode gefärbt wird und der Name als Inhalt drin steht. Das funktioniert auch alles schon soweit gut. Nun kann es aber vorkommen, dass der Farbcode Schwarz ist - und die Schrift auch. Das verringert die Lesbarkeit enorm, insbesondere auf einem Ausdruck ;-)

    Eine direkte Lösung habe ich jetzt auch nicht, da wirst du wohl den Kontrast berechnen und ggf. auf weiße Schrift umschalten müssen (falls es Farben gibt auf denen weder weiß noch schwarz gut lesbar ist ggf. noch weitere Schriftfarben vorhalten).

    Nachtrag: ich habe nicht genau genug gelesen, sowas hast du ja drin, nur funktioniert es nicht (warum hat Sempervivum ja schon geschrieben). Evtl. kann ein Blick auf den verlinkten Kontrastrechner trotzdem nicht schaden, evtl. berechnet der das anders/besser?


    Zitat

    Es ist auch JScript eingebunden, da die Scriptvorlage die ich gefunden und angepasst habe dies nutzt. Das funktioniert auch. Wenn ich es recht verstanden habe ist im JScript $ als "Zentraler Name" definiert. Das finde ich aber nirgends und ich vermute, dass ich einfach den Wald vor lauter Bäumen nicht sehe :rolleyes:

    Wie schon geschrieben: jQuery, nicht jScript (das ist was anderes). Was das $ bedeutet steht im Handbuch zu jQuery - was da allerdings nicht steht, ist dass jQuery hier völlig überflüssig ist: du nutzt nur $(document).ready() und dafür reicht Vanilla-JS völlig aus. Ein einfaches document.addEventListener('DOMContentLoaded', … ); macht das gleiche, spart aber die JQuery-Datei. Der Ajax-Request würde sich auch mit jQuery lösen lassen, ist aber auch nicht nötig: Fetch API existiert.



    Zitat
    Code
    1. document.getElementById('weft_1_cell').bgColor = colorAPI['WeftList'][0]['ColorList'][0]['ColorItem']['Color'];
    2. document.getElementById('weft_1').value = colorAPI['WeftList'][0]['ColorList'][0]['ColorItem']['Name'];

    Ohne jetzt den HTML-Code dazu zu kennen, würde ich mal schwer vermuten dass man das mit einer kurzen Schleife und ohne die IDs abfrühstücken kann.

  • Hey ihr zwei!


    Vielen lieben Dank für eure Antworten.


    Hallo Christian und willkommen im Forum!

    Verwechselst Du hier vielleicht JScript mit jQuery? jQuery bindest Du nämlich ein und zwar hiermit:

    <script src="/EditTemplate/jquery-3.5.0.js"></script>

    Und in jQuery ist $ der zentrale Funktionsname.

    Zitat

    Wie schon geschrieben: jQuery, nicht jScript (das ist was anderes). Was das $ bedeutet steht im Handbuch zu jQuery - was da allerdings nicht steht, ist dass jQuery hier völlig überflüssig ist: du nutzt nur $(document).ready() und dafür reicht Vanilla-JS völlig aus. Ein einfaches document.addEventListener('DOMContentLoaded', … ); macht das gleiche, spart aber die JQuery-Datei. Der Ajax-Request würde sich auch mit jQuery lösen lassen, ist aber auch nicht nötig: Fetch API existiert.

    Ja, natürlich: JQuery, nicht JScript. Da war der Kopf wohl gerade wo anders ;) Brauche ich theoretisch nicht, hat jedoch einen Grund: Praktisch habe ich das Script (zumindest teilweise) von einer Seite übernommen. (Will jetzt hier keine Werbung machen, ich hoffe, dass die Nennung okay ist: Zum Schwarzen Pinguin) Dieses habe ich zunächst "Wie es ist" kopiert und dann begonnen es anzupassen. Finde ich immer besser, da man dann merkt an welcher Stelle es plötzlich nicht mehr klappt. Und da ich die Fehlermeldung bekommen habe, dass $. nicht definiert sei hab ich mich auf die Suche gemacht und dann JQuery gefunden. Das habe ich parallel auch von dem Ersteller der Hauptanwendung empfohlen bekommen, da es wohl insbesondere bei komplexeren Dingen helfen kann.

    Es ist dann im Anschluss, wenn alles klappt, durchaus ein Umbau geplant. Auch was Schleifen etc. angeht, am Ende können es bis zu 16 Farben sein, meine Testdateien beziehen sich aber alle auf maximal 6 Farben, da habe ich es schnell von Hand geschrieben und kann auch für unterschiedliche Farben unterschiedliche Dinge machen und gucken was klappt :-)

    Zitat


    Ohne jetzt den HTML-Code dazu zu kennen, würde ich mal schwer vermuten dass man das mit einer kurzen Schleife und ohne die IDs abfrühstücken kann.

    Sollte grundsätzlich kein Problem sein. Ist einfach nur eine "dumme" Tabelle. Wobei ich mir noch nicht sicher bin ob das so bleibt, mir gefällt aber der einfache Charme. Mal sehen ob ich es damit auch schön hinbekomme. Aber ich denke, dass ich mit ein bisschen Formatierung (ohne Rahmen, schönes Höhen-Breiten-Verhältnis...) das so lassen kann.

    Wäre dann eine Schleife die einmal für Warp (Kette) und einmal für Weft (Schuss) durchlaufen müsste.

    Zitat

    Was bedeutet das #(FileID) hier?

    var requestURL = 'https://example.com/coloring/api/colorinfo/'+#(FileID)+'/'+#(FileID)+'/0';

    Das Konstrukt ist etwas größer: Innerhalb einer Verwaltungslösung für Webmusterdateien (Web im Sinne von Weben, nicht von Internet) werden PHP Seiten genutzt. Diese haben die Option HTML basierte Programmierung zu machen, welche dann mit eingeladen wird und dann mittels "schwarzer Magie" ;-) (Closed Sourcecode) mit Daten gefüllt wird. Hierfür gibt es zig Platzhalter, hier eben die FileID, die ID der beim Aufruf angezeigten Datei. Damit kann ich dann die API ansprechen.


    Zitat

    Der Grund dafür, dass er die Funktion nicht erkennt, ist, dass diese weiter oben innerhalb der anonymen Funktion von

    $(document).ready(function(){

    definiert wird.

    Außerhalb ist sie dann nicht bekannt, siehe hier:

    https://stackoverflow.com/ques…avascript-nested-function

    Ja, das klingt schlüssig. Wenn ich deinen Link richtig verstehe ist es so, dass Dinge innerhalb einer Funktion einander erreichen, ich aber mittels window.farbwechsler = farbwechsler eine Freigabe erreichen könnte? Das ist auf jeden Fall mal ein Ansatz.

    Die Begründung mit der geringeren Namespacebeschmutzung finde ich durchaus schlüssig. Es würde an dieser Stelle aber dann reichen, dass ich farbwechsler freigebe, die abhängigen Funktionen (hexToR...) findet er dann wieder, da diese innerhalb des gleichen Funktionsraums sind? Da muss ich mal rum probieren.


    Lieben Dank nochmal!


    Christian

  • Zitat

    Wenn ich deinen Link richtig verstehe ist es so, dass Dinge innerhalb einer Funktion einander erreichen, ich aber mittels window.farbwechsler = farbwechsler eine Freigabe erreichen könnte?

    Ja, das trifft zu, ich bin nur der Meinung, dass es dann einfacher und übersichtlicher wäre, die Funktion gleich im globalen Namespace zu definieren.

  • PS:

    Zitat

    Das habe ich parallel auch von dem Ersteller der Hauptanwendung empfohlen bekommen, da es wohl insbesondere bei komplexeren Dingen helfen kann.

    Das traf vor 10, 20 Jahren zu, aber heute nur noch sehr eingeschränkt, da es sehr vieles, was früher den Nutzen von jQuery ausgemacht hatte, inzwischen auch in Vanilla-Javascript gibt, z. B. classList oder die Funktion closest. Wenn Du noch am Beginn bist, empfehle ich, nicht in jQuery einzusteigen.

  • Ja, das trifft zu, ich bin nur der Meinung, dass es dann einfacher und übersichtlicher wäre, die Funktion gleich im globalen Namespace zu definieren.

    Okay. Im globalen Namespace definieren heißt an der Stelle die verschachtelnde Funktion entfernen? Mit window.XY habe ich es nicht hinbekommen, ich habe jetzt einfach die umhüllende Funktion entfernt.

    Das hat mich zu einem anderen Problem gebracht: Die Funktion wurde im Head ausgeführt, was dazu geführt hat, dass die Seite noch nicht geladen war.


    Mit ein bisschen experimentieren funktioniert es jetzt soweit. Ich habe die document.ready Funktion einfach vor meine Ausführung der Veränderung gepackt. In der finalen Version wird das dann wohl vor der Schleife stehen, welche die Daten der JSON Abfrage in meine Tabelle übersetzt. :-)


    Das hat auf jeden Fall schon mal MEGA weiter geholfen. Ich habe zum Thema in dem von dir verlinkten Artikel auf Stackoverflow noch einen guten Link gefunden. Der hat mich auch nochmal weiter gebracht im verstehen. Artikel zu Closures


    Damit komme ich jetzt auf jeden Fall weiter, denke ich. Das Auslagern in eine eigene Datei hat nun auf jeden Fall auch geklappt :-)


    PS:

    Das traf vor 10, 20 Jahren zu, aber heute nur noch sehr eingeschränkt, da es sehr vieles, was früher den Nutzen von jQuery ausgemacht hatte, inzwischen auch in Vanilla-Javascript gibt, z. B. classList oder die Funktion closest. Wenn Du noch am Beginn bist, empfehle ich, nicht in jQuery einzusteigen.

    Das ist ein guter Hinweis. In der Software welche ich versuche mittels eines Formulars zu erweitern wird JQuery eingesetzt. Da hier aber 90% der Dateien closed Source sind werde ich wohl gar nicht erst mit dem einarbeiten beginnen... Ich mag es eher Vanilla, da hier meiner Erfahrung nach die geringsten "Nebenwirkungen" und Probleme auftreten. Wenn es keinen echten Grund mehr gibt sich einzuarbeiten ist das auf jeden Fall gut zu wissen.


    Herzlichen Dank für eure Unterstützung!