SyntaxError: unterminated string literal

[hmm]

das geht:

var tempTr = $('<tr><td><input type="number" value="' + mitarbeiter_id + '" id="mid_' + nr + '" class="form-control" disabled/><td><input type="text" value="' + name + '" id="name_' + nr + '" class="form-control" disabled/></td><td><input value="' + skill + '" type="text" id="skill_' + nr + '" class="form-control" disabled/><td><input value="' + subskill + '" type="text" id="subskill_' + nr + '" class="form-control" disabled/></td><td><input value="' + nivau + '"type="number" id="nivau_' + nr + '" min="0" max="5" class="form-control" /></td><td><span class="glyphicon glyphicon-minus addBtnRemove" id="addBtnRemove"></span></td><td><button class="btn btn-primary" onclick=window.location.href="/details#rows=furtz">Details</button></td></tr>');

und das hier mit var name = "furtz" nicht:

var tempTr = $('<tr><td><input type="number" value="' + mitarbeiter_id + '" id="mid_' + nr + '" class="form-control" disabled/><td><input type="text" value="' + name + '" id="name_' + nr + '" class="form-control" disabled/></td><td><input value="' + skill + '" type="text" id="skill_' + nr + '" class="form-control" disabled/><td><input value="' + subskill + '" type="text" id="subskill_' + nr + '" class="form-control" disabled/></td><td><input value="' + nivau + '"type="number" id="nivau_' + nr + '" min="0" max="5" class="form-control" /></td><td><span class="glyphicon glyphicon-minus addBtnRemove" id="addBtnRemove"></span></td><td><button class="btn btn-primary" onclick=window.location.href="/details#rows='+name+'">Details</button></td></tr>');

fehlermeldung:

SyntaxError: unterminated string literal

wie krieg ich den furtz so hin dass er funktioniert?

[dedlfix]

Tach!

SyntaxError: unterminated string literal

Zeilenumbrüche beenden bei Javascript (einige) Statements. Strings sind davon betroffen. Zeilenumbrüche in Strings können mit \ maskiert werden. Besser ist es aber, gar nicht erst solche Bandwürmer zu produzieren.

dedlfix.

[Rolf B]

Hallo hmm,

der Furtz stinkt anderswo her. Bereits das Syntaxhighlighting des Forums zeigt keine Probleme, und wenn ich das Statement kopiere und in der Browserkonsole ausführe, funktioniert es (bis auf die Strict Mode errors, für die ich erstmal die Variablen mit Werten belegen musste).

Ausnahme ist "name" - das ist auch ohne Initialisierung eine existierende globale Variable mit Inhalt "" (das name Property des window-Objekts eben, per Default leer).

Rolf

[hmm]

danke. hier

<input type="text" value="' + name + '" id="name_' + nr + '"

geht name, aber du hast recht denn hier

onclick=window.location.href="/details#rows='+nameLokal+'">Details</button></td></tr>'

mit var nameLokal=name;

kommt es zum fehler, aber nameLokal="furtz"; funktioniert

wie löse ich das jetzt? ich hab die input variable name just for fun in nameI umbenannt, aber das problem bleibt bestehen... anscheind darf ich inen variablen namen nureinmal in einen string einbauen?

[Gunnar Bittersmann]

@@hmm

Das ist auch falsch:
<button class="btn btn-primary" onclick=window.location.href="/details#rows='+name+'">Details</button>

Verweise zu anderen Seiten bzw. Stellen sind keine Buttons, sondern Links:
<a class="btn btn-primary" href="/details#rows='+name+'">Details</a>

LLAP 🖖

PS: Und was soll das sein?
<span class="glyphicon glyphicon-minus addBtnRemove" id="addBtnRemove"></span>

[hmm]

Verweise zu anderen Seiten bzw. Stellen sind keine Buttons, sondern Links: <a class="btn btn-primary" href="/details#rows='+name+'">Details</a>

ich zeige eine tabelle an. jede zeile enthält daten zu einem mitarbeiter. klickt man in der letzten spalte der zeile auf den button, so wird man zu einer detailseite des mitarbeiters umgeleitet

name|skill|subskill|- (loeschen der zeile)|detailsansicht (als button)

ich will da ein viereckiges ding haben (=button) auf dem Details drauf steht, wie würdest du das umsetzen? soll ich input nehmen? (den letzten satz konnte ich mir nicht verkneifen ^^)

PS: Und was soll das sein? <span class="glyphicon glyphicon-minus addBtnRemove" id="addBtnRemove"></span>

der tabelen header ermöglicht es mit einem klick auf ein plus-zeichen neue zeilen zu erschaffen. jede zeile hat das gegenstück dazu, ein minuszeichen mit dem man die zeile löschen kann. addBtnRemove

[hmm]

zum remove:

$('.addBtnRemove').click(function () {
        removeIndex[removeIndex.length] = i;
        $(this).closest('tr').remove();  
    });

die ganze funktion:

