hmm: String im String

Joa,

das hier hab ich im code:

 var tempTr = $('<tr><td><input type="textarea" value="'+name+'" id="name_' + i + '" class="form-control" disabled/></td><td><select value='+
    internextern+' id="internextern_' + i 
    + '" class="form-control"><option value="intern">intern</option><option value="extern">extern</option></select></td><td><input type="text" value='+fa
    +' id="fa_' + i
    + '" class="form-control" /></td><td><div id="list3_'+i+'" class="dropdown-check-list" tabindex="100"><span class="anchor">Vertragsart</span><ul class="items" id="vertragsarten_'+i+'"></ul></div></td><td>'
    +'<div id="list1_'+i+'" class="dropdown-check-list" tabindex="100"><span class="anchor">Teams</span><ul class="items" id="teams_list_'+i+'">'
    +'</ul></div></td><td><div id="list2_'+i+'" class="dropdown-check-list" tabindex="100"><span class="anchor">Skills</span><ul class="items" id="skills_list_'+i+'"></ul></div>'
    +'<td><div id="list4_'+i+'" class="dropdown-check-list" tabindex="100"><span class="anchor">Subskills</span><ul class="items" id="subskills_list_'+i+'"></ul></div></td>'
    +'<td><span class="glyphicon glyphicon-minus addBtnRemove" id="addBtnRemove"></span></td><td><a class="btn btn-primary" href="/details#rows='+name+'&'+ skills.replace(" ","") +'&'+subskills.replace(" ", "") +'">Details</a></td></tr>');
    
    $("#tableAddRow").append(tempTr);

Eingaben mit name="Peter Überhorst"

sorgen leider dafür, dass das Ü und das Leerzeichen als merkwürdiges gekrizel und nicht in utf8 dargestellt werden. Wie behebe ich das?

Ich glaube das problem ist, dass das name hier:

 href="/details#rows='+name+'&'+ skills.replace(" ","") +'&'+subskills.replace(" ", "") +'">Details</a></td></tr>'

leider (und trotz heftiger proteste meinerseits) nicht (nimals nie) als string wahrgenommen wird.

Wie löse ich das Problem? Das der Code scheiße aussieht ist nochmal ne ganz andere geschichte die hier nicht debattiert werden muss... steht auf meiner TODO liste.

