der henry: node express und pug

Hallo,

ich habe das erste mal pug/jade eingesetzt. Hier habe ich ein pug/jade template in dem Javascriptcode steht. Das Template wird über Express/Render mit einer Tabelle erweitert. Der Javascriptcode funktioniert aber nur teilweise bzw. bis zu einer Stelle alert("Bis hierher funktioniert der Javascriptcode");

Was mir noch aufgefallen ist, nach dem </style> kommt sofort </html> danach kommt noch html-code. Dies sollte doch überhaupt nicht sein. </html> sollte doch nach dem </body> kommen.

Template

html(lang='de')  
    head
        <meta charset="UTF-8">
        title= "Statusmonitor"

    style.
        table {
                table-layout:fixed;
                position:absolute;
                border-collapse:collapse;
                border:2px solid #000000;
                border-collapse:separate;
                border-spacing:2px;
                }
        th { 
            font-family:verdana,Arial;
            font-size:16pt;
            border:1px solid #000000;
            background-color:#6DCEEE;
            text-align:center;
            padding: 10px;
            }
        td { 
            font-size:14pt;
            border:1px solid #000000;
            text-align:left;
            padding: 10px;
            }
        tr:hover { 
                    background-color:yellow;
                 }


script(src="../newlib.js" type="text/javascript")
|
|
script(language="JavaScript" type="text/javascript").

    var xmlfehler=0;
    var xmlhttp = getXmlHttpRequestObject();
    var counter = 0;
    alert("Bis hierher funktioniert der Javascriptcode");
    window.onload = refresh_server();

script(language="JavaScript" type="text/javascript").
    function refresh_server() {
        var myID= getIds();

        xmlhttp.onreadystatechange = updatePage();
        xmlhttp.open("GET","/getstring?varname=" + myID, true);
        alert("Fehler beim Abrufen der XML Daten")
        xmlhttp.send(null)}}
    
script(language="JavaScript" type="text/javascript").
    function updatePage() {
        var wert = new Array();

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            var string = JSON.parse(xmlhttp.responseText);
            var i=0;
            while i < string.length {
                wert = string[i].split(':');
                document.getElementById(wert[0]).firstChild.nodeValue = wert[1];
                ++i;
            }
            xmlfehler=0;
            window.setTimeout("refresh_server();", 500);
        else 
            if (xmlfehler < 3) 
            ++xmlfehler;
            else 
            xmlfehler=0;
            alert("Fehler beim Abrufen der XML Daten"); 
        }


body
    div!=tabelle
  

Nach Ausgabe von Express-Render steht in der html-Seite

<html lang="de"> <head><meta charset="UTF-8"><title>Statusmonitor</title></head><style>table {
        table-layout:fixed;
        position:absolute;
        border-collapse:collapse;
        border:2px solid #000000;
        border-collapse:separate;
        border-spacing:2px;
        }
th { 
    font-family:verdana,Arial;
    font-size:16pt;
    border:1px solid #000000;
    background-color:#6DCEEE;
    text-align:center;
    padding: 10px;
    }
td { 
    font-size:14pt;
    border:1px solid #000000;
    text-align:left;
    padding: 10px;
    }
tr:hover { 
            background-color:yellow;
         }

</style></html><script src="../newlib.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">var xmlfehler=0;
var xmlhttp = getXmlHttpRequestObject();
var counter = 0;
alert("Bis hierher funktioniert der Javascriptcode");
window.onload = refresh_server();
</script><script language="JavaScript" type="text/javascript">function refresh_server() {
    var myID= getIds();

    xmlhttp.onreadystatechange = updatePage();
    xmlhttp.open("GET","/getstring?varname=" + myID, true);
    alert("Fehler beim Abrufen der XML Daten")
    xmlhttp.send(null)}}
