DrMaFu: Update einer via JSCRIPT erzeugten Tabelle

Hallo zusammen,

seit einigen Tagen sitze ich an einem Problem bei dem ich mir die Zähne ausbeisse und dringend Eure Hilfe benötige....

Ich programmiere gerade mit Javascript einen Mondphasenkalender für meine Homepage (um schon mal Fragen oder Kommentaren vorzubeugen; nix esoterisches sondern pure astronomische Himmelsmechanik da ich mich mit Astronomie beschäftige).

Dort erzuge ich via Javascript eine Tabelle für den gerade aktuellen Monat.

<div id="area_mondphasenkalender" >
            <script language="JavaScript"  type="text/javascript">
            // <!--
                drawMondkalender();
            // -->
            </script>
        </div>

Nun möchte ich aber zusätzlich über ein Formular einen beliebigen Monat und ein beliebiges Jahr einstellen um dann mittels Klick auf den Update-Button das aktuelle Datum für die Kalenderberechnung ersetzen und den Kalender in dem DIV-Kontainer neu berechnen.

Wie schaffe ich das? Wie kann ich das Javascript/ die Funtion nochmals aufrufen, dass sie mir mit den neuen Datumswerten díe alte Tabelle ersetzt.

Der Input-Button ruft onclick="drawKalenderUpdate()" auf.

Nur ... ich habe echt einen Knoten im Kopf .... was muss in drawKalenderUpdate() stehen damit die Tabell upgedated wird.

Hilfäääääää....