function addTableRowParam(mitarbeiter_id, nameI, skill, subskill, nivau) {
    var nr = i;
    var nameLokal = "lol";
    
    var tempTr = $('<tr><td><input type="number" value="' + mitarbeiter_id + '" id="mid_' + nr + '" class="form-control" disabled/><td><input type="text" value="' + nameI + '" id="name_' + nr + '" class="form-control" disabled/></td><td><input value="' + skill + '" type="text" id="skill_' + nr + '" class="form-control" disabled/><td><input value="' + subskill + '" type="text" id="subskill_' + nr + '" class="form-control" disabled/></td><td><input value="' + nivau + '"type="number" id="nivau_' + nr + '" min="0" max="5" class="form-control" /></td><td><span class="glyphicon glyphicon-minus addBtnRemove" id="addBtnRemove"></span></td><td><button class="btn btn-primary" onclick=window.location.href="/details#rows='+nameLokal+'">Details</button></td></tr>');

    $("#tableAddRow").append(tempTr);
    $('.addBtnRemove').click(function () {
        removeIndex[removeIndex.length] = i;
        $(this).closest('tr').remove();  
    });
    i++;
}

var nameLokal = nameI; ist mein ziel. inwieweit ich die stringwurst auslagern und verkleinern kann, weiß ich nicht. selbst mit platzhaltern und replacen hab ich nen fettes ding im code...

[Gunnar Bittersmann]

@@hmm

Verweise zu anderen Seiten bzw. Stellen sind keine Buttons, sondern Links: <a class="btn btn-primary" href="/details#rows='+name+'">Details</a>

ich will da ein viereckiges ding haben (=button)

Nein. Viereckiges Ding ≠ button.

auf dem Details drauf steht, wie würdest du das umsetzen?

Das habe ich doch schon gezeigt:
<a class="btn btn-primary" href="/details#rows='+name+'">Details</a>

PS: Und was soll das sein? <span class="glyphicon glyphicon-minus addBtnRemove" id="addBtnRemove"></span>

der tabelen header ermöglicht es mit einem klick auf ein plus-zeichen neue zeilen zu erschaffen. jede zeile hat das gegenstück dazu, ein minuszeichen mit dem man die zeile löschen kann. addBtnRemove

Auf ein span-Element kann man nicht clicken. Manche Nutzer können es, aber viele nicht: diejenigen, die per Tastatur durch Webseiten navigieren.

Plus und Minus müssen buttons sein. Das sollte dich jetzt nicht überraschen.

LLAP 🖖

[hmm]

hamma, danke. mit <a></a> wird sogar der fehler gelöst:

function addTableRowParam(mitarbeiter_id, nameI, skill, subskill, nivau) {
    var nr = i;
    var nameLokal = nameI;
    
    var tempTr = $('<tr><td><input type="number" value="' + mitarbeiter_id + '" id="mid_' + nr + '" class="form-control" disabled/><td><input type="text" value="' + nameI + '" id="name_' + nr + '" class="form-control" disabled/></td><td><input value="' + skill + '" type="text" id="skill_' + nr + '" class="form-control" disabled/><td><input value="' + subskill + '" type="text" id="subskill_' + nr + '" class="form-control" disabled/></td><td><input value="' + nivau + '"type="number" id="nivau_' + nr + '" min="0" max="5" class="form-control" /></td><td><button class="glyphicon glyphicon-minus addBtnRemove" id="addBtnRemove"></button></td><td><a class="btn btn-primary" href="/details#rows='+nameLokal.replace(" ", "")+'">Details</a></td></tr>');

    $("#tableAddRow").append(tempTr);
    $('.addBtnRemove').click(function () {
        removeIndex[removeIndex.length] = i;
        $(this).closest('tr').remove();  
    });
    i++;
}

das kann ich jetzt quasi als cleancode ansehen richtig?

[Robert B.]

Moin,

<button class="glyphicon glyphicon-minus addBtnRemove" id="addBtnRemove"></button>

das kann ich jetzt quasi als cleancode ansehen richtig?

dein Button ist leer.

Viele Grüße
Robert

[Rolf B]

Hallo Robert,

sicher, dass Bootstrap da an Hand der Klassen keinen Inhalt reinzaubert?

Rolf

[Gunnar Bittersmann]

@@Rolf B

sicher, dass Bootstrap da an Hand der Klassen keinen Inhalt reinzaubert?

Ja.

Manche Screenreader lesen per CSS generierten Inhalt vor; manche nicht. Das ist also nichts, was die Bezeichnung „Inhalt“ verdient.

Und dafür ist CSS auch nicht da, richtigen Inhalt irgendwo einzufügen.

LLAP 🖖

[Robert B.]

Moin @@Rolf B,

wenn ich mir den Code anschaue, bin ich mir auf jeden Fall sicher, dass Bootstrap Probleme löst, die man ohne es gar nicht hätte >:->

Viele Grüße
Robert

[Gunnar Bittersmann]

@@Robert B.