</script><script language="JavaScript" type="text/javascript">function updatePage() {
    var wert = new Array();

    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        var string = JSON.parse(xmlhttp.responseText);
        var i=0;
        while i < string.length {
            wert = string[i].split(':');
            document.getElementById(wert[0]).firstChild.nodeValue = wert[1];
            ++i;
        }
        xmlfehler=0;
        window.setTimeout("refresh_server();", 500);
    else 
        if (xmlfehler < 3) 
        ++xmlfehler;
        else 
        xmlfehler=0;
        alert("Fehler beim Abrufen der XML Daten"); 
    }

</script><body><div><h2>Statusmonitor</h2><table><tr><th>Variablennamen</th><th>Format</th><th>ISTwert</th></tr><tr><td>T1_byte</td><td>byte</td><td id="T1_byte">0</td></tr><tr><td>T1_drehzahl</td><td>real</td><td id="T1_drehzahl">1107644908</td></tr><tr><td>T1_genschalter_aus</td><td>bool</td><td id="T1_genschalter_aus">1</td></tr><tr><td>T1_genschalter_ein</td><td>bool</td><td id="T1_genschalter_ein">1</td></tr><tr><td>T1_gen_spannung</td><td>real</td><td id="T1_gen_spannung">6</td></tr><tr><td>T1_laufrad</td><td>real</td><td id="T1_laufrad">58461</td></tr><tr><td>T1_leistung</td><td>real</td><td id="T1_leistung">5</td></tr><tr><td>T1_leitrad</td><td>real</td><td id="T1_leitrad">116922</td></tr></table></div></body>