akzeptierte Antworten

  1. klickt man auf das href wird man dann zb mit diesem string weitergeleitet:

    Peter%20%C3%9Cteburg

    ich brauche aber die leerzeile und den umlaut. eventuell würde es auch reichen wenn ich das auf der ziel html richtig interpretiere. aber da wird bereits uft8 als sprache verwendet und müsste deswegen eigendlich gehen....

    1. Lieber hmm,

      Peter%20%C3%9Cteburg

      das ist korrekt URL-kodiertes UTF-8.

      ich brauche aber die leerzeile und den umlaut.

      Welche Leerzeile? Ich sehe da nur ein Leerzeichen (%20) und einen Umlaut (%C3%9C) in korrekter URL-Kodierung.

      eventuell würde es auch reichen wenn ich das auf der ziel html richtig interpretiere.

      Du? Du interpretierst da nichts, Du verstehst es nämlich noch nicht. Aber eventuell muss es ein server- oder clientseitiges Script verstehen. Und das wird es auch, ganz sicher.

      aber da wird bereits uft8 als sprache verwendet

      UTF-8 ist keine Sprache, sondern eine Kodierung (Durchnummerierung von darstellbaren Zeichen).

      und müsste deswegen eigendlich gehen....

      "Gehen"? Also ich gehe. Hier mache ich nicht mehr weiter.

      Liebe Grüße,

      Felix Riesterer.

      1. @@Felix Riesterer

        UTF-8 ist keine Sprache, sondern eine Kodierung (Durchnummerierung von darstellbaren Zeichen).

        Nicht ganz.

        Die Durchnumerierung ist Unicode. Das Zeichen A hat bspw. die Nummer 0x41 (hexadezimal) – dezimal ist das … das interessiert nicht. Das Zeichen ∞ hat die Nummer 0x221E.

        Die Codierung wandelt die Nummern gemäß der Codierungsvorschrift in Folgen von Bytewerten um. UTF-8 bspw. 0x41 in 41; 0x221E in E2 88 9E.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  2. Lieber hmm,

    1. Du verwendest grausames HTML (keine <label> um Formularelemente, Tabellenlayout etc.)
    2. Du bastelst ein unglaubliches HTML-Element <tr> über einen String, in dem so vieles syntaktisch falsch sein kann, dass es besser wäre, Du hättest die Erstellung der Kindelemente in eigene $('<html>')-Aufrufe ausgelagert. So mag ich das nicht lesen. Und JavaScript/jQuery anscheinend auch nicht.

    sorgen leider dafür, dass das Ü und das Leerzeichen als merkwürdiges gekrizel und nicht in utf8 dargestellt werden.

    Wo kann man das live und in Farbe nachvollziehen?

    Wie behebe ich das?

    Keine Ahnung. Von vorn anfangen und besser lesbaren Code produzieren?

     href="/details#rows='+name+'&'+ skills.replace(" ","") +'&'+subskills.replace(" ", "") +'">Details</a></td></tr>'
    

    JavaScript liest das so: Die Variable href bekommt den Wert eines String-Literals zugewiesen, welches mit doppelten Anführungszeichen beginnt. Der Inhalt ist folgerichtig dieser: /details#rows='+name+'&'+ skills.replace(.

    Oder was soll dieses kaputte Code-Beispiel leisten?

    Das der Code scheiße aussieht ist nochmal ne ganz andere geschichte die hier nicht debattiert werden muss...

    Doch! Denn uns verlangst Du ab, in dieser "scheiße" Deine Fehler zu finden. Das ist nicht nett.

    steht auf meiner TODO liste.

    Nächstes Mal erst Code aufräumen, dann findest Du Deine Fehler sogar selbst und musst sie hier nicht erst mehr posten.

    Liebe Grüße,

    Felix Riesterer.

    1. Tach!

      Nächstes Mal erst Code aufräumen, dann findest Du Deine Fehler sogar selbst und musst sie hier nicht erst mehr posten.

      Oder - und das ist auch für die eigene Fehlersuche hilfreich - das eigentliche Problem aus der Umgebung herauslösen und mit dem geringstmöglichen Code nachbauen. Dann kann man es in Ruhe betrachten. Tritt es dabei aber nicht auf, kann man daraus schließen, dass es ein Zusammenspiel mit der Umgebung ist.

      dedlfix.

    2. Von vorn anfangen und besser lesbaren Code produzieren?

      hier ist der code:

      https://gitlab.tubit.tu-berlin.de/wyczisk/skillmatrixtool.azurewebsites.net/blob/master/js/database/mitarbeiterData.js

      ich hab schon öfter versucht eine art codereview zu finden, nur leider hat sich dazu bisher noch nix ergeben. meine frage ist ua wie räumt man sowas auf, was wären die ersten schritte für eine bessere codequalität (anmerkung: das buch clean code ist mir für javascript zu allgemein und es hat zuviele seiten >500 -> zuviel!)

      Wo kann man das live und in Farbe nachvollziehen?

      Seite

      login ist leider noch:

      admin@skillmatrix.com

      passwort:

      admin2017

      Nach dem einloggen wechselt man zu Mitarbeiter und klickt beim Peter Überhorst auf Details. Dann seht ihr das problem.

      1. Tach!

        meine frage ist ua wie räumt man sowas auf, was wären die ersten schritte für eine bessere codequalität

        Ein Schritt ist, kleine Einheiten bilden, die in sich abgeschlossen sind und definierte Schnittstellen zur Umgebung haben. Alles-in-einem-Bandwürmer ohne Zeilenumbrüche sind sehr schwer nachzuvollziehen. Modernes Javascript (sprich: Template-Strings) kann helfen, lesbare Konstukte zu erzeugen. Siehe beispielsweise: http://wesbos.com/template-strings-html/

        dedlfix.

        1. ein minimiertes beispiel wäre das hier:

          var tempTr = $('<tr>'
              +'<td><a class="btn btn-primary" '
              +'href="/details#rows='+name+'&'+ skills.replace(" ","") +'&'+subskills.replace(" ", "") +'">Details</a></td></tr>');
          

          mit dem template string muss ich gucken wie ich den am besten einbaue.

          leider geht mein erster "versuchen ohne zu lesen"-versuch ${name} nicht, also muss ich mich da einlesen

          1. aufjedenfall wird der string noch richtig gebaut:

            "<tr><td><a class="btn btn-primary" href="/details#rows=Peter Üteburg&Grundübungen,Isolationsübungen&Bankdrücken,Kniebeugen,Kreuzheben,Überkopfdrücken;Trizepscruls">Details</a></td></tr>"

            d.h. das problem ist, dass die url:

            /details#rows=Peter Üteburg&…

            ohne umlaute und co dargestellt wird, d.h. ich muss nur meinen code anpassen der das ausließt:

            var str = window.location.toString();//.replace(" ", "");
            var rowsInput = str.split("rows=");
            var mitarbeiterName =  "";
            var skills = []; //index eines jeden elements findet seine subskills unter dem gleichen index in subskill_list
            var subskill_lists = []; //jedes element besteht aus subskills die mit , getrennt sind
            var dataGlobal;
            
            if(rowsInput.length >= 2 && rowsInput[1].split(",").length > 0) {
                var name_skills_subskillLists = rowsInput[1].replace(" ", "").split("&");
                mitarbeiterName = name_skills_subskillLists[0].replace(" ", "");
                skills = name_skills_subskillLists[1].replace(" ", "").split(",");
                subskill_lists = name_skills_subskillLists[2].replace(" ", "").split(";");
                document.getElementById("detail").innerHTML = "Detailsdaten von " + mitarbeiterName;
                document.getElementById("title").innerHTML = "Details " + mitarbeiterName;
            }
            

            in diesem code müsste ich dann irgendwie sagen "mach mal aus dem namen und den skills einen utf8", richtig?

            1. ich lese aus meiner url einfach das hier aus:

              "https://appfs-blutwurst1.c9users.io/details#rows=Peter%20%C3%9Cteburg&Grund%C3%BCbungen,Isolations%C3%BCbungen&Bankdr%C3%BCcken,Kniebeugen,Kreuzheben,%C3%9Cberkopfdr%C3%BCcken;Trizepscruls"

              wahrscheinlich weil die url zeile kein utf8 frisst und jetzt muss ich das umwandeln bevor ich damit weiterarbeiten kann!

              so, wie wandelt man das um?

              das hier geht net:

              function encode_utf8(s) {
                return unescape(encodeURIComponent(s));
              }
              
              function decode_utf8(s) {
                return decodeURIComponent(escape(s));
              }
              
              1. korrigiere, die url enthält alle umlaute und leerzeichen, aber der auslesende code macht das utf8 weg

                1. Also es geht wenn man das hier macht:

                  var str = decodeURI(window.location.toString());
                  

                  in der url stehen umlaute und leerzeichen korrekt in uft8, aber wenn man window.location.tostring macht kriegt man kein utf8! aber wenn man den ganzen großén scheiß dann decodeURI macht kriegt man wieder utf8 und alles funktioniert!

      2. Hallo,

        ich hatte vor Jahren, noch unter html 4.1, das Problem, komplexes html mehrmals per innerHTML ins Dokument einfügen zu müssen. Ich habe u.A. wegen der verschachtelten Anführungszeichen schnell den Überblick verloren.

        Ich habe dann das html direkt im Dokument notiert und per css unsichtbar gemacht. Immer, wenn ich es dann brauchte, habe ich einen Clone erstellt und mit appendChild eingebaut. Nur so eine Anregung. Heute würde ich es mit https://wiki.selfhtml.org/wiki/HTML/Skripte/template versuchen.

        Gruß
        Jürgen

        1. Hallo JürgenB,

          würde ich auch sehr gerne - scheitert aber am IE. Das <template> Element liefert Dir aber über seine content-Eigenschaft auch nur eine Vorlage, die Du von Hand ausfüllen musst.

          Unmoderner, aber breiter unterstützt ist ein <script> Element mit einem type ungleich JavaScript. Deren Text kann man dann als Baugruppe für jQuery verwenden und mit jQuery-Mitteln (oder DOM-Funktionen) zurechtfummeln. Das Fummeln bleibt Dir auch bei <template> nicht erspart; wenn Du es einfacher haben willst, brauchst Du eine Engine zum Ersetzen von Platzhaltern (was bei geringem Anspruch auch recht fix von Hand gemacht ist).

          Ich hab's hier mal angedeutet.

          Das ändert natürlich nichts daran, dass hmm eigentlich ein ganz anderes Problem hatte und mittlerweile selbst identifiziert hat 😀

          Rolf

          --
          sumpsi - posui - clusi
          1. @@Rolf B

            scheitert aber am IE.

            Können wir diesen Unsinn mit „scheitert aber am IE“ nicht endlich mal sein lassen?

            IE wird mit serverseitig gerenderten Seiten versorgt, genau wie andere, bei den das JavaScript nicht läuft.

            LLAP 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            1. Hallo Gunnar,

              sorry, ich arbeite in einem Laden, dessen Betrieb im Wesentlichen noch auf dem IE aufsetzt und man nicht grundsätzlich den Fuchs oder Chrome zur Norm gemacht hat. Deswegen ist der IE für mich extrem präsent.

              Rolf

              --
              sumpsi - posui - clusi
  3. Joa,

    Wie löse ich das Problem?

    Anders herangehen: Mit einem Templatesystem die Strings zusammensetzen und ins DOM pflanzen.

    MfG

  4. jetzt ist mir gerade eine idee gekommen woran das liegen könnte.

    ich nehme mir den namen (zb peter überhorst) und schreibe ihn in die url die ich als nächstes aufrufe. auf der seite die aufgerufen wird lese ich den namen dann aus.

    kann es sein dass das problem dadurch verursacht wird?