wenn ich mir den Code anschaue, bin ich mir auf jeden Fall sicher, dass Bootstrap Probleme löst, die man ohne es gar nicht hätte >:->

Dummerweise nicht alle. Es bleibt ein ganzer Haufen 💩 von Problemen übrig, die man ohne Bootstrap gar nicht hätte.

LLAP 🖖

[Rolf B]

Hallo Robert,

wenn ich mir den Code anschaue, bin ich mir auf jeden Fall sicher, dass Bootstrap Probleme löst, die man ohne es gar nicht hätte >:->

Vor noch gar nicht so langer Zeit habe ich diesen Spruch schonmal gehört. Da stand aber dann nicht "Bootstrap", sondern "Computer". 😝

Die Existenz dieses Forums ist der beste Beweis für die Wahrheit dieses Spruchs.

Und wer jetzt noch nicht genug hat: It's Time to Kill the Web

Rolf

[Rolf B]

Hallo hmm,

der Fehler wird gelöst, weil dein onclick-Event vorher nicht in Anführungszeichen stand, dein href dagegen schon.

Cleancode ist diese HTML-Wüste definitiv nicht. Wir hatten das Thema ja hier schonmal.

1. Die Klasse 'form-control' wegzunehmen, hatte ich da angeraten - aber das ist falsch; ich kannte Bootstrap nicht.
2. Trotzdem wäre es sinnvoll, die Zellen erstmal als Array aufzubauen und nachher zu joinen. Die Übersicht im Code ist deutlich größer.
3. Deine <td> sind nicht balanciert, da fehlen </td>
4. Dein REMOVE-Button ist aus mehreren Gründen kaputt. Zum ersten hat der REMOVE-Button eine ID. Diese vergibst Du in jeder Zeile neu. IDs müssen aber eindeutig sein. Zum zweiten registrierst Du den click() Handler auf eine Klasse namens addBtnRemove, nicht auf die ID (CSS Selektor für ID beginnt mit #, für Klasse beginnt mit .). WÜRDEST Du nun im HTML aus id="addBtnRemove" ein class="addBtnRemove" machen, dann würde zwar der Klick-Handler angeschlossen, aber nachdem Du 5 Zeilen hinzugefühgt hast, hätte die 1. Zeile fünf Klick-Handler, die 2. Zeile vier, die 3. drei - weil Du nämlich die Event-Registrierung für alle Buttons dieser Klasse in der ganzen Tabelle machst.

Lösung zu 4: Dreh den Append rum. Es gibt $(container).append(inhalt) und $(inhalt).appendTo(container). Der entscheidende Unterschied ist, dass append() den Container zurückgibt und appendTo ein jQuery-Objekt, das den neuen Inhalt beschreibt. Und damit kannst Du nach appendTo gleich weitermachen:

var newRow = "<tr>..htmlwüste..</tr>";

$(newRow).appendTo("#tableAddRow")
         .find(".addBtnRemove")
         .click(function() { ... clickhandler ... });

Andersrum würde der .find auch was finden, aber das wären alle Buttons der Table und dann hast Du das zuvor beschriebene Mehrfach-Handler Problem.

Rolf

[Robert B.]

Moin,

ich will da ein viereckiges ding haben (=button) auf dem Details drauf steht, wie würdest du das umsetzen?

Mit CSS.

PS: Und was soll das sein? <span class="glyphicon glyphicon-minus addBtnRemove" id="addBtnRemove"></span>

der tabelen header ermöglicht es mit einem klick auf ein plus-zeichen neue zeilen zu erschaffen. jede zeile hat das gegenstück dazu, ein minuszeichen mit dem man die zeile löschen kann.

Dient dein leeres span nur dazu, ein + darzustellen? Oder hängt noch mehr daran?

Viele Grüße
Robert

[Gunnar Bittersmann]

@@Robert B.

Mit CSS.

Nein, CSS ist hier nicht gefragt. Hier ist Bootstrap am Wirken. 😨

Deshalb hatte ich ja die Klassen (= präsentationsbezogenes Markup 😱) fürs a-Element gesetzt.

LLAP 🖖

[Robert B.]

Moin Gunnar,

Nein, CSS ist hier nicht gefragt. Hier ist Bootstrap am Wirken. 😨

Deshalb hatte ich ja die Klassen (= präsentationsbezogenes Markup 😱) fürs a-Element gesetzt.

Und wie wird dieses präsentationsbezogene Markup mit Bootstrap umgesetzt? In CSS, oder nicht?

Viele Grüße
Robert

[Gunnar Bittersmann]

@@Robert B.

Und wie wird dieses präsentationsbezogene Markup mit Bootstrap umgesetzt? In CSS, oder nicht?

Bootstrap ist eine Blackbox; da schaut man nicht rein.

LLAP 🖖

[Robert B.]

Moin @@Gunnar Bittersmann,

Bootstrap ist eine Blackbox; da schaut man nicht rein.

dann ist es nichts für Spielekinder wie mich 😉

Viele Grüße
Robert