Vielen Dank der henry

  1. @@der henry

    ich habe das erste mal pug/jade eingesetzt. Hier habe ich ein pug/jade template in dem Javascriptcode steht. Das Template wird über Express/Render mit einer Tabelle erweitert.

    Pug ist hier wohl nicht das Problem.

    script(src="../newlib.js" type="text/javascript")
    |
    |
    script(language="JavaScript" type="text/javascript").
    

    language="JavaScript" war noch nie zu was gut. type="text/javascript" ist es mittlerweile auch nicht mehr. Weg damit!

    Der Javascriptcode funktioniert aber nur teilweise bzw. bis zu einer Stelle

        alert("Bis hierher funktioniert der Javascriptcode");
        window.onload = refresh_server();
    

    Du weist window.onload den Rückgabewert der Funktion refresh_server zu. Du willst aber die Funktion selbst zuweisen, also ohne Klammern.

    😷 LLAP

    --
    „Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
    — Joachim Gauck über Impfgegner
    1. Lieber Gunnar,

      Du weist window.onload den Rückgabewert der Funktion refresh_server zu.

      und diese Funktion könnte noch nicht verfügbar sein, weil sie erst im nächsten <script>-Element definiert wird. Ob das jetzt eine Rolle spielt, oder nicht, Dein Einwand ist sicherlich von hauptsächlicher Bedeutung:

      Du willst aber die Funktion selbst zuweisen, also ohne Klammern.

      Damit sollte dann auch die Verfügbarkeit der Funktion kein Problem mehr sein.

      Liebe Grüße

      Felix Riesterer

      1. Hallo Felix,

        und diese Funktion könnte noch nicht verfügbar sein, weil sie erst im nächsten <script>-Element definiert wird

        Ja, da war noch was. Ich hatte mich heute mittag mit dem Thema befasst, und mich blödsinnigerweise gewundert, warum

        window.onload = "foo()";
        

        nicht funktioniert. Ohne Worte - wie Matthias so gern sagt 😉

        Darüber hab ich das Scope-Thema dann vergessen.

        Du hast natürlich recht, wenn die Funktion in einem Script-Block definiert wird, der hinter dem Script-Block liegt, in dem onload zugewiesen wird, dann gibt's die Funktion noch nicht.

        Innerhalb eines Scriptblocks findet die übliche Hebung von function und var Deklarationen statt, d.h.

        window.onload = foo;
        
        function foo() {
           alert("Foohoo!");
        }
        

        funktioniert. Aber weil der Browser die Scriptblöcke so ausführt, wie sie kommen, klappt es in zwei Scriptblöcken nur dann, wenn die Definition der Funktion gelaufen ist, bevor onload zugewiesen wird.

        Rolf

        --
        sumpsi - posui - obstruxi
        1. Tach!

          Selbst wenn refresh_server() noch gefunden wird, hört es spätestens da auf, weil die Klammernsetzung in dem und dem nachfolgenden Script-Bereich kaputt ist.

          dedlfix.

          1. Hallo dedlfix,

            so weit hab ich es mir gar nicht angeguckt, aber ja, kaputt ist da noch geschmeichelt 😂

            Rolf

            --
            sumpsi - posui - obstruxi
  2. Hallo Henry,

    ich kenne pug nicht, aber nach etwas Suche stelle ich fest, dass es von Python inspiriert ist, wie einige andere Markupsprachen auch. Und das heißt: Einrückung ist nicht zum Spaß, sondern relevante Syntax.

    Die pug-Docs sind - wie so oft - für einen Neueinsteiger unbrauchbar. Das Getting Started erklärt, wie man eine pug-Quelle compiliert, aber wie diese aufgebaut werden muss, darf man erraten. Die Sprache an sich wird nicht erklärt, es gibt einen Haufen alphabetisch sortierter Referenzinformationen, aber keinen Kontext dazu. Die entscheidende Information Einrückung ist Syntaxrelevant finde ich nirgends, dabei hätte eine Vorstellung der Sprache auf die Getting started-Seite gehört. Das findet man bspw. hier

    Nach diesem Rant nun zur Empfehlung:

    Wenn Du head und style auf gleiche Stufe setzt, wird der head beendet bevor das style-Element kommt (was Du vermutlich noch gar nicht gesehen hast). Und deine scripts sind linksbündig, müssen aber - wenn sie Teil des head sein sollen, genauso unter dem head eingerückt werden wie style.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. Hallo,

      ich kenne pug nicht

      ich auch nicht, amüsiere mich aber über die Bezeichnung.
      Das ist nämlich der englische Ausdruck für den Mops (Hunderasse). Zufall?

      Live long and pros healthy,
       Martin

      --
      Ich bin subfontanell spärlich möbliert. - (Kommentar eines Kandidaten der Quiz-Show "Gefragt, Gejagt" zu seinen eigenen geistigen Leistungen)
      1. Hallo Martin,

        kein Zufall - guck Dir das favicon der Homepage an. Warum auch immer so ein Viech das Maskottchen geworden ist.

        Rolf

        --
        sumpsi - posui - obstruxi
        1. printf('Hallo %s!', ['Du', 'ihr', 'Welt', 'zusammen'][rand(0, 3)]);

          "Ein Leben ohne Mops ist möglich - aber sinnlos." – Loriot

          Nicht, daß ich dem zustimmen würde. (höchstens im Plural 😈 )

          /K

          --
          Klingonen sind doof. Sie rufen ständig nach einem Kaplan und wollen nach dem Tod in Styropor® sein.
          1. Hallo,

            das "Einrücken" bzw. die Formatierung war das Hauptproblem, das war mir so nicht bewußt, das dies bei pug so wichtig ist.

            Vielen Dank der henry

          2. Hallo,

            "Ein Leben ohne Mops ist möglich - aber sinnlos." – Loriot

            Nicht, daß ich dem zustimmen würde. (höchstens im Plural 😈 )

            Warum verfälschst du das Zitat dann? Loriot verwendete ausdrücklich den Plural...

            Gruß
            Kalk

            1. Hallo Tabellenkalk,

              es gibt wohl unterschiedliche Fassungen des Zitats.

              https://falschzitate.blogspot.com/2018/02/ein-leben-ohne-mops-ist-moglich-aber.html

              Ob Herr von Bülow das anzügliche Innuendo der Pluralversion bewusst verwendet hat, wer weiß. Zuzutrauen wär's ihm. Man kann es nicht mehr klären, denn seit 2011 gilt ja: Ein Leben ohne Loriot ist möglich, aber sinnlos...

              Rolf

              --
              sumpsi - posui - obstruxi