Danke und Grüße,
Markus

  1. Hallo,

    verwende kein document.write, sondern arbeite über das DOM mit http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=createElement, http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=appendChild oder http://de.selfhtml.org/javascript/objekte/all.htm#inner_html@title=innerHTML. Zum Beispiel:

    document.getElementById('area_mondphasenkalender').innerHTML = '<p>Neuer Inhalt</p>';

    Mathias

    1. Hallo Mathias,

      verwende kein document.write, sondern arbeite über das DOM mit http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=createElement, http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=appendChild oder http://de.selfhtml.org/javascript/objekte/all.htm#inner_html@title=innerHTML. Zum Beispiel:

      document.getElementById('area_mondphasenkalender').innerHTML = '<p>Neuer Inhalt</p>';

      uff, das hört sich wirklich kompliziert an und innerHTML ist doch auch nur eine proprietäre Erweiterung, oder?
      Das nächste Problem ist, dass ich über innerHTML keinen neuen Javascript-Content zuweisen kann weil die Browser das Script ignorieren. Über EVAL soll es dazu eine Lösung geben aber diese übersteigt meinen Horizont :-)

      Ich habe letzte Nacht eine andere Lösung umgesetzt. und zwar habe ich das Javascript in eine eigene HTML-Datei ausgelagert welche ich dann in ein IFRAME lade. Dabei übergebe ich den Monat und das Jahr für den Kalender als Übergabeparameter zur URL. Somit kann ich dann einfach via onclick den Inhalt des IFRAME mit einer neuen URL bzw. neuen Parameter aktualisieren.

      Funktioniert bereits ....

      Danke für Deine Hilfe!

      Grüße,
      Markus

      1. Hallo, Markus!

        uff, das hört sich wirklich kompliziert an und innerHTML ist doch auch nur eine proprietäre Erweiterung, oder?

        Obwohl innerHTML ursprünglich eine proprietäre MicroSoft-Erweiterung war, ist sie inzwischen standardisiert und stellt sogar die einfachste Möglichkeit dar, Änderungen im DOM zu bewerkstelligen.

        Das nächste Problem ist, dass ich über innerHTML keinen neuen Javascript-Content zuweisen kann weil die Browser das Script ignorieren. Über EVAL soll es dazu eine Lösung geben aber diese übersteigt meinen Horizont :-)

        Dann hast Du vermutlich eher einen Fehler in Deinem Script. Schaue Dir die Fehlerkonsole von Firefox an oder noch besser: installiere Firebug und schaue in die Konsole. Abgesehen davon: vermeide "eval" um jeden Preis!

        Ich habe letzte Nacht eine andere Lösung umgesetzt[:] (...) IFRAME (...)

        Diese "Lösung" ist suboptimal, wenn man von dem Vorteil absieht, dass sie auch ohne JS funktionieren wird.

        Gruß, LX

        --
        RFC 1925, Satz 3: Mit ausreichendem Schub fliegen Schweine ganz wunderbar. (...)
      2. document.getElementById('area_mondphasenkalender').innerHTML = '<p>Neuer Inhalt</p>';

        uff, das hört sich wirklich kompliziert an

        Nein, das ist nicht komplizierter als document.write. Es kommt letztlich auf dasselbe heraus: Du generierst HTML-Code und baust ihn ins Dokument ein.

        und innerHTML ist doch auch nur eine proprietäre Erweiterung, oder?

        SELFHTML ist da irreführend, weil es vor 10 Jahren geschrieben wurde. innerHTML ist nicht an document.all oder andere proprietäre Techniken gebunden.
        innerHTML ist heutzutage genauso gut unterstützt wie das klassische W3C-DOM.

        Das nächste Problem ist, dass ich über innerHTML keinen neuen Javascript-Content zuweisen kann weil die Browser das Script ignorieren. Über EVAL soll es dazu eine Lösung geben aber diese übersteigt meinen Horizont :-)

        Was genau hast du vor? Wieso willst du JavaScript-Code einbinden, wenn du ihn doch auch einfach direkt an der Stelle ausführen/aufrufen kannst?

        Wie gesagt solltest du von der Arbeitsweise, die document.write mit sich bringt, wegkommen. Wenn du mit das DOM und Event-Handling verwendest, wirst du diese Arbeitsweise mit ziemlicher Sicherheit letztlich einfacher, flexibler und leistungsfähiger finden als das Erzeugen von Inhalten mittels document.write beim Laden des Dokuments.

        In dem Fall brauchst du auch kein eval() mehr und musst auch im Script keine weiteren Scripte mehr ins Dokument schreiben. Das fällt alles weg bei vernünftigem DOM Scripting.

        Ich habe letzte Nacht eine andere Lösung umgesetzt. und zwar habe ich das Javascript in eine eigene HTML-Datei ausgelagert welche ich dann in ein IFRAME lade. Dabei übergebe ich den Monat und das Jahr für den Kalender als Übergabeparameter zur URL. Somit kann ich dann einfach via onclick den Inhalt des IFRAME mit einer neuen URL bzw. neuen Parameter aktualisieren.

        Das mag dir aufgrund deines gegenwärtigen Wissens und deiner Erfahrung einfach vorkommen, technisch gesehen ist es unnötig kompliziert und von hinten durch die Brust ins Auge gelöst. Beschäftige dich einfach mal mit dem DOM. Damit kannst du solche Änderungen an einem Element im Dokument sehr einfach vornehmen, ohne den zu ändernden Bereich in einen IFRAME zu verpacken und die Dynamik über das Neuladen eines Dokuments darin zu lösen.

        document.write ist 15 Jahre alt. Das DOM ist über 10 Jahre alt und seit 7-8 Jahren hinreichend unterstützt. Heute wird document.write fast nicht mehr verwendet. Aus guten Gründen.

        Mathias

        1. Was genau hast du vor? Wieso willst du JavaScript-Code einbinden, wenn du ihn doch auch einfach direkt an der Stelle ausführen/aufrufen kannst?

          Ich möchte einen Mondphasenkalender bauen. Es soll via Javascript für einen ganzen Monat eine Tabelle erstellt werden in der die aktuelle Mondphase als Bild dargestellt wird. Zusätzlich werden noch Informationen über Mond-Aufgangs- und Untergangszeiten ausgegeben. Außerdem soll das Bild - falls es eine Sofi oder eine Mofi an dem tag gibt, automatisch durch ein Bild von einer Sonnenfinsternis oder einer Mondfinsternis ersetzt werden.

          Das Skript für die Tabelle habe ich wie schon geschrieben am Laufen. Allerdings arebitet es aktuell noch mit document.writeln.

          Auf der Seite befinden sich noch andere Inhalte wie Bilder und Erklärungen wie die Mondphasen überhaupt entstehen. Eine Seite über Himmelsmechanik zum Mond also.

          Das grundsätzliche Problem dazu war also, dass ich den Monat verändern können muss, wenn die Seite selbst schon aufgebaut ist und dass dann via Button die Tabelle upgedated werden soll.

          Bisher hatte ich die Tabelle so im Code drin:

          <div id="AreaMondkalender">
                    <script type="text/javascript">
                         ErstelleMondphasentabelle();
                    </script>
               </div>

          Mein Problems bestand nun darin dem AreaMondkalender zu sagen, bitte baue Dich erneut auf und verwende die neuen Monatsdaten aus einem FORM.

          Wie gesagt solltest du von der Arbeitsweise, die document.write mit sich bringt, wegkommen.

          OK, ich schaue mir bei nächste Gelegenheit DOM und das Event-Handling an.

          Aktuell läuft meine Lösung halt mit IFRAME. Das hat aktuell den Charm, dass ich in dem IFRAM-Inhalt treiben kann was ich will und bzgl. Inhalt felxibler bin. Ich kann denn Code dann auch ggf. durch PHP-Skripte ersetzen und habe aber noch den gleichen Rahmen.

          Grüße und Danke!
          